Index

#1 What is a dataLayer?	#13 What are dynamic data layer variables?
#2 Understanding JavaScript Arrays to create data layers	#14 How you can rename a data layer (or data layer object)?
#3 Understanding Javascript objects to create data layers	#15 When you need to rename your data layer?
#4 Why do you need a data layer?	#16 What is data layer snippet?
#5 Data Layer vs DOM Scraping	#17 What is container tag snippet?
#6 What are data layer variables?	#18 Where the data layer snippet should be placed?
#7 How you can initialize a data layer?	#19 Why the data layer snippet must be placed above the container snippet?
#8 How information is pushed into a data layer?	#20 Do you need a container tag to implement a data layer?
#9  What should be the format of the information you push into a data layer?	#21 How you can implement data layer on a web page?
#10 How you can overwrite the value of existing data layer variable?	#22  What information you should store in a data layer?
#11  Naming convention for data layer variables	#23  How to see and interpret the data layer on a web page?
#12  What is ‘event’ data layer variable?

 

If you have used Google Tag Manager (GTM) any longer than few days, you know that GTM does require good knowledge of HTML, DOM and JavaScript as prerequisite.

If you have implemented Ecommerce Tracking via GTM or enhanced ecommerce tracking via GTM, you know that you need the help of a web developer to create data layer for you.

If you have used GTM long enough, you know that the real power of GTM lies in the usage of variables esp. custom variables which require coding knowledge.

GTM is a really powerful tool and understanding the data layer is the key to getting the most out of Google Tag Manager.

Note: If you are brand new to GTM, then read this article first: Beginners guide to Google Tag Manager

 

What is a dataLayer?

Data layer is simply a JavaScript array which is used to store information and send information to Google Tag Manager container.

Example of empty dataLayer:

<script>

dataLayer = [];

</script>

Example of dataLayer which contain variables:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’

}];

</script>

In order to understand the concept of data layer, you first need to understand JavaScript arrays and objects.

Note: Data layer is also known as dataLayer queue, dataLayer object and data collection layer.

 

Understanding JavaScript Arrays to create data layers

An array is a special variable which can store multiple elements of same or different data types at a time.

Variable is a container which is used for storing data.  A variable can store different data at different times.

For example if ‘a’ is the name of a variable, then ‘a’ can store a value like 10 and then another value like 20 at a different time:

a = 10

a =20

However a variable can store only one value at a time. If you want a variable to store more than one value at a time, then you need to use a special variable called ‘array’.

An ‘array’ is made up of one or more elements.

These elements can be strings (like ‘hello’), numeric values (like 10), undefined values, boolean values (like true, false), other arrays or objects.

An array can be created, by either using the array function or array literal notation []. The array literal notation is proffered, for creating arrays.

For example, here is how the empty array created through array function will look like:

var a=new Array();

Here ‘a’ is the name of the array and ‘var’ is a command which is used to create an array in JavaScript.

You can give any name to your array. For example:

var myArray = new Array();

You can also create new array variable through array literal notation [] like this:

var a= [];

Or

a= [];

Google tag manager uses the array variable name called ‘dataLayer’.

So if you want to create an empty data layer array, it would be like this:

dataLayer=[];

Since this line of code is a JavaScript statement, you need to enclose it within the <script> and </script> tags, so that you can embed the code into your HTML document.

So the final setup will look like the one below:

<script>

dataLayer=[];

</script>

Congratulations, you just created your first data layer.

 

Now, let us create a new array variable called ‘a’, which has got three elements;

a=[“hi”,”bye”,”good bye”];

Here the array variable named ‘a’ has got three elements named: ‘hi’,’bye’ and ‘good bye’.

All of these three elements are of type ‘string’ as they are string values. We call such array as array of strings.

So you just created your first array of strings.

Similarly, we can create a new array variable, which has got three numeric values;

a=[10,24,56];

Here, all of these three elements have got numeric values. We call such array as array of numbers.

So you just created your first array of numbers.

You can also create an array variable which contains elements of different data types. For example, you can create an array which contains both string and number values:

a1=[“hi”,”bye”,”good bye”, 10, 20, 56];

