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.
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:
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>
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:
- Click Variables.
- Under User-Defined Variables, click New.
- Click Variable Configuration and select Data Layer Variable as the variable type.
- In the Data Layer Variable Name field, enter the key exactly as it was written in the code (e.g. bookTitle, not book title.)
- In most cases you should leave the Data Layer Version set to the default value of Version 2. Learn more.
- Save the variable.
- Repeat these steps for every data layer key that you would like to have available as a variable in Tag Manager.
- Publish the container.
