Google Tag Manager dataLayer Explained

google-tag-manager-dataLayer-1To store, process and pass data between the digital context and the tag management solution, Google Tag Manager uses the dataLayer. When you implement a dataLayer with variables and associated values, they become available as soon as they need to fire tags — there is no need to wait for variables to load throughout the page. At the same time, you will still have access to values through the Variables feature, although the dataLayer is always necessary for events.

What Is the dataLayer?

The dataLayer is an object containing all the information you want to send Google Tag Manager, including events and variables. A JavaScript Array, it allows values of any JavaScript type. It holds data in key-value pairs, and the key variable is in String format.

As the dataLayer is generic and tool-agnostic, information is available to any application. Google Tag Manager uses an intermediate helper object to process data and stores information in an internal, abstract data model within the tool.

The helper object serves a few purposes. One function is to listen for pushes, evaluating variables when a push occurs. It also uses get and set methods to process and manipulate the dataLayer as a queue, ensuring that special values are possible to update and append correctly. Lastly, it is able to access commands and methods of objects stored in the dataLayer. This means it can run custom functions in the context of the data model.

Building the dataLayer

Building a comprehensive dataLayer prevents the need to ask for code changes whenever you want to measure something new. One method is to set up JavaScript objects on each page where you want to send data and trigger the dataLayer on important actions. However, this is time consuming and problematic, as there is always the risk you will forget to track an action.

A better solution is to add JavaScript/jQuery listeners for different actions within the Google Tag Manager web interface. This involves creating a custom HTML tag and adding JS script by using the rule:

event equals gtm.dom

This means the tag will be loaded once dom is ready. The jQuery listener will be set on the action you define and will be triggered when the action takes place.

Next, you need to build a chain where the first level tag pushes key values to the dataLayer. You also want the next level of tags to be triggered due to the push, delivering data. For this, you need to update your tag to:

jQuery('#button').click(function(){ 'dataLayer.push({ 'category':'homepage', // or use a macro to get url 'action':'click', 'label':'button', 'event':'click-event'}); });

You need to accompany this with a tag fired on the rule:

event equals click-event

Pushing Multiple Variables

You have the option to use dataLayer.push() for individual variables and events. However, it is also possible to push multiple variables and events at the same time. An example of this would be:

dataLayer.push({
'color': 'blue',
'conversionValue': 73,
'event': 'customizeCar'
});

Bear in mind, when you push a variable with the same name as an existing variable, the new value will overwrite the original.

Frequent Mistakes

Users of Google Tag Manager tend to make many of the same mistakes when implementing the dataLayer. Keep the following in mind during setup.

Case sensitivity

You will be unable to push the variable or event if you use incorrect casing. For instance “datalayer.push” will fail, whereas “dataLayer.push” will work.

Quotation marks

If the variable name consists of only letters, numbers, and underscores, there is no need for quotes. In other cases, quotes are always necessary. For example, “dataLayer.push({new-variable: ‘value’}); would fail, whereas “dataLayer.push({‘new-variable’: ‘value’}) would work. It is good practice to use quotes with all your variable names to eliminate problems.

Consistency

It is essential to use the same variable names across all pages to ensure Google Tag Manager fires tags in all locations.

Declare all information

You must include all the information necessary to fire tags on a page load above the container snippet in the dataLayer. For instance, for Google Tag Manager to be able to fire tags on a page load matching a condition, you need to define pageCategory above the container snippet in the dataLayer. If variables are pushed to the dataLayer after the container snippet, they will be unable to fire tags on page loads with the matching condition.

If you like my articles,