Step 2 – Implement Google Tag Manager – DATA LAYER

In this post you will learn how to correctly place and implement Data Layer as part of Google Tag Manager set up on a website.

Data Layer is java script on a page that contains custom data (hits) that will be passed from the Website to GTM (which in turn will pass that data – or hits – to your GA account).

Data Layer is denoted under 1 (lines 3-7) and 4 (lines 20-21) – both the statements prior to the 2 GTM and after 3 GTM code are considered parts of “Data Layer”:

<!-- Google Tag Manager -->

<!-- 1 GTM - Data Layer -->
<script>
	dataLayer = [];
//Customized Data Layer statements go here; note below instructions
</script>

<!-- 2 GTM  - no javascript container -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- 3 GTM - yes javascript container -->
<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','dataLayer','GTM-XXXXX');</script>

<!-- 4 GTM – Event and Dynamic Data Layer Variables -->
// dataLayer.push goes here
<!-- End Google Tag Manager -->

Data Layer is the reason why GTM is … amazing! Two specific reasons:
a. You can place any hit – dimension or metric (pageview, event, ecommerce tracking, etc) into the data layer.
b. Once a hit is declared in the Data Layer, you can retrieve that hit from the Data Layer through either i) CUSTOM HTML tagging OR ii) JAVA SCRIPT variables set-ups in your GTM interface – without any modifications and changes to the code itself (we will talk about these advanced methods later on).

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>
<script>
  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 (notice there are no comments ie ‘, because 150 is a number; and an event called GAevent.

3. In case you push objects into the Data Layer after the GTM snippet has been declared when setting up a tag and a rule for the object to be passed to the GA add gtm.dom as additional rule to the tag. That’s how the rule should be set up in GTM:

The gtm.dom condition that’s added to the rule as above tells GTM to wait until 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 give it 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','NewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

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

<script>
  NewName = [{
	// ...
  }];
  NewName.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-variable: value});
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).

Posted under Google Tag Manager by Denis Zakharych on 9th February, 2014

3 Comments
Send to a friend

3 comments + Add a comment

Andrey Safonov
February 9, 2014 at 1:17 pm

Great post, Denis!

Andrey Safonov
February 9, 2014 at 1:18 pm

Denis, Great post!

Jennifer P
June 12, 2014 at 12:10 pm

This was very useful. Thank you so much for all the detail that went into this!

Have your say

Thanks for your contribution.

You can use Gravatar to upload an avatar that will appear next to your comment.

Please be polite and respectful to others.

<