If you have used Google Tag Manager (GTM) for longer than a 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 especially 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.

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

What is a data layer?

A data layer is a JavaScript array which is used:

• To store all the key attributes of a web page (like: page title, page URL, page category) etc.
• To store all the key information your marketing and analytics tags currently need (like: user ID, client ID, user’s preferences, users’ purchase history, product ID, product price etc)
• To store all the key information you may need in the near future, for additional tracking.
• To send information from a website to GTM container tag.

Empty Data Layer

Following is an example of an empty data layer:

<script>

dataLayer = [];

</script>

Data Layer which contains variables

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

<script>

dataLayer = [{

'pageCategory': 'Statistics',

'visitorType': 'high-value'

}];

</script>

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

A data layer is also known as dataLayer queue, dataLayer object and data collection layer.

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

Variable is a location in the computer memory 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 be used to store a value like ’10’ and then at different point in time, can be used to store another value like ’20’.

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.

How to create an Array Variable

An array can be created, by either using the array function or array literal notation [].

The array literal notation is preferred, for creating arrays.

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

var a=new Array();

Here ‘a’ is the name of the array and ‘var’ is a command which is used to create a variable 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.

Introduction to an array of Strings

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.

Introduction to an array of numbers

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.

Array which contains elements of different data types

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 six elements.

Out of these six elements, the first three 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 six elements, three elements are of type string and the remaining three 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.

Array of undefined values

Following is an example of array of undefined values:

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

Array of boolean values

Following is an example of array of boolean values:

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

Introduction to Multi Dimensional Array

A multi-dimensional array is an array which contains one or more arrays.

For example:

a=[[“Clasicos”,57],[“Zapatos”,456]];

Here the array named ‘a’ contains following two elements of type ‘array’:

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

Array of objects

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

a=[{"id":"20","name":"Zapatos"}];

Here the object is: {“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"}];

Here the objects are:

• {“id”:”20″,”name”:”Zapatos”}
• {“id”:”53″,”name”:”Masculino”}

White spaces and line breaks are not important in JavaScript.

So to improve readability you can write the array named ‘a’ as:

a=[

{"id":"20","name":"Zapatos"},

{"id":"53","name":"Masculino"},

];

Following is an example of an array variable which contains multiple elements of type ‘object’:

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"}

];

Array of all available data types

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

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

“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 in JavaScript.

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 five elements of different data types.

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};

or

<object-name>={"key1":value1, "key2":value2, ....."keyN":valueN};

Here property/key can be any string or identifier.

Introduction to Identifiers

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.

A 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.

Empty Object

The following example code 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.

Object with properties

The following example code 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.

Data Layer with Server Side code

Data layers which contain server side code are usually used when you are installing ecommerce tracking or enhanced ecommerce tracking code on a website.

A data layer becomes 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 Recap

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 = [{…}];

The three layers in programming

In the context of programming there are three different types of layers (also called ‘logic’):

#1 Presentation Layer

#2 Business Layer

#3 Data Layer

#1 Presentation Layer (or Presentation Logic)

The presentation layer corresponds to the user interface.

It is used to manage interaction with the users.

The presentation layer is made up of one or more scripting languages.

The three scripting languages which are most commonly used for creating presentation layer are: HTML, CSS and JavaScript.

HTML (or HyperText Markup Language) is used to develop text content of a presentation layer.

CSS (or Cascading Stylesheet) is used to control the layout and formatting of the text developed through HTML.

JavaScript is used to control the behaviour of HTML and CSS elements, users and web browsers.

When you interact with a web page, you are interacting with presentation layer.

#2 Business Layer (or Business Logic)

Business Layer corresponds to business rules and workflows that determine how data can be created, stored and changed.

The business layer sit between presentation layer and data layer.

#3 Data Layer (or Data Logic)

The data layer corresponds to data structure and database.

A Data Layer should contain all the data you want to send to various analytics and/or marketing tags.

Why do you need a data layer?

A data layer provide a safer and reliable way to pull data from presentation layer and send it to the container tag (aka GTM).

You can directly pull data from the presentation layer by traversing the HTML DOM (structure of HTML) using JavaScript and then send the data to the container tag.

When you pull data directly from the presentation layer and push it into your analytics and marketing tags (via GTM), you create an unreliable tracking setup.