Here, the array variable named ‘a1’ is made up of 6 elements. Out of these 6 elements, the first 3 elements are of type string and the last 3 elements are of type ‘number’.

You can also create an array, like the one below:

a2=[“hi”,10,”bye”,20, 56,”good bye”];

Here, the array variable named ‘a2’ is made up of 6 elements. Out of these 6 elements, 3 elements are of type string and the remaining 3 elements are of type ‘number’.

Note: Even when both a1 and a2 contain same elements, they are still different array variables, because the order of the elements is different.

 

Other array examples:

a=[,,,] // array of undefined values. Use comma in place of value to create an undefined value.

a=[true,false]; // array of boolean values

a=[[“Clasicos”,57],[“Zapatos”,456]]; // array of arrays. Also known as multi dimensional arrays. It is an array which contains one or more arrays.

Following is an example of an array variable which contains only one object:

a=[{“id”:”20″,”name”:”Zapatos”}];

Following is an example of an array variable which contains two objects:

a=[{“id”:”20″,”name”:”Zapatos”},{“id”:”53″,”name”:”Masculino”}];

White spaces and line breaks are not important. So to improve readability you can write the same ‘a’ array as:

a=[

{“id”:”20″,”name”:”Zapatos”},

{“id”:”53″,”name”:”Masculino”},

];

Following is an example of an array variable which contains multiple objects:

a=[

{“id”:”20″,”name”:”Zapatos”},

{“id”:”53″,”name”:”Masculino”},

{“id”:”57″,”name”:”Clasicos”},

{“id”:”138″,”name”:”Deportes”},

{“id”:”139″,”name”:”Masculino”}

{“id”:”201″,”name”:”Zapatos”},

{“id”:”1244″,”name”:”Mocasines”},

{“id”:”1340″,”name”:”Apaches”}

];

You can also create array which contains elements of all available data types:

a=[“size”, 10, true,,[“Clasicos”,57],{“id”:”20″,”name”:”Zapatos”}];

Here,

“size” is an array element of type string.

10 is an array element of type number.

true is an array element of type boolean.

,, (empty value) is an array element of type undefined.

[“Clasicos”,57] is an array element of type array.

{“id”:”20″,”name”:”Zapatos”} is an array element of type object.

White spaces and line breaks are not important. So to improve readability you can write the same ‘a’ array as:

a=[

“size”,

10,

true,

[“Clasicos”,57],

{“id”:”20″,”name”:”Zapatos”}

];

Since dataLayer is javascript array, you can create a data layer like the one below:

dataLayer=[

“size”,

10,

true,

[“Clasicos”,57],

{“id”:”20″,”name”:”Zapatos”}

];

Congratulations, you just created your second data layer which is made up of 5 elements.

Note: The data layer used for GTM is usually an array of a single object: dataLayer = [{……}];

 

Understanding Javascript objects to create data layers

Javascript object is a variable which has got properties and methods.

Following is the syntax to create a javascript object:

 <object-name>={“property1”:value1, “property2″:value2, …..”propertyN”:valueN};

Here property can be any string or identifier.

An identifier is a reserved word, which carry special meaning and can not be used as a variable name.

For example ‘event’ is an identifier.

Property’s value can be:

1. string
2. numeric value
3. undefined value
4. boolean value
5. array
6. multi dimensional array
7. object
8. array of objects.

The following example creates an empty object with no properties.

a = {}; 

Here name of the JavaScript object is ‘a’. You can give any name to the JavaScript object.

The following example creates an object called “user” and adds 4 properties to it:

user={“firstName”:”John”, “lastName”:”Marshall”, “age”:85, “eyeColor”:”blue”};

Since white spaces and line breaks are not important in JavaScript. So to improve readability you can write the same ‘user’ object as:

 user={

“firstName”:”John”,

“lastName”:”Marshall”,

“age”:45,

“eyeColor”:”blue”

};

 

Other examples of javascript objects:

a = {“color”:”Caf\u00e9″};

Here ‘color’ is the property of the object ‘a’ and ‘Caf\u00e9’ is the value of the ‘color’ property which is a string.

a = {“price”:164900.00};

Here ‘price’ is the property of the object ‘a’ and ‘164900.00’ is the value of the ‘price’ property which is a numerical value.

