Prepare the content variables and contexts to use in tags

The tags you will add will require variables for

• Content definition. The variable types needed are:
  • Data Layer Variables: based on Google Tag Manager DataLayer
  • Custom Javascript: which contains Javascript functions
• Snowplow Context Definition: These variables will use the Custom JavaScript type and are designed to capture specific behaviors, such as user authentication etc.

❗

It will be assumed that you have already configured the necessary DataLayer variables and integrated them in your website code. If it's not the case, go to chapter Updating the DataLayer if the required properties are not yet available

📘

Once all the variables are ready, you can initialize the tags you want to integrate.

How to Create variables (examples)

This chapter provides examples for both types of variable.

To create a variable, please follow the steps described bellow:

Data Layer Variable

1. In Variable Configuration (1), select the Data Layer Variable (2)

   

2. Then fill in the Data Layer Variable Name (1), then save the variable (2) This name corresponds to the JSON path used to access the data that was pushed from the website into GTM Data Layer.
   ⚠️ The value shown in the screenshot is for illustration purposes only. You’ll need to adjust it based on your specific setup.

   

Custom Javascript

1. In Variable Configuration (1), select the Custom Javascript (2)

   

2. Then fill the Custom Javascript field with the javascript code.
   ℹ️ You’ll find example code snippets further down the page

   

Variables for content definition

❗

It will be assumed that you have already configured the necessary DataLayer variables and integrated them in your website code. If it's not the case, go to chapter Updating the DataLayer if the required properties are not yet available

In the tag configuration, you will use existing variables from the Data Layer.

The required properties for each tag, along with their corresponding variables, are listed below:

{{JS - ProductInCart}} example code:

function(){
  return {
    'sku': {{DL_Cart_Product_SKU}},
    'name': {{DL_Cart_Product_Name}},
    'category': {{DL_Cart_Product_Category}},
    'unitPrice': {{DL_Cart_Unit_Price}},
    'quantity': {{DL_Cart_Item_Quantity}},
    'currency': {{DL_Cart_Currency}}
  };
}

📘

It’s recommended to first complete this table by assigning the appropriate existing variable name to each property.

⚠️

Note: The JavaScript variables and tag configurations described in the following chapters will reference these variables using example names.

Make sure to replace those example names with the actual variable names you’ve already configured in your Tag Manager workspace.

Variables for Snowplow Context Definition

This variables will refer to the Data Layer variables previously identified:

SP Context - Identified Product

Create a Custom Javascript Variable with name SP Context - Identified Product

function(){
	return [{
		'schema': 'jsonschema:com.splio/product/1-0-0',
		'data': { 
			'productSKU': {{DL_Product_SKU}} 
		}
	}];
}

SP Context - Identified User

Create a Custom Javascript Variable with name SP Context - Identified User

function(){
	return [{
		'schema': 'jsonschema:com.splio/logged_user/1-0-0',
		'data': { 
			'userId': {{DL_User_Id}}, 
			'sourceId': {{ DL_Source }} 
		}
	}];
}

SP Context - Thank you page

Create a Custom Javascript Variable with name SP Context - Thank you page

Here is an example ( ⚠️ To adapt depending on how you identify the purchase confirmation page):

function() {
    var pageUrl = {{DL - URL}};
    
    if (pageUrl.indexOf("thank_you") !== -1 || pageUrl.indexOf("thank-you") !== -1) {
        return [{
            'schema': 'jsonschema:com.splio/thank_you_page/1-0-0',
            'data': {
                'purchase_completed': true
            }
        }];
    }

    return [];
}

Updating the DataLayer if the required properties are not yet available

❗

These steps will require some knowledge on content definition with Google Tag Manager. (optional) Data Layer updates will require site development knowledge

Define the data Layer content in your ecommerce site code (only if these properties are not yet specified in your tagging plan)

Regarding the event types you expect to integrate, you may have to specify new variables and add some new Google Tag Manager Data Layer content directly in your ecommerce site code.

📘

Note that if you have already specified these properties on Data Layer with another name, you should ignore this chapter, and use them directly in the new variables used for Snowplow.

Here are listed the required properties to integrate in Data Layer by event type :

• For Page View, Thank you Page View & Product View :
  • productSKU : (string) recommended for “Product View” use cases. Define the identifier for a product
  • userId : (string) recommended for reconciliation of authenticated users. It can be specified once for all for all event types
• For Add To Cart & Remove from Cart :
  • productInCart object, with this content :
    JavaScript

    productInCart: {
    	sku: '<mandator_product_id_or_sku>',
    	name: '<mandator_product_name>',
    	category: '<product_category>',
    	unitPrice: <mandator_product_price>,
    	quantity: <product_quantity_added>,
    	currency: '<currency>'
    }

  • userId : (string) recommended for reconciliation of authenticated users.

📘

The way you can integrate these properties in the Google Tag Manager Data Layer will actually depend on your e-commerce solution. You can follow standard Google Tag Manager guides for help

Here an example of initialization of data Layer on a Typescript SPA ecommerce site :

TypeScript

// Define dataLayer type
declare global {
	interface Window {
		dataLayer: Record<string, any>[];
	}
}

// ...

// Example for an "AddToCart" event
window.dataLayer.push({
	// To use with a custom event type trigger
	event: 'addToCart',
	// Optional authenticated contact id
	userId: user.logged.id,
	// Payload for product added in cart
	productInCart: {
		sku: newProduct.sku,
		name: newProduct.title,
		category: 't-shirt',
		unitPrice: newProduct.price,
		quantity: newProduct.quantity,
		currency: newProduct.currencyId
	}
});

Initialize all the variables required by tags

From the tag configuration you will refer to the specific contents (usually available in the Google Tag Manager Data Layer) required by each event type through specific variables

The 3 default data Layer variables to create are :

Once the variable are ready you can use them in your tag configuration