The problem with this approach is that, the the presentation layer can change any day, 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 should be used, to pull data from the data layer of a page instead of its HTML DOM (the presentation layer).

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).

When you can use DOM scraping instead of data layers?

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 should be hard coded on a website by your developer or IT team.

So as long as you are using data layers, you may 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 the 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: ‘Property: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>

The 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.

The value of PageCategory is ‘Statisitcs’.

The value of visitorType is ‘High Value’.

The value of event is customizeCart

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?

There are two methods that can be used to push information into a data layer:

#1 By hard coding the data layer variables in the data layer, preferably above the container tag.

#2 By dynamically adding objects to your data layer through the ‘push’ method of dataLayer object.

Use the first method, if you want to push information into a data layer on page load.

For example, for ecommerce tracking or enhanced ecommerce tracking we use the first method, as we want the ecommerce data to be available on page load.

Use the second method, if you want to push information into a data layer on any event other than the page load.

For example, if you want to push information into the data layer on click on ‘Add to Cart’ button then use the second method.

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 contains 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>

 

Window.dataLayer.push()

This is same as dataLayer.push() method but with an added advantage.

‘dataLayer’ is a global JavaScript array variable and can thus be accessed by any function that can also access the window object.

The advantage of using the ‘window’ prefix is that you can avoid conflict with any local JavaScript array variable that use the ‘dataLayer’ name.

So instead of using:

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

Use

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

Example-1:

<script>

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

</script>

Example-2:

<script>

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

</script>

About ‘Scope’ in JavaScript

In JavaScript there are two types of scope: local scope and global scope.

Scope determines the accessibility of JavaScript variables.

A variable declared within a JavaScript function is called a local variable.

A local variable has got a local scope and can only be accessed within the function where it is declared.

A variable declared outside any function is called a Global variable.

A global variable has got a global scope and can be accessed by any function.

Note: In JavaScript, objects and functions are also called as variables.

Multiple initialization of a data layer leads to overwrite of the data layer

Let us suppose following data layer is hard coded in the head section (<head>….</head> of a web page

<script>

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

</script>

Let us suppose, you later, hardcoded second data layer somewhere in the body section (<body>….</body>) of the web page:

<script>

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

</script>

Now what will happen on page load, is that only the data from the second data layer will be available to the GTM container tag.

The second initialization of the data layer will overwrite the first one.

So if you want to access the ‘pageCategory’ data layer variable from within GTM, you won’t be able to.

Because on page load, the data layer will look like:

<script>

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

</script>

Instead of:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’

}];

</script>

In order to avoid this issue, do not initialize a data layer more than once on the same webpage.

If you want to push new information to the existing data layer then use the ‘window.push()’ method.

For example,

<script>

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

</script>

.

.

<script>

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

</script>

Now the final data layer on page load will look like the one below:

<script>

dataLayer = [{

‘pageCategory’: ‘Statistics’,

‘visitorType’: ‘high-value’

}];

</script>

 

Push information into a data layer only if the ‘dataLayer’ variable has already been declared

In order to avoid multiple initialization of a data layer and consequently overwriting the data layer with new information, always check whether the dataLayer variable has already been declared.

If the dataLayer variable has already been declared, only then proceed to push new information.

You can achieve this objective by using the following code:

<script>

window.dataLayer = window.dataLayer;

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

</script>

If the dataLayer variable has not already been declared then assign a new empty array variable to it and only then proceed to push new information.

You can achieve this objective by using the following code:

<script>

window.dataLayer = [];

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

</script>

In order to achieve both of the aforementioned objectives at the same time, combine the code like the one below:

<script>

window.dataLayer = window.dataLayer || [];

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

</script>

For example:

<script>

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

</script>

.

.

<script>

window.dataLayer = window.dataLayer || [];

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

</script>

Now the final data layer on page load, will look like the one below:

<script>

