As mentioned before, the data layer builds the bridge between your website and analytics. The first implementation step is to place the data layer within the <head> section of each page on your retail website. This chapter contains a detailed description of the data layer to be implemented.

In the example provided here, we use Mapp's own Tag Management solution. The integration of Mapp Intelligence tracking tags is possible with other Tag Management tools, for example Google Tag Manager (GTM). Just create the relevant data layers as needed. In GTM, the data layer is a combination of events and variables.

Basic Data Layer

The following data layer is required to track each page.

Example

window._ti['pageName'] = location.hostname + location.pathname;
window._ti['language'] = 'en';
window._ti['contentCategory'] = 'Home';
window._ti['contentSubcategory'] = 'Product overview';
window._ti['emailOptIn'] = 'yes';
window._ti['customerId'] = '<encrypted email address of the user>';
JS
Data Layer VariableDescription
window._ti['pageName']
Contains the full URL of the page without the protocol (HTTP(s)) and parameters.
window._ti['language']
Contains the language version of the page, for example "de," "en," "it," "es."
window._ti['contentCategory']

Contains the content category. Possible values:

  • Checkout
  • Service
  • Catalog
  • Account
  • Home
  • Content
window._ti['contentSubcategory']

Contains the content subcategory. Possible values:

  • Corporate
  • Career
  • Customer service
  • Tools
  • Product overview
  • Product detail
  • Internal search
  • Landing page
  • Blog
  • Knowledge
window._ti['emailOptIn']

Indicates whether a user has decided to receive e-mail. It is user-related status information that can be tracked, for example when a user logs on or via a cookie. Possible values:

  • 1 = yes
  • 2 = no
  • 3 = unknown (default)
window._ti['customerId']
The encrypted e-mail of the user. Requires SHA256 hash encoding.

Data Layer for Product & Order Pages

For the data layers of product and order confirmation pages, note the following points:

  • For the product and purchasing process, you must extend the data layer with additional information about the product and order details.
  • On product detail pages, it is necessary to track product-specific information such as product IDs and costs.
  • The order confirmation pages must track the user's entire purchase, including all product IDs, shipping costs, etc.

Product Detail Pages

The tracking of product-specific information such as product IDs and costs is relevant for the product detail pages. Therefore, in addition to the primary data layer for all pages, you must add the following data layer on all product detail pages of your website.

Example

window._ti['productId'] = '1234n';
window._ti['shoppingCartStatus'] = 'view';
window._ti['productCost'] = '34.95';
window._ti['currency'] = 'EUR';
window._ti['productName'] = 'sneaker';
window._ti['productCategory'] = 'women';
window._ti['productSubcategory'] = 'shoes';
window._ti['productSoldOut'] = '0';
JS
Data Layer VariableDescription
window._ti['productId']
Contains the ID of the product as specified in the product catalog (usually the article number), for example, "1700851554," " LS721C08D-K11 ."
window._ti['shoppingCartStatus']

Indicates whether a product is viewed, added, or purchased.

view = The status must be set to view if it is viewed but not placed in the shopping cart.
add = The product is placed in the shopping cart but not yet purchased.

To track the status of view and add in Mapp Intelligence accordingly, it is necessary to force a tracking request to Mapp Intelligence when the user places the product in the shopping cart by clicking on "Add to Cart" function. The data layer must be updated with the following values before calling "Send Page Update":

window._ti['pageName'] = 'add-to-cart;
window._ti['productQuantity'] = '2';
window._ti['contentCategory'] = 'add-to-cart';
window._ti['contentSubcategory'] = 'add-to-cart';
window._ti['shoppingCartStatus'] = 'add';
wts.push(['send','pageupdate'])
JS

'productQuantity' indicates how many items of the product have been added to the cart.

window._ti['productCost']

Contains the cost of the product. Product costs must be equal to the gross value of the product, including taxes and other charges.

window._ti['currency']
Contains the currency as an ISO 4217 standard value in which the product is displayed.
window._ti['productName']
Contains the product title or another descriptive name of the product.
window._ti['productCategory']
Contains the product category, for example women, men, furniture, and so on.
window._ti['productSubcategory']
Contains the subcategory of the product, for example, Shoes, Trousers, Cupboards, and so on.
window._ti['productSoldOut']

Displays the inventory status of a product. 0 = The product is sold out.

Order Confirmation Pages

In addition to the primary data layer for all pages, the following data layer must be added to all order confirmation pages that are displayed after a successful purchase.

