Implement Google Tag Manager: Data Layer
DELVE  /  
October 20, 2015

The Data Layer in Google Tag Manager is an invaluable tool for a marketing and analytics team. Data Layer is Javascript on a page containing custom data (“hits”) that will be passed from the Website to GTM (which in turn will pass that data, or hits, to your Google Analytics account). It’s great for code that you need to repeat on every page. (For quick fixes that only need to affect a single page, use the UI instead.)

Data Layer is the reason why GTM is … amazing! With Data Layer, your Analytics team has two powerful advantages:

a. You can track any object – dimension or metric (including variables, transaction information, page categories, e-commerce tracking, and other important signals) with the data layer.
b. Once this object tracking is configured, you can retrieve information from the data layer through either custom HTML tagging or JS variables setup in GTM interface – without any modifications and changes to the code itself (we will talk about these advanced methods later on).

Using the data layer consolidates information that would otherwise be scattered throughout the page. Consolidating data collection substantially decreases the potential for errors, mistakes or omissions. First, you’ll need to set up the Data Layer. It’s important to get this right as it will be touching multiple parts of your site.

In the rest of this post we’ll be diving into the technical aspects of how to correctly place and implement Data Layer as part of Google Tag Manager setup on a website.

Data Layer is denoted under “GTM – Data Layer” (lines 3-10) – both the statements are considered parts of “Data Layer”:

<head>

<!-- GTM - Data Layer -->

<script>
    dataLayer = []; // declaration of the dataLayer
</script>

<script>
    dataLayer.push(); // events and dynamic variables
</script>

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>


-->

There are a number of rules that should be followed when defining hits in the Data Layer:

1. The Data Layer code should be placed i) in the HEAD of a page AND ii) BEFORE the GTM container snippet:

<head>
<!-- GTM - Data Layer -->
<script>
dataLayer = []; // declaration of the dataLayer
</script>
<!-- Google Tag Manager -->

Why? Google Tag Manager is asynchronous – when it executes, it does not block other elements from rendering on the page. Other tags that are deployed via Google Tag Manager to be deployed asynchronously, meaning that a slow loading tag won’t block other tracking tags and the page from being loaded.

2. You can push multiple variables in one dataLayer.push() statement. Instead of using separate dataLayer.push() for each variable, event, etc. you can push them all at once.
Here is an example:

dataLayer.push({
'pageview': '/',
'goalValue': 150,
'event': 'GAevent'
});

In the above example, we defined a ‘pageview’ as / or home, a goalValue as 150 (note there are no apostrophes like ‘, because 150 is a number), and, an event called GAevent.

3. In case you want to push objects into the Data Layer after the GTM snippet has been declared setup the tag to fire on the DOM Ready event. That’s how the rule should be set up in GTM: 

The DOM Ready condition that’s added to the trigger as above tells GTM to wait until the structure of the page is fully loaded – and only then to parse the data to the GTM snippet.

4. The Data Layer can be named any way you want. By default GTM calls it dataLayer but you can choose any name that you like and declare it in GTM snippet code (highlighted with red in the example below):

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','NewDataLayerName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Consequently, all the references to your ‘NewDataLayerName’ data layer should correspond as in the example below:

<script>
NewDataLayerName = [{
// ...
}];
NewDataLayerName.push({'variable_name': 'variable_value'});
</script>

NOTE: We suggest that you leave the default name of dataLayer to avoid any confusions and problems when setting up the tags, rules, and macros in GTM.

Here are several other tips and common pitfalls that will make your experience of working with the Data Layer less time consuming:

a) The dataLayer object name is case-sensitive. If you declare dataLayer = [] you have to push it as dataLayer.push (not as Datalayer or datalayer – unless you introduced them as new names attributed to data layer in the GTM snippet as it is mentioned in rule 4).

b) Variable names should be quoted. Example:
dataLayer.push({my-variablevalue});
Not: dataLayer.push({my-variable: ‘value’}).

c) Variable names should be consistent on all the pages the data layer is applied to. Example:
dataLayer.push({‘pageview’: ‘/’});
On all other pages it should be the same:
dataLayer.push({‘pageview’: ‘thank-you’});
Not: dataLayer.push({‘Pageview’: ‘ thank-you’}) or dataLayer.push({‘page view’:’thank-you’}) – it will not work

d) Make sure that the tags that are used by GTM are not deployed by another tool as well (and/or are hardcoded in the web site java script). This duplication of tags will either lead to inconsistent data collection or will inflate the data that is passed to GA. There is a common pitfall when you have e.g., asynchronous Universal Analytics code implemented on the site and then you add the GTM code without removing the Asynch UA- code. This setup inflates the data in GA as every hit and event on the site will being tracked twice. Make sure that you remove any other Google Analytics Tracking Codes before publishing GTM tags (unless you parse data to different GA properties.)

 

_

Ready to learn how DELVE can maximize ROAS for your business?
Delve is a top-rated Google Analytics Certified Partner with experience managing hundreds of web analytics implementations world wide. SEE EXAMPLES of our experience and reviews from our clients .
Shoot us an email or give us a call. We’d love to discuss how Delve can help your business win smarter.