One of the most important parts of the Tag Manager setup is that without the data layer, we won’t be able to track clicks, submissions, and other triggers
The data layer is always between the website and the tag manager which provides data from the website to the tag manager and the tag manager will send the data to the analytics tools. the data layer is a JavaScript object that enables GTM and gtag.js to pass information to tags. You can use the data layer to track events or variables, and set up triggers based on their values. In this article, we will explain what the data layer is, how it works, and how to use it effectively with GTM. You will learn how to create and configure data layer variables, how to add data layer code to your web page, and how to use the data layer to pass data between pages. By the end of this article, you will be able to use the data layer to enhance your GTM implementation and gain valuable insights into your website.
Please see the Google Analytics/Tag Manager support document for more information
Unless the developer has made a custom data layer in the website
To get the data, the data should appear in the data layer of the website
Adding the data layer
(Who can send the data)
1. Developers
2. Website plugins (such as google tag manager for WordPress)
3. Google tag manager listeners (such as link click triggers)
4. Custom JavaScript
Sometimes if you use the official Google Doc in your code then sometimes it will work because it has to be installed above the Google Tag Manager snippet but most of the time the developer forgets to put the code
Where to push the code?
If you want the data to show before the page has been loaded, then you need to push the code before the Google Tag Manager snippet
But
If you don’t care to show the data layer before or after the page is loaded then, you can push the data layer anywhere in the code before or after, the only thing important is to push when the data has been pushed or when the user click the button
To see the data layer you can go to;
1. Go to Preview Mode in the Tag manager
2. Click on any message on the left side is a data layer push
3. If you click on the message, you can see the data layer
4. Click on the message
5. Click on Data Layer which shows all the data contained on that page
If you want to check the individual page, then you need to;
1. Preview Page of GTM
2. Check the left side which shows the name of the page
3. Now you can see all the events that fired on the page and their data
When you reload the page, the data layer is also reset
you can check what data has been pushed in the preview mode in the GTM
So now, we need to send the data to Google Analytics
Creating Tags
To send the data to the analytics, we need to create a tag in GTM
To create a tag in Google Tag Manager, we need to;
1. Go to Tags
2. Click on NEW
3. In Tag Type, we need to choose Google Analytics: GA4 Event
4. And configuration tag, Choose the Base Code
5. We can put any name related to data you can track such as login
6. And in Event Parameters, we need to choose variables
But in GTM all the data are in the data layer, so we need to push the data from the data layer to the variables.
Creating Custom Variable
In order to create a custom variable we need to;
- Go to Variable in GTM
- Click on ‘+’ icon
- In variable configuration, we need to click on Data layer variable
- Now give the variable name from the data layer
- In our case the name of the data layer is loginMethod
- Name of the data layer are case sensitive and need to be exact
- Now click on Save
- Now in the Value section choose the variable that we made
The custom data layer variable is always donated by ‘{{ }}’
- Now make a Parameter Name which will send to Google analytics
CreatingTrigger
To create a trigger, we need to;
1. Go to Trigger in the GTM
2. Click on ‘+’ icon
3. Click on Trigger Configuration
4. Now we need to use the Custom Event because we don’t have any default trigger to track the user engagement such as login
Custom trigger is the trigger where you can give any event name to trigger on the left side of the preview mode
5. Save
So now every time the event name Login appears on the data layer, the trigger fires
Preview And Publish:
After configuring the GA4 tag, use the “Preview” mode in GTM to test its functionality.
- Browse your website and confirm that the GA4 tag is firing correctly in the GTM preview mode.
- Once satisfied with the test results, hit “Submit” in GTM to publish the container changes.
Mistakes in the data layer
Trying to push the data layer variable when the data has not been pushed yet
- Like when you want some user ID data, but you pushed the data layer before the User data has been loaded
- Having data layer= [] code is below the GTM container
It is better to use the data layer push method
- Case Sensitive
All the custom even names and variables need to be sensitive and need to be exact
Conclusion
The data layer is a JavaScript object that enables Google Tag Manager and gtag.js to pass information to tags. You can use the data layer to track events or variables, and set up triggers based on their values. The data layer also helps you organize and access your data consistently and predictably, rather than relying on scattered signals on your page. To use the data layer, you need to create and configure data layer variables and add data layer code to your web page. You can also use the data layer to pass data between pages if you need to persist the values through multiple page views. The data layer is a powerful and flexible tool that can help you measure and optimize your website’s performance, conversions, and user behaviour.
You can check the data in the debug view of Google Analytics 4 and it will take 24 to 48 hours to get processed in GA4