a = {“color”:”Caf\u00e9″, “price”:164900.00};

Here the object ‘a’ has got two properties ‘color’ and ‘price’.

 

Similarly we can define an object with multiple properties:

a = {

“color”:”Caf\u00e9″, // the value is of type ‘string’

“price”:164900.00, // the value is of type ‘numeric’

“sizeList”:””, // the value is of type ‘undefined’

“visitorsHasOrders”:true, // the value is of type ‘boolean’

“data”:[45,67,89,20], // the value is of type ‘array’

“shoppingCart”:[[“Clasicos”,57],[“Zapatos”,456]], // the value is of type ‘multi dimensional array’

“pageAttributes”:{“page”:”product”}, // the value is of type ‘object’

“pageCategory”:[   // the value is of type ‘array of objects’

{“id”:”20″,”name”:”Zapatos”},

{“id”:”53″,”name”:”Masculino”},

{“id”:”57″,”name”:”Clasicos”},

{“id”:”138″,”name”:”Deportes”},

{“id”:”139″,”name”:”Masculino”}

{“id”:”201″,”name”:”Zapatos”},

{“id”:”1244″,”name”:”Mocasines”},

{“id”:”1340″,”name”:”Apaches”}

]

};

Since data layer is a JavaScript array and an array can contain one or more objects, we can have a data layer like the one below:

 dataLayer=[ {

“color”:”Caf\u00e9″,

“price”:164900.00,

“sizeList”:””,

“visitorsHasOrders”:true,

“data”:[45,67,89,20],

“shoppingCart”:[[“Clasicos”,57],[“Zapatos”,456]],

“pageAttributes”:{“page”:”product”},

“pageCategory”:[

{“id”:”20″,”name”:”Zapatos”},

{“id”:”53″,”name”:”Masculino”},

{“id”:”57″,”name”:”Clasicos”},

{“id”:”138″,”name”:”Deportes”},

{“id”:”139″,”name”:”Masculino”}

{“id”:”201″,”name”:”Zapatos”},

{“id”:”1244″,”name”:”Mocasines”},

{“id”:”1340″,”name”:”Apaches”}

]

}];

Congratulations, you have just created your first complex data layer. 

 

The data layer can become even more complicated when it contains server side script.

For example, here is how a data layer, with server side script may look like:

 

Quick announcement about my new book:

Read first few chapters of this book for free here.

Remember:

a=[]; // creates an array

a={}; // creates an object

a=[{}]; // creates an array of a single object

dataLayer in GTM is an array of a single object. So,

dataLayer = [{}];

 

 

Why do you need a data layer?

In the context of Google Tag Manager, data layers are used to collect data from a website.

GTM (aka container tag) can also directly pull data from the HTML of a web page by traversing the HTML DOM (structure of HTML) using JavaScript:

By default a container tag pulls data from the HTML of a web page and push it into your analytics and marketing tags.

Now the problem with this approach is that, the structure of HTML (HTML DOM) can change any time without your knowledge, as commercial websites update all the time and as a result, any tag can stop working any day, any time without any prior notice.

To fix the problem, we create and use data layers, which stores all the information we want to collect about a web page. Once you set up a data layer, the container tag pulls data from the data layer of the page instead of its HTML

So no matter what happens to HTML DOM, the data layer will remain the same and your tags will continue to work (unless of course, someone/ something breaks the data layer itself).

 

Data Layer vs DOM Scraping

Each tag management solution (TMS) provider implement data layer in a slightly different way. So most likely, you won’t be able to use the same data layer with every (TMS) (if you use more than one TMS).

Data layers need to be hard coded on a website by your developer or IT team. So as long as you are using data layers, you need to depend upon IT for its updates and maintenance.

DOM scraping is a technique used to pull data directly from the HTML elements (buttons, links, forms etc) of a web page by using JavaScript and the knowledge of HTML DOM.

Almost all TMS vendors provide the functionality of scraping the HTML DOM.

DOM scraping comes handy when it is not possible to implement the required data layers in a reasonable amount of time, in order to set up certain tracking. Through DOM scraping you can implement TMS solutions faster, as there is little to no dependence on IT and you have more control over the implementation.