Example

window._ti['productId'] = 'pullover;jeans';
window._ti['productCost'] = '99.90;69.95';
window._ti['productQuantity'] = '2;1';
window._ti['shoppingCartStatus'] = 'conf';
window._ti['totalOrderValue'] = '52.99';
window._ti['currency'] = 'EUR';
window._ti['orderId'] = 'M-12345';
window._ti["birthday"] = '20000723';
window._ti['gender'] = '1';
window._ti['couponValue'] = '10.00';
JS

If there are multiple values for a variable, separate the values with a semicolon.

Data Layer VariableDescription
window._ti['productId']

Contains all product IDs of the purchase.

The ID must be identical to the ID used in the product catalog.

window._ti['productCost']
Contains the individual costs per item.
window._ti['productQuantity']
Displays the number of items purchased from each product.
window._ti['shoppingCartStatus']
Indicates that the order transaction has been confirmed. Must be set to conf.
window._ti['totalOrderValue']
Contains the total order value of the purchase, including all ancillary costs such as shipping and taxes, but without discounts.
window._ti['currency']
Contains the currency in which the product is displayed.
window._ti['orderId']
Contains the purchase order number. Each order number must be unique.
window._ti["birthday"]

Is filled in when the user specifies his birthday. The format is YYYYMMDD, for example 19810503.

In case of data protection concerns, the customer can only indicate the year via ""YYYY0101"", whereby month and year serve as placeholders, for example 19900101.

window._ti['gender']

Is filled in when the user specifies their gender. Possible values:

  • 1 = male
  • 2 = female
window._ti['couponValue']
Contains the actual value of a coupon if it was used.

Data Layer for Internal Searches

The internal search is an essential navigation element widely used for web pages. It is also an excellent web analytical tool for obtaining information on website visitors to optimize, for example, the conversion rate. With the help of internal search analysis, you can better understand which keywords were used by visitors during a session, on which pages this search takes place and, which target pages visitors access later. There are two methods for tracking internal searches:

Using URL parameters

If you are interested in using the URL parameter method, please contact your Account Manager. The Account Manager can then make the necessary changes in Mapp Q3 (configuration of query parameters).

Using a Data Layer

Example

window._ti['internalSearchPhrase'] = 'adidas shoes';
window._ti['internalSearchResultsQuantity'] = '15';
JS
Data Layer VariableDescription
window._ti['internalSearchPhrase']
Contains the search phrase as a string.
window._ti['internalSearchResultsQuantity']
Contains the quantity of the search results as a number.

Please first check how your internal search is technically implemented and then select the appropriate variant.

Implementing Tag Integration Loader

The basis of the tracking implementation is the integration of the Tag Integration loader on your website. To do this, add the following configuration for Tag Integration below the data layer of your website:

Example

window._tiConfig = window._tiConfig || {
    tiDomain: 'responder.wt-safetag.com',
    tiId: '111111111111111',
    option: {}
};
  
/** start TagIntegration loader  */
(function(a,d,c,f){a.wts=a.wts||[];var g=function(b){var a="";b.customDomain&&b.customPath?a=b.customDomain+"/"+b.customPath:b.tiDomain&&b.tiId&&(a=b.tiDomain+"/resp/api/get/"+b.tiId+"?url="+encodeURIComponent("https://"+d.location.host+"/")+"&v=5");if(b.option)for(var c in b.option)a+="&"+c+"="+encodeURIComponent(b.option[c]);return a};if(-1===d.cookie.indexOf("wt_r=1")){var e=d.getElementsByTagName(c)[0];c=d.createElement(c);c.async=!0;c.onload=function(){if("undefined"!==typeof a.wt_r&&!isNaN(a.wt_r)){var b=
new Date,c=b.getTime()+1E3*parseInt(a.wt_r);b.setTime(c);d.cookie="wt_r=1;path=/;expires="+b.toUTCString()}};c.onerror=function(){"undefined"!==typeof a.wt_mcp_hide&&"function"===typeof a.wt_mcp_hide.show&&(a.wt_mcp_hide.show(),a.wt_mcp_hide.show=function(){})};c.src="//"+g(f);e.parentNode.insertBefore(c,e)}})(window,document,"script",_tiConfig);
  
/** end TagIntegration loader */
JS
ParameterDescription
tiDomain

You can obtain this information from your Mapp Intelligence consultant.

If you have further questions, please contact them directly.

tiId