Data Layer Essentials

The data layer is a foundational concept for collecting and organizing data in a consistent, structured manner. It enables website operators to gather qualitative user information essential for analyzing visitor activities, website performance, and responding effectively to customer needs.

1 What Is a Data Layer?

A data layer is an abstract structure, typically implemented as a JavaScript object or array, containing parameter: value pairs. It acts as a centralized repository for data that can be used by tracking tools, including Mapp Tag Integration, and third-party tags or plugins.

Key Characteristics:

• Standardization: Parameter names remain static across all website pages, ensuring consistency in data structure.

• Dynamic Values: While the parameter names are fixed, the values change dynamically based on the specific page or user action.

• Versatility: Supports both:

  • Static Information: Data that doesn’t change often (e.g., product categories).

  • Dynamic Information: Data that varies per page or session (e.g., user payment method).

By following this standardized approach, the data layer ensures consistency and reliability across all tracking implementations.

2 How the Data Layer Integrates with Mapp Tag Integration

Once your data layer is implemented, Mapp Tag Integration uses parameters to make the data layer values available for tracking and analytics. Here’s how it works:

1. Mapping Data Layer Values to Parameters

   • Each data layer element (e.g., pageName, productName) must be mapped as a parameter in Mapp Tag Integration.

   • Parameters act as the bridge between your data layer and the tracking scripts/plugins used in your website.

2. Parameter Creation Workflow

   • After setting up your data layer, navigate to the Parameters page in Tag Integration.

   • Create a new parameter and map it to the corresponding data layer variable.

   • For example:

     • Data layer variable: window._ti['pageName']

     • Tag Integration parameter: pageName

3. Usage of Parameters in Tag Integration

   • Once mapped, parameters can be used in:

     • Rules: Define conditions based on data layer values (e.g., triggering a tag only if pageName equals en.product).

     • Plugins: Use parameters to enrich data sent to third-party tools or custom scripts.

     • Tags: Include mapped parameters in tracking pixels or event data.

3 Benefits of Using the Data Layer with Mapp Tag Integration

• Centralized Data Management: Simplifies tracking by keeping all data definitions in one place.

• Enhanced Flexibility: Easily update data mappings without modifying website code.

• Improved Accuracy: Ensures consistent data collection and processing.

4 Consistency of Data Layer Elements

To ensure accurate and reliable tracking, it is crucial to implement data layer elements consistently across your website. While some elements (e.g., pageName) are static and must be present on every page, others (e.g., product) are dynamic and appear only on specific pages.

This consistency ensures that your tracking setup is both reliable and scalable, avoiding issues like missing data or misaligned parameters.

Availability of Data Layer Elements Across Pages

The following table illustrates which data layer elements are available on various types of pages in an e-commerce context:

JavaScript Examples for Consistent Implementation

Below is an example implementation of data layer elements for each page type. The examples demonstrate:

• Static Data: Elements such as pageName are consistent across all pages.

• Dynamic Data: Elements like product or clientId vary based on the page’s context.

Home Page

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

Men’s Section

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

Login Page

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

Product A

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

Product A Details

window._ti['pageName'] = 'en.productDetail';
window._ti['product'] = 'Product A';
window._ti['clientId'] = '1234';

5 JavaScript Implementation Examples

Implementing a data layer with JavaScript allows you to dynamically populate and manage data across different pages. Below is a generalized example of how to set up a data layer for a website, followed by a more detailed example for an e-commerce context.

General Data Layer Example

This example demonstrates a basic structure for setting up a data layer on any website. The static data (e.g., pageName) is always present, while dynamic data (e.g., userId, sessionId) may only be populated in certain contexts, such as when a user is logged in or during an active session:

<html>
  <head>
    <script>
      window._ti = window._ti || {};
      // Static Data
      window._ti['pageName'] = 'home';
      window._ti['category'] = 'general';
      // Dynamic Data (if available)
      window._ti['userId'] = '12345';
      window._ti['sessionId'] = 'abcde12345';
    </script>
  </head>
  <body>
    <!-- Website content -->
  </body>
</html>

Detailed E-Commerce Data Layer Example

In an e-commerce context, the data layer might include information like product details, cart values, and user interactions:

<html>
  <head>
    <script>
      window._ti = window._ti || {};
      // Static Information
      window._ti['pageName'] = 'en.productDetail';
      window._ti['category'] = 'Electronics';
      // Product Information
      window._ti['productId'] = '123456';
      window._ti['productName'] = 'Smartphone X';
      window._ti['price'] = 799.99;
      window._ti['currency'] = 'USD';
      // User Information
      window._ti['clientId'] = '987654';
    </script>
  </head>
  <body>
    <!-- Product Page Content -->
  </body>
</html>