However TMS solution implemented through DOM scraping is not a stable solution, as changes in the HTML DOM (like change in the ID of a HTML element) can quickly break the TMS solution.

So TMS solution deployment through DOM scraping is more of a quick fix when you lack development resources or time. It is not something, you can/should rely upon for a long period of time and/or where lot of money is at stake (like airline websites).

 

What are data layer variables?

These are the variables used in data layer. It is in the format: ‘key:value’.

Following is an example of data layer which contains no variable:

<script>

dataLayer = [{}];

</script>

Following is an example of data layer which contains one variable:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’}];

</script>

Following is an example of data layer which contains two variables:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’, ‘visitorType’: ‘high-value’}];

</script>

Same data layer can be re-written as:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’

}];

</script>

Following is an example of data layer which contains three variables:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’,

’event’:’customizeCart’

}];

</script>

Here, PageCategory, visitorType and event are data layer variables.

As you can see they are basically properties of an object.

‘Statisitcs’, ‘High Value’ and ‘customizeCart’ are the values of PageCategory, visitorType and event data layer variables.

Note: Data layer variables are also known as data layer messages.

 

How you can initialise a data layer?

By setting up variables in your data layer.

Initialise a data layer with one variable:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’}];

</script>

Initialise a data layer with two variables:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’

}];

</script>

Initialise a data layer with three variables:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’,

’event’:’customizeCart’

}];

</script>

Appending/passing messages onto the data layer queue => Adding data layer variables to the data layer.

Updating data layer => adding/updating/removing data layer variables.

Pushing information into the data layer => adding data layer variables to the data layer.

 

How information is pushed into a data layer?

If the data layer has been hard coded on a web page, then certain piece of information is already available in the data layer.

The other information can be pushed dynamically (during run time) through the ‘push’ method of dataLayer object.

Through the ‘push’ method of dataLayer object, you can dynamically add object(s) to your data layer.

The pushed object can contain one or more data layer variables.

Following is the syntax of the ‘push’ method:

dataLayer.push({‘variable_name’: ‘variable_value’});

For example, let us suppose following data layer is hard coded on a web page:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’}];

</script>

Now this data layer already contain one variable.

If you used the following push method:

<script>

dataLayer.push({‘visitorType’: ‘high-value’});

</script>

The hard coded data layer will now look like this:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

You can also push/add multiple variables at once, into the data layer.

For example:

<script>

dataLayer.push({‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’});

</script>

 

What should be the format of the information you push into a data layer?

The information that you push into a data layer, from either front-end or back-end must be in the format, GTM can understand.

For example,if you try to push ecommerce data layer variables into a data layer which are not recognised/recommended by GTM, then your ecommerce tracking won’t work.

<script>

dataLayer = [{

‘Transaction Id‘: ‘1234’,

.

.

.

}]

}];

</script>

Here GTM won’t recognize ‘Transaction Id’ as ecommerce data layer variable.

The correct data layer snippet would be:

<script>

dataLayer = [{

‘transactionId’: ‘1234’,

.

.

.

}]

}];

</script>

Note: ‘transactionId’ is an example of an identifier (reserved word). So it carries a special meaning and it can not be used as a regular variable name, while using GTM.

 

How you can overwrite the value of existing data layer variable?

By pushing a variable of the same name as an existing variable, but with a new value to the data layer.

Let us suppose this is your existing data layer:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

Now if you used the push method, like the one below:

<script>

dataLayer.push({‘pageCategory’: ‘Maths’});

</script>

The value of pageCategory data layer variable would be overwritten and now your data layer, would like the one below:

<script>

dataLayer = [{‘pageCategory’: ‘Maths’,’visitorType’: ‘high-value’}];

</script>

 

Naming convention for data layer variables

You should use a consistent naming convention for data layer variables.

If you use different variable names for the same variable on different pages, GTM may not be able to fire tags in all the desired locations.

For example,

If you set up the page category on the signup page by using the ‘pageCategory’ data layer variable, then page category on the product purchase page should also be setup by using the ‘pageCategory’ data layer variable and not by using data layer variable like: Pagecategory or PageCategory.

This is because data layer variable names are case sensitive.

