They say there are three key concepts to understanding Google Tag Manager (GTM):
- Tags,
- Triggers
- Variables.
However, advanced users will know this list is missing a fourth key concept essential for mastering Google Tag Manager: Data Layer Variables (DLV). The power of Data Layer Variables is easily the most overlooked feature in GTM. We use it daily on our client’s accounts. In this article, we’ll unpack the ‘Swiss Army Knife’ of GTM that only a few know about. Then we’ll show you how to set up Data Layer Variables so that you can take full advantage of Google Tag Manager and drastically improve your website tracking and analytics. It’s time to unleash the power of Google Tag Manager with Data Layer Variables.
Why are Data Layer Variables in Google Tag Manager so important?
Understanding the fundamental concept of Data Layer Variables in Google Tag Manager and how to use them is essential to a healthy and well-oiled GTM setup. Think of your data layer as the food that feeds GTM. Just like athletes need high-quality nutrition to perform at their best, GTM needs a well-designed data layer setup to create accurate and valuable metrics.
What is a ‘data layer’ in Google Tag Manager?
Technically, a data layer is a JavaScript array that stores information about a user’s interaction with a website. This array contains specific keys and values that track helpful information about how a website is interacted with. For example, the information stored in these keys and values could include user ID, the text of a clicked button, order totals, etc.
In plain English, please?
In layman’s terms, the best way to describe the data layer is like a bucket. As the user interacts with the website, they fill the bucket with specific information that helps explain that user and their behaviour on the site.
For example, you might have a data layer setup that buckets a user’s membership number and page location into the data layer when the page loads. You might also set it up so that when they add an item to their cart, you add the product category, product code, and updated order value into the bucket. And finally, you might set up a data layer variable that stores the button text of any link clicked into the data layer.
As you can see, the more the user interacts with the page, the more the bucket fills up and the more valuable data you can access. Then the bucket gets emptied once the page is reloaded, and the filling-up process starts again.
How can I access the information in the data layer?
We can use GTM to peer into the data layer at any point during a session and see what helpful information has been added to our bucket.
In the example above, a data layer setup adds a product code (SKU) into the bucket each time a user adds an item to their cart. To access this information, we would use a Data Layer Variable in GTM to look for the product SKU piece of information and send it to Google Analytics 4 (GA4) every time the add to cart button is clicked.
We could then segment that information in a GA4 report along the SKU DLV axis, showing which items are added to the cart the most. This adds a new layer of complexity to the data we can analyse in GA4 and drastically deepens the insights we can gather from user behaviour.
Now reports on simple behaviours like button click events are enriched with crucial second-tier information, like which product was selected. Data Layer Variables enable us to report on the meaning and intent behind user behaviour, not just the behaviour alone.
How NOT to set up your data layer: Declaration Method
You’ll likely need a developer to add code to your website. Code that pushes the information you want to record into the data layer ready for you to access. How they set this up will depend entirely on what kind of data you want to collect. Specifically, where you place the code that pushes the information into the data layer is important to note, as data layers are time-dependent.
If you position the code for a data layer at the top of your site above the GTM snippet, it will only add the data available when it is executed. This is called the Declaration method. The declaration could add information like session ID or page location into the data layer at this location.
However, because the declaration occurred on page load before the user could interact with the website, information like product category selected or product SKU code would return a value of ‘undefined’ if you went looking for it with GTM.
Unfortunately, the official Google documentation recommends this Declaration method. However, at Yoghurt Digital, we find it clunky and inflexible. Without getting into too much detail, the declaration method is easy to stuff up if it’s not placed in the right location and does not take full advantage of the rich data we can pull with DLVs. As a result, GTM will not be able to track the website interactions you are most probably looking for, like clicks, form submissions, and e-commerce data.
How to set up your data layer: Push Method (Yoghurt Recommended)
The best way to set up your data layer is to use the much more dynamic dataLayer.push method, which can be implemented after a specific user behaviour (like adding an item to cart) and capture the data once it is available.
Instead of capturing the data layer information on page load, your developer could set up a JavaScript listener that fires a data layer event once a user behaviour has occurred, such as clicking a button. This method is better because it allows for more accurate and timely data collection and does not affect other dataLayer.push events if set up incorrectly, leading to a much cleaner and safer setup.
The Anatomy of dataLayer.push
Suppose you have a lead-gen enquiry form that cannot be easily tracked with the default GTM form listener. You might ask your developer to capture the page location of the form, the new lead’s email address, and the event ‘new_lead‘ at the time of submission, pushing that information into the data layer for you to record and analyse. This is what the dataLayer.push code would look like this:
Here, your developer has set up the data layer push to bucket the location of the enquiry form, the lead’s email address, and the event name into the data layer for you to collect. You can see this information in green.
Understanding keys and values
You might have noticed in the example above – at the core of each data layer object is an array of keys and values. The keys ‘unlock’ the data that we are looking for. They show us what we are looking at, like a category filter. In this example, the keys are formLocation, email‘ and event‘
Next to them are the values that they are pointing to. These are landing_page, [email protected], and new_lead. Ultimately, values are the crucial information we seek, but we wouldn’t know what they mean without the keys to tell us.
- formLocation ➡️🔐 landing_page
- email ➡️🔐 [email protected]
- event ➡️🔐 new_lead
Setting GTM up to read the Data Layer
Keys and values are the languages of the data layer, and GTM needs to understand them to send the correct data to GA4 and other analytical services. This is where Data Layer Variables are so powerful.
Think of them as your translator between GTM’s language and the data layer’s language. A Data Layer Variable lets you pull a value from the data layer and turn it into a variable you can use in your tags, triggers, and other variables. All you need to do is give it the key.
In the example above, suppose you want to set the email address from the form submission as a variable in GTM. You would set up the Data Layer Variable something like this:
In GTM, the key is called ‘Data Layer Variable Name’.
Now, the variable ‘email‘ will appear in your Preview and Debug mode, and when a form submission occurs, the value will change from undefined to whatever the input email is. That’s it! You can now use this variable to cut your data via email input.
Key Takeaways
With the complexities of DLVs unravelled, let’s tie it all back together with a few key takeaways from one of GTM’s most overlooked features:
- DLVs can drastically improve your website’s tracking and analytics when implemented effectively.
- DLVs feed GTM with high-quality data, much like nutrition fuels an athlete. A well-designed data layer setup is essential to create accurate and valuable metrics.
- DLVs work like a “bucket”, storing specific user interaction information that helps you decipher user behaviour on your site.
- DLVs offer a complete view of the valuable information in your “bucket”.
- While Google documentation recommends the Declaration method, we advise using the more dynamic dataLayer.push method for more accurate and timely data collection.
- DLVs serve as translators between GTM and the data layer’s language, allowing you to pull valuable data for your tags, triggers, and variables.
Remember, mastering Data Layer Variables is a complex process that often requires specialist assistance. Don’t hesitate to reach out to us if you need any help.
Need Specialist Assistance with GTM Data Layers?
Setting up Data Layer Variables for our client’s GTM accounts is always easier with a specialist at the helm. This article was written to help give you a high-level understanding of the data layer and data layer variables.
In reality, the data layer is more complex than the examples outlined above, with nested values and often a lot more keys.
If you’re struggling with your own data layer setup and would like to talk to an expert or set up a training, reach out to us at [email protected], and our team of specialists will be happy to help.
Frequently Asked Questions
Q1: What types of data can I store in the data layer?
A: You can store a wide range of information about a user’s interaction with a website, including user ID, the text of a clicked button, order totals, and much more.
Q2: How does the dataLayer.push method work?
A: The dataLayer.push method can be implemented after a specific user behaviour (like adding an item to cart) and captures the data once it’s available. This leads to more accurate and precise data collection.
Q3: What are keys and values in a data layer?
A: Keys and values form the core of each data layer object. The keys ‘unlock’ the data we seek, while the values provide the crucial information we seek.
Q4: Why are Data Layer Variables important?
A: Data Layer Variables allow us to capture crucial second-tier data associated with website events. These extra pieces of information help us unlock the meaning and intent behind website interactions at a degree of accuracy far greater than conventional setups.
Q5: Can I set up my data layer without professional help?
A: While it’s possible to set up your data layer independently, it’s a complex process that requires a deep understanding of GTM, DLVs, and HTML code. We recommend seeking specialist assistance for an efficient and error-free setup.