The data layer

The data layer

Google Tag Manager functions best when deployed alongside a data layer. A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. You can then use that information to populate variables and activate triggers in your tag configurations.

Developers should read the developer documentation for more information.

Rather than referencing variables, transaction information, page categories, and other important signals scattered throughout your page, Tag Manager is designed to easily reference information that you include in your data layer source code. Implementation of a data layer with variables and associated values, ensures that they will be available as soon as you need them to fire tags.

When you set up your website or mobile app to work with Tag Manager and a data layer, think about what categories of information the data layer should handle, such as:

  • Product data: Product name, price, category
  • Marketing campaign information: Traffic source, medium
  • Transaction data: Cart value, checkout date
  • Customer information: New or returning customer

Create a data layer variable

Data layer variables enable Tag Manager to read values from your data layer implementation and pass those values to tags, triggers, and other variables. A data layer object is made up of a list of key/value pairs. A key is a category of things – a book’s category, title, or author. Each key could have different values. A book’s title key could have a value of ‘Ulysses’, ‘War in Peace’, ‘A Brief History of Time’, etc.

Add data layer code to your web page

To set up your data layer, work with a developer to add the following snippet of code to the <head> section of your web page above your container snippet:

<script>
dataLayer = [];
</script>

Add information to the data layer with the dataLayer.push() command:

<a href=”#” onclick=”dataLayer.push({
‘bookCategory’: ‘fiction‘,
‘bookTitle’: ‘Cien años de soledad‘,
‘bookAuthor’: ‘Gabriel García Márquez
});”>Book details</a>

See the developer documentation to learn more about data layer implementations.

Set up the data layer variable

Once you have the key that you would like to work with, you can proceed to create a data layer variable:

  1. Click Variables.
  2. Under User-Defined Variables, click New.
  3. Click Variable Configuration and select Data Layer Variable as the variable type.
  4. In the Data Layer Variable Name field, enter the key exactly as it was written in the code (e.g. bookTitle, not book title.)
  5. In most cases you should leave the Data Layer Version set to the default value of Version 2Learn more.
  6. Save the variable.
  7. Repeat these steps for every data layer key that you would like to have available as a variable in Tag Manager.
  8. Publish the container.
Note: Data layer variables only work on a per-page basis. If you would like the data layer values to persist through multiple page views, you will need to add your own code to pass data layer values between pages.

Published by anthonykuong

Anthony is a versatile Software professional with around 10 years of experience. He is a Full Stack developer experienced with clients in the Financial, Health and Supply Chain industries. He is experienced with MVC frameworks ( Spring Boot) , SPA frameworks ( Angular , VueJS), and also supports automated build deployments and packaging for development, qa, and production servers.. He has delivered rich user experience using Modern web technologies and techniques such are HTML5, CSS3, ECMAScript 6 (ES6)/ ECMAScript 2015, CSS pre-processors (SASS, Less), JavaScript build tools (Grunt, Gulp) , various UI Frameworks including AngularJS , Knockout JS , and CSS Frameworks including Bootstrap, and Foundation. He is adaptable to new technologies and frameworks. He is a rigorous, quality-conscious contributor with solid analytical skills. I can also be found on youtube - Youtube Channel: https://www.youtube.com/user/akuong/

Leave a comment