dataLayer = [{

‘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 be able to 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 cannot 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>
window.dataLayer = window.dataLayer || [];
window.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 conventions 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 the following set up won’t work the way you think it should:

// signup page:

window.dataLayer.push({'pageCategory': 'members-signup'});

// Product purchase Page:

window.dataLayer.push({'PageCategory': 'product-purchase'});

But the following set up will work the way it should:

// signup page:

window.dataLayer.push({'pageCategory': 'members-signup'});

// Product purchase Page:

window.dataLayer.push({'pageCategory': 'product-purchase'});

 

Data layer Variable names should be enclosed in quotes

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

window.dataLayer.push({'pageCategory': 'members-signup'});    // works

 

The Data Layer javascript array itself is case-sensitive

So, dataLayer is different from datalayer, and using the latter won’t work.

For example:

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

window.dataLayer.push({'pageCategory': 'members-signup'});    // works

What is an ‘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:

window.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 a button:

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

Other examples of special data layer variables

• hitType
• nonInteraction
• ecommerce etc

Q. Can each web page has its own unique data layer?

A. Yes and it should.

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

A. No.

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

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

What are dynamic data layer variables?

Dynamic data layer variables are data layer variables which are pushed dynamically (during run time) to a data layer.

Syntax for setting up dynamic data layer variables

window.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>
window.dataLayer = window.dataLayer || [];
window.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 -->

<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 -->

<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="window.SmartDataLayer.push({'event': 'pdf-download'});" >PDF download</a>

When do you need to rename your data layer?

When you are using multiple GTM container tags 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-->

<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 -->

<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="window.dataLayer1.push({'event': 'pdf-download1'});" >
PDF download 1</a>

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

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

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

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

A. 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.

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

A. 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 a data layer snippet?

A data layer snippet is the data layer enclosed within <script> ….</script> tags.

Following is an example of a data layer snippet

<script>

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

</script>

What is a 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 -->

<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 you should place the data layer snippet?

It should be placed above your container tag snippet in the head section (<head>….</head>) of a web page:

For example:

<head>
.
.
.

<script>

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

</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=

'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXX');</script>

<!-- End Google Tag Manager -->

</head>

<body>

<!-- 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>


<!-- End Google Tag Manager -->

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

If you place the data layer snippet below the container tag snippet then the data layer variable may not be available to the container tag.

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 GTM container, as the data layer code has been placed after the container snippet.

Q. When does Google Tag Manager function best?

A. When used alongside a data layer. You should know this by now!

Q. Is it mandatory to declare data layer while using GTM?

A. No. Explicitly declaring a data layer is optional.

Q. Can you use GTM without explicitly implementing data layer?

A. 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?

No.

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>

Q. How you can selectively fire tags on page load?

A. Through GTM triggers.

Q. What is the downside of not using data layer?

A. You cannot use ‘events’ without data layer and above all your GTM implementation could be pretty shaky.

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

A. By using GTM custom JavaScript variables.

How you can implement data layer on a web page?

by adding following snippet of code above the container tag snippet in the head section <head>….</head>:

<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>

 

Q. What is the scope of data layer variables?

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

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

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

What information should you 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 GTM 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.

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

To do this, follow the steps below:

Step-1: In Google Chrome, right click on a web page (the page must have the GTM container tag installed) and then select ‘Inspect’. This will open up the developers’ tool window at the bottom of your browser.

Step-2: Click on the ‘console’ tab at the top right of the tool window and then type ‘dataLayer’ at the command prompt and press ‘enter’ key:

Once you press the enter key, you will see following three default JavaScript event objects:

gtm.js is a javascript library file used by the container tag. If this library file doesn’t load then your GTM won’t work. Once gtm.js library file is loaded, the container tag passes the event ‘gtm.js’ to the data layer.

gtm.dom is a DOM file used by the container tag. If this file doesn’t load then it means, DOM has not loaded. Once the DOM is loaded, the container tag passes the event ‘gtm.dom’ to the data layer.

gtm.load is a load file used by the container tag. If this file doesn’t load then it means, window and all its contents are not loaded. Once the window and all its contents are fully loaded, the container tag passes the event ‘gtm.load’ to the data layer.

These events are fired in the following sequence: gtm.js > gtm.dom > gtm.load

Every data layer get these three events from the container tag.

If your data layer doesn’t get any/all of these events then it means something has gone wrong with your tag manager implementation. It could either be a broken container tag or broken data layer or both.

If you have hard coded data layer on a page then developers’ tool window will show you at least four JavaScript objects.

One JavaScript object would be your data layer and the other three will be the default JavaScript event objects:

Another article you will find useful: Google Tag Manager Training Resources