Data Layer Setup
The Global Property tracking heavily relies on the use of dataLayer variables and events. This section will help you to understand what it is and how to set it up on Tag Manager.
Understand DataLayer
The dataLayer is an object that contains all of the information that you want to pass to Google Tag Manager, from events to specific variables (e.g. custom dimensions). Using the following dataLayer.push method, we can track any, and as many events on a single page as we like.
In a nutshell, Data layer is a global JavaScript variable. Its type is array. Every time some data is pushed to the Data Layer, Google Tag Manager updates its internal data model. Therefore, you can think of the Data Layer as a message bus from an application/web to Google Tag Manager. Data Layer is not a regular JavaScript array. It supports only the .push() method. If you try to interact with the Data Layer by using other array methods, (e.g. splice()), GTM will ignore that.
How can I send data to the dataLayer?
The dataLayer can be populated dynamically with the dataLayer.push() method. With help of dataLayer.push(), events and data points can be sent to the Data Layer. From there, Google Tag Manager can take that information and use it in tags, triggers, and variables.
Make sure to declare the dataLayer array, in <head> before the GTM container snippet. The array is used by Google Tag Manager to retrieve information
Whenever we are interacting with the dataLayer after this declaration in any of the following sections, make sure that we are always using the .push() method when passing information to the dataLayer – as opposed to declaring it.
If implemented incorrectly (eg. place below Google Tag Manager's container snippet), these codes will break the Data Layer and your event tracking will stop working. Any information already existing in the dataLayer might be overwritten and this will might cause you issues.
More? Read an in depth explanation by Simo Ahava here or download the Analytics Mania's DataLayer Cheat Sheet
dataLayer.push() callback
This only applies to events that should fire on interactions/links that take the user to a new page (or page refresh). Since link clicks normally take the user away from the page, the request to Google Analytics (from GTM) will not always have time to be sent.
A recommended solution is to pass a callback function to GTM in the same object, that fires when the request is done. The link functionality will have to be turned off, and the redirection is handled by the function passed. Like this (donations in this example, but could be anywhere):
Data Layer’s name is case-sensitive. This means that ONLY dataLayer.push() will work (with the uppercase L). DataLayer.push, datalayer.push and other variations are not supported.
In the above example, the eventCallback is a function that redirects to the donation page when the GA request is fully completed. When using this, also set a fallback redirect that fires if the above method would fail for any reason. This could fire after 500 ms, for example.
DataLayer Variables
At the base of all tracking that will be passed using Google Tag Manager, a set of information must be declared through the dataLayer our web pages. Some engagement systems, such as Planet 4 and Open Social already provide these dataLayer information by default, while in custom systems this must be manually added to the HTML of the page.
The dataLayer.push should occur before the Google Tag Manager container is loaded, so that the information is ready when the first page view tags are firing.
The table below reflects all dataLayer variables being used in the Global Property Tracking:
Google Tag Manager Setup
Creating variables
1) In your Google Tag Manager container, go to Variables > User-Defined Variables > New
2) Select the Data Layer Variable type
3) Input the Data Layer Variable Name. Make sure you are using the exact same variable name as it's used on the dataLayer script.
4) Add the "DLV" acronym to your GTM variable to help you identify the type. Check the preview below and repeat this process for all the Global Property's data layer variables listed above.
Creating triggers
1) In your Google Tag Manager container go to Triggers > New
2) Select the Custom Event trigger type
3) Input the dataLayer event name. Make sure you are using the exact same variable name as it's used on the dataLayer script.
4) Add the label "Event is" to your trigger to help you identify the type.
You can also define additional conditions to your trigger by setting on the option "This trigger fires on some custom events".
Check the preview below and repeat this process for all dataLayer events used in the Global Property tracking setup.
Verify DataLayer though the dev. Console
Should you need to develop new pushes beside the “out of the box” ones, we recommend that each dataLayer push is verified by the a developer. Verify the setup from the Console allows developers to check data is being pushed correctly and sorted properly, before sending the setup back to your digital department or partner agency.
To verify this, you need to use the Console in the Google Tag Manager Developer Tools. Here you type; “dataLayer”. This will provide a list of all the information currently stored in the dataLayer.
Here each event that was triggered can be found, with the relevant information as it has been presented in this guide. Please pay special attention to the events firing properly, as well whether they are sending the correct pieces of information.
The below example shows the console and the list of objects in the dataLayer. This is an example taken from another website.
By doing this check with each new implementation, we will limit the number of iterations and errors. GTM heavily relies on the data layer, normally named as “dataLayer”. The dataLayer is a global JavaScript variable, observed by GTM, that serves as a source of information. The dataLayer can be populated dynamically with the dataLayer.push() method. When data is pushed, GTM will react and may fire tags if certain conditions are met.
Last updated
