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:
- 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 and 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:
window.dataLayer = window.dataLayer || [];
</script>Add information to the data layer with the dataLayer.push() command:
'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:
- 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.
How data layer information is processed
When Tag Manager loads a container, all queued [data layer push messages] will start to be processed. Tag Manager processes data layer events on a first in first out basis. Each message will be processed one at a time. If the message is an event it will fire any tags who's triggers conditions have been met before moving on to the next message.
If any gtag() or dataLayer.push() calls are made by code on the page, in a Custom Template, or in a Custom HTML tag, the associated message will be queued up to be processed after all other pending messages have been evaluated. This means that any updated data layer values are not guaranteed to be available for the next event. To handle these cases, you can add an event name to a message as it is pushed to the data layer, and then listen for that event name with a Custom Event trigger.