Google Tag Manager is a tag management system that makes it easier to add tracking codes and small code snippets to a website or mobile app without editing the codebase every time.
To receive information from the website, Google Tag Manager uses a data layer. Want to understand what it is and how to make the most of it? Keep reading.
Contents
What is the Google Tag Manager data layer?
A data layer, or dataLayer, is a JavaScript object used to store information and pass it from the website to the Tag Manager container.
The information available in the data layer can be used to create variables or trigger tags inside Tag Manager.
It is important to keep in mind that when you add the Google Tag Manager container snippet to a website, the tool itself already creates a data layer. In other words, when you work with a dataLayer, you are not usually creating it from scratch, but adding extra information to the one that already exists.
How should you implement a data layer?
The data layer can send both events and variables to Google Tag Manager. A basic example would look like this:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'event_name',
variable: 'value'
});
</script>To use the event sent through the data layer, you need to create a Custom Event trigger in Google Tag Manager and give it the same name as the one used in the dataLayer, event_name in the example above. It is also possible to use a regular expression when creating the custom event trigger.
When it comes to variables, you need to create a new variable in Tag Manager called a Data Layer Variable. When configuring it, you should use the same key name that appears in the dataLayer, variable in this example. When creating a Data Layer Variable, you can also assign a default value.
If the variable is nested inside another object, you need to reference the previous levels using dot notation. If the variable uses an array, you also need to include the index number of the item you want to access. As in JavaScript generally, array indexes start at 0.
Get more out of Tag Manager with a data layer
As mentioned above, when Google Tag Manager is added to the code of your website, a data layer is created and already sends a large amount of information to the platform. In some situations, that default information may be enough to cover the measurement needs of the site.
In many cases, however, it is necessary to add custom events or variables in order to measure specific aspects of the website. In those situations, additional information needs to be sent through the dataLayer so that it can be received by Tag Manager and by other tools such as Google Analytics, Google Ads, or Facebook.
When might you need a data layer?
The data layer is used to send additional information, but when would that actually be necessary? Here are a few common examples:
- A newsletter sign-up form that cannot be tracked properly using Google Tag Manager’s default options. In that case, you could implement a data layer event that fires when the user has successfully subscribed to the newsletter:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'newsletter_signup'
});
</script>- Content grouping for analysis. If your website publishes content, it can be useful to group that content using attributes such as author, category, or content type so you can easily analyze in Analytics which types of content perform best:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
author: 'Raúl Revuelta',
category: 'Digital Analytics',
type: 'post'
});
</script>- E-commerce measurement in Google Analytics. Another very common use case is e-commerce tracking. It is possible to implement a data layer on each product page, as well as for product views, impressions, and purchases. The following example can be used to measure a purchase in Google Analytics 4:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "X00000",
affiliation: "Online Store",
value: "35.60",
tax: "7.48",
shipping: "4.99",
currency: "EUR",
coupon: "SUMMER_DEALS",
items: [{
item_name: "Nike sports t-shirt",
item_id: "12345",
price: "17.95",
item_brand: "Nike",
item_category: "Sportswear",
item_variant: "Blue",
quantity: 1
}, {
item_name: "Nike socks",
item_id: "48572",
price: "5.18",
item_brand: "Nike",
item_category: "Socks",
item_variant: "White",
quantity: 1
}]
}
});
</script>In short, adding information to the Google Tag Manager data layer gives you much more flexibility when it comes to measuring what happens on a website, because you are no longer limited to the built-in variables provided by the tool.
Finally, remember that Google has a developer guide that offers a wealth of information to help developers implement a dataLayer on their website.