So following set up won’t work the way you think, it should:

// signup page:

dataLayer.push({‘pageCategory’: ‘members-signup’});

// Product purchase Page:

dataLayer.push({‘PageCategory‘: ‘product-purchase’});

But following set up will work the way it should:

// signup page:

dataLayer.push({‘pageCategory’: ‘members-signup’});

// Product purchase Page:

dataLayer.push({‘pageCategory’: ‘product-purchase’});

Data layer Variable names should be enclosed in quotes

dataLayer.push({pageCategory: ‘members-signup’});    // Won’t work

dataLayer.push({‘pageCategory‘: ‘members-signup’});    // works

The Data Layer javascript array itself is case-sensitive

so dataLayer is different from datalayer, and the use of latter won’t work.

For example:

datalayer.push({‘pagecategory’: ‘members-signup’});    // Won’t work

dataLayer.push({‘pageCategory’: ‘members-signup’});    // works

 

What is ‘event’ data layer variable?

It is a special data layer variable that is used with JavaScript event listeners.

It is used to fire a tag, when a user interacts with webpage elements such as: form, button, links etc.

Syntax for setting up an event:

dataLayer.push({‘event’: ‘event_name’});

Here ‘event’ and ‘event name’ are strings.

For example, following code update the data layer’s ‘event’ variable when a user clicks on the button:

<a href=”https://www.optimizesmart.com/download” name=”pdfDownload” onclick=”dataLayer.push({‘event’: ‘pdf-download’});” >PDF download</a>

 

Other examples of special data layer variables

• hitType
• nonInteraction
• ecommerce etc

 

Can each web page has its own unique data layer?

yes and it should.

Do you need to put the same set of variables in the data layer on every page?

No.

When a data layer is updated in case of a tracked event?

When the tracked event occurs like: mouse click, form submission, page load etc.

 

What are dynamic data layer variables?

Data layer variables which are pushed dynamically (during run time) to the data layer.

Syntax for setting up dynamic data layer variables

dataLayer.push({‘variable_name’: ‘variable_value’});

For example let us suppose following data layer is hard coded on a web page:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’}];

</script>

If you used the following push method:

<script>

dataLayer.push({‘visitorType’: ‘high-value’});

</script>

The hard coded data layer will now look like the one below:

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

Here ‘pageCategory’ is a data layer variable.

Whereas ‘visitorType’ is a dynamic data layer variable, as it has been pushed dynamically into the data layer.

Note: Dynamic data layer variables are not hard coded on a web page.

 

How you can rename a data layer (or data layer object)?

The default name of data layer (or data layer object) is ‘dataLayer’.

By making a small change in your container code snippet you can rename your data layer:

<!– 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’,’addYourNewDataLayerNameHere‘,’GTM-XXXX’);</script>

<!– End Google Tag Manager –>

For example:

<body>

<script>

 SmartDataLayer= [{

‘pageCategory’: ‘signup’,

‘visitorType’: ‘high-value’

}];

</script>

<!– 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’,’SmartDataLayer‘,’GTM-XXXX’);</script>

<!– End Google Tag Manager –>

<a href=”https://www.optimizesmart.com/download” name=”pdfDownload” onclick=”SmartDataLayer.push({‘event’: ‘pdf-download’});” >PDF download</a>

 

When you need to rename your data layer?

When you are using multiple container codes on a same web page and you don’t want each container to use same data layer.

For example:

<body>

<script>

dataLayer1 = [{

‘pageCategory1’: ‘signup’,

‘visitorType1’: ‘high-value’

}];

</script>

<!– Google Tag Manager  Container-1–>

<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’,’dataLayer1‘,’GTM-XXXX’);</script>

<!– End Google Tag Manager Container-2 –>

===================================================================

<script>

dataLayer2 = [{

‘pageCategory2’: ‘signup’,

‘visitorType2’: ‘high-value’

}];

</script>

<!– Google Tag Manager Container -2 –>

<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’,’dataLayer2‘,’GTM-XXXX’);</script>

<!– End Google Tag Manager Container-2 –>

=====================================================================

<script>

dataLayer3 = [{

‘pageCategory3’: ‘signup’,

‘visitorType3’: ‘high-value’

}];

