Data is essential to thoroughly analyze web pages concerning visitor activities and performance. Website operators, therefore need to collect qualitative user information to be able to evaluate and report, and subsequently respond to customer requirements. The implementation concept of a data layer offers a proven method to collect various data in a standardized way.

The data layer is an abstract entity in the form of a JavaScript object. For web pages, it takes the form of a JavaScript array that contains "parameter: value" pairs. While the parameter name is static and is used across all the pages on the site, the value is replaced at every page with the actual data that correspond to that specific page. With this concept, it is ensured that the same data layer elements contain the same type of data consistently across all the pages of your website.

Data layers enable a central provision of all data that can be used for tracking with Mapp Intelligence, as well as for all third-party tags or plugins. This applies equally to categories, which is static information that will be recorded only once (for example, a product belongs to the category 'sports article'), as well as for parameters, which is dynamic information (for example, payment method of a customer).

Data layer elements must consistently use the same type of information on all pages to ensure a correct measurement. This means that whenever you use an item (for example, "UserId"), it must always contain the same kind of data across all pages, where it is collected.

For detailed specification of a data layer, please also refer to the official W3C Data Layer Specification.

Example Consistent Data Layer

The following data layer example illustrates the consistency of information on all pages:

PageHomeSection 1LoginProduct AProduct A DetailsJavaScript Example
Data Layer Element





Page Name
en.homeen.section1en.loginen.producten.productDetail
window._ti['pageName'] = '<PAGE NAME>';
Product


Product AProduct A
window._ti['product'] = '<PRODUCT NAME>';
Client ID

123412341234
window._ti['clientId'] = '<CLIENT ID>';
window._ti['pageName'] = 'en.home';

window._ti['pageName'] = 'en.section1';

window._ti['pageName'] = 'en.login';
window._ti['clientId'] = '1234';

window._ti['pageName'] = 'en.product';
window._ti['product'] = 'ProductA';
window._ti['clientId'] = '1234';

window._ti['pageName'] = 'en.productDetail';
window._ti['product'] = 'ProductA';
window._ti['clientId'] = '1234'; 
JS


The following code snippet shows an example of an implemented data layer for an online shop's website:

Example

<html>
	<head>
		<script>
			window._ti = window._ti || {};
			window._ti['contentId'] = 'shop.ladies.blouses';
			window._ti['contentGroup'] = {
				1: 'ladies',
				2: 'outerwear'
			};
		</script>
		<script src="/js/tiLoader.min.js"></script>
	</head>
	<body>
		... 
	</body>
</html>
XML

Note the following for integration with Tag Integration: once you have initially implemented a data layer according to your specifications, the mapping of the parameters has to be made in Mapp Tag Integration (which is described in the chapter Adding Tag Integration-Parameters). Otherwise, the values are not used for tracking. Furthermore, the data container has to be configured to define the distribution of data.