</script>

<!– Google Tag Manager  Container-3 –>

<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’,’dataLayer3‘,’GTM-XXXX’);</script>

<!– End Google Tag Manager Container-3 –>

===================================================================

<a href=”https://www.optimizesmart.com/download1″ name=”pdfDownload1″ onclick=”dataLayer1.push({‘event’: ‘pdf-download1’});” >PDF download 1</a>

<a href=”https://www.optimizesmart.com/download2″ name=”pdfDownload2″ onclick=”dataLayer2.push({‘event’: ‘pdf-download2’});” >PDF download 2</a>

<a href=”https://www.optimizesmart.com/download3″ name=”pdfDownload3″ onclick=”dataLayer3.push({‘event’: ‘pdf-download3’});” >PDF download 3</a>

Note: By default, each container will use a common data layer.

 

Do you need to be a web developer in order to use data layer?

I am often asked this question. The answer is “No”, not for the very basic data layers. But you still need a basic knowledge of HTML, DOM and JavaScript.

When do you really need a web developer to write data layers for you?

When you have to create complex data layers, like the one which pull ecommerce data from the back-end (server side) and convert that data into a format, which GTM can understand.

 

What is data layer snippet?

It is the data layer enclosed within <script> ….</script> tag.

Following is an example of data layer snippet

<script>

dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

 

What is container tag snippet?

It is the code which is used to create a new container tag. A container tag holds all the marketing/analytics tags, triggers and variables for your website.

When you are installing Google Tag Manager on your website, you are basically installing a container tag. 

Following is an example of container tag snippet:

<!– 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’,’dataLayer’,’GTM-XXXX’);</script>

<!– End Google Tag Manager –>

Note: The container tag snippet should be placed on each and every web page of your website.

 

Where the data layer snippet should be placed?

It should always be placed above your container tag snippet.

For example:

<script>

  dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

<!– 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’,’dataLayer’,’GTM-XXXX’);</script>

<!– End Google Tag Manager –>

 

Why the data layer snippet should be placed above the container snippet?

So that data layer variables are available to the container tag.

If you place the data layer snippet below the container snippet then the data layer variables may not be available to the container. In other words, the container tag may not be able to pull data from the data layer.

For example following set up may not work:

 <!– Google Tag Manager –>

…

<!– End Google Tag Manager –>

<script>

  dataLayer = [{‘pageCategory’: ‘Statistics’,’visitorType’: ‘high-value’}];

</script>

Here the data layer variables ‘pageCategory’ and ‘visitorType’ may not be available to the container as the data layer code has been placed after the container snippet.

 

When Google Tag Manager functions best?

when used alongside a data layer. You must have know it, by now.

Is it mandatory to declare data layer?

No. Explicitly declaring a data layer is optional.

Can you use GTM without explicitly implementing data layer?

Yes. In that case GTM container code will automatically create its own empty data layer object for you.

 

Do you need a container tag to implement a data layer?

As long as you are using Google Tag Manager, you need a container tag to implement data layer, otherwise not.

You can create a javascript array which store all the information you want to collect about a page and use it as a data layer.

For example:

<script>

mydataLayer = [{

“pageCategory”: “Statistics”,

“visitorType”: “high-value”

}];

</script>

How you can selectively fire tags on page load?

through GTM triggers.

What is the downside of not using data layer?

you cannot use events without data layer and above all your whole GTM implementation will be pretty shaky.

How you can access values from a page without implementing data layer?

By using GTM custom variables.

 

How you can implement data layer on a web page?

by adding following snippet of code above the container tag snippet:

<script>

dataLayer = [];

</script>

For example, you might want to set data layer variables to indicate that the page is a ‘Maths’ page and that the visitor is a ‘high-value’ visitor.

To do this, you initialise the data layer as follows:

<script>

dataLayer = [{‘pageCategory’: ‘Maths’,’visitorType’: ‘high-value’}];

</script>

 

What is the scope of data layer variables?

Data layer variables are page specific. That means they exist, as long as a user remains on the same page.

How you can declare data layer variables that are relevant across pages?

By using the same data layer variable name on multiple pages of your website.

 

What information you should store in a data layer?

This is the most important question of all.

If you want to avoid the hassle of modifying data layers every time you deploy a new TMS solution then you should aim to hard-code one universal data layer on each web page of your website.

Each universal data layer should include all the key attributes of the web page, on which it is embedded. 

Your data layer should include all the key information your marketing and analytics tags currently need. It should also include all the key information you may need in the near future, for additional tracking.

This information could be:

#1 Page attributes

• page title
• page URL
• page category etc

#2 Product(s)’ attributes – attributes of a product(s) listed on a web page like:

• product name
• product id
• product price
• product category
• product image URL
• product variant (color, size, dimension) selected
• product quantity selected
• product views
• product clicks (clicks on a product listing on a category page)
• product availability (available, out of stock)
• product coupon
• product coupon used

#3 Users’ attributes

• User ID (log in ID)
• Client ID
• User type (logged-in user, logged-out user, member, non-member, customer, non-customer, repeat customer, high value repeat customer etc)
• User’s browsing behaviour
• User’s prefences
• User’s purchase history
• Users’ interactions (clicking a button, submitting forms, signups, purchase, watching videos etc.)
• Users’ web browser
• Users’ operating system
• Users’ device (mobile, desktop, tablet)

 

Any information that might be useful either today or in the near future for additional tracking, should be included in the universal data layer.

Following is a real life example of a data layer being used on a website:

<script type=”text/javascript”>

var dataLayer = [{

“color”:”Caf\u00e9″,

“deviceAgent”:”Mozilla\/5.0 (Windows NT 6.3; WOW64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/35.0.1916.153 Safari\/537.36″

“deviceOs”:”non-mobile”,

“deviceTheme”:”desktop”,

“deviceType”:”desktop”,

“gender”:”Masculino”,

“googleRemarketingLabel”:””,

“image”:”http:\/\/static.dafyty.com.co\/p\/brahma-6338-0822-1-product.jpg”,

“pageAttributes”:{“page”:”product”},

“pageBrand”:[{“id”:”2″,”name”:”Brahma”}],

“pageCategory”:[

{“id”:”20″,”name”:”Zapatos”},

{“id”:”53″,”name”:”Masculino”},

{“id”:”57″,”name”:”Clasicos”},

{“id”:”138″,”name”:”Deportes”},

{“id”:”139″,”name”:”Masculino”},

{“id”:”201″,”name”:”Zapatos”},

{“id”:”1244″,”name”:”Mocasines”},

{“id”:”1340″,”name”:”Apaches”}

],

“pageMainCategory”:”id”:”1340″,”name”:”Apaches”},

“pageName”:”product”,

“pageProductDescription”:”<i>Zapatos<\/i> <b>Brahma<\/b> cafe, elaborados en cuero con costuras visibles en la zona delantera la cual es redonda. Forro en cuero y suela en goma. Un calzado muy comodo que puedes combinar tanto con tus atuendos formales como informales.”,

“pageProductName”:”Zapatos Brahma Cafe”,

“pageTitle”:null,

“price”:”164900.00″,

“priceDiscount”:”12%”,

“season”:”Todas las temporadas”,

“seasonYear”:”2012″,

“shopAnalyticsAccount”:””,

“shopName”:”default”,

“sizeList”:””,

“sku”:”BR002SH19DJS”,

“specialPrice”:”144900.00″,

“urlPageProduct”:”http:\/\/www.dafiti.com.co\/Zapatos-Brahma-Cafe-280.html”,

}];

dataLayer = CookieTracking.changeGtm(dataLayer);

</script>

And here is how this data layer looks like in Google developers tool’s console tab:

If you look at this screenshot closely, you can see that all data layer variables are reported in alphabetical order in the developer’s tool console tab.

That’s how you should write your data layer variables, in alphabetical order. So that debugging data layer becomes easy later.

Another thing worth noting is that, the data layer above contains some dynamic data layer variables, near the end like: VisitorsAge, VisitorsEmail, VisitorsGender etc. These data layer variables weren’t hard coded on the web page but were dynamically pushed into the data layer via the push method.

 

// Bonus Content

How to see and interpret the data layer on a web page?

Other article you will find useful: Bare Minimum Statistics for Web Analytics