In this post, I am going to cover a very important concept. It is one of foundation pillars for your tag management education.

What is a Data Layer?

Lets get first the basics in place such that you can express your knowledge about them.

You might know that most websites are based on html – hypertext markup language.

You can go to any site and check the page code through your browsers. In Google Chrome on Windows/linux you can just press ctrl+U to check the page code.

Like the following is the screenshot of page source code on Apple India site home page:

 

 

With me till here?

Now, to make the website interactive and dynamic we add another language to html – JavaScript

What is the role of JS? Well, JavaScript has the ability to read as well as write the html content. Using this ability JavaScript makes the content of html dynamic based on user actions.

For example, you might have seen a button changing its colour when you hover over it. The code of the button is written in html, but when you hover over it JavaScript reads the current colour and writes a different colour based on your interaction which in this case is hovering. Clear?

Now here is something exciting, you can change the content of any site for yourself exclusively on your browser with your browser console.

So, on Chrome, just press F12 to open console and you can type any JS code to play with the contents of the page.

Like in the following example, I have changed the colour of “Book a Call” button from Red to Blue using my browser console through a code:

 

 

But, as soon as you will refresh the page, this change will be lost. But the point I want to stress is that you can see the code of the site.

What is that to do with Data Layer?

I am coming to that, keep patience.

Now, you might be aware that most programming languages have something called variables which are used to store values to ease programming. Further more, there are different kinds of variable in each language.

For now, just understand this : DataLayer is nothing but a kind of variable only, called “object”. What separates object from other variables is that one object can contain multiple variables and even multiple objects within itself in the form of key-value pairs……if its getting too geeky…..for now just understand that DataLayer is a kind of JavaScript object.

Now, what is different about the DataLayer object ? Well, Nothing! Its just that the purpose of this object is to contain data variables which are specifically used by tag managers to send data to analytics and marketing platforms.

Why do we need a Data Layer?

 

How it works?

As you saw earlier we used JavaScript to change the colour of button, here if you think over it, we are reading the colour of button on html and changing it or writing a different colour.

So, DataLayer is just a JavaScript object that stores key value pairs for the various data items. DataLayer is usually used with Tag Managers. We can name it anything, in fact Google Tag Manager allows to change the name of this object from DataLayer to something else. More on that later.

For the scope of this blog, lets try to understand dataLayers with GTM.

If you have already installed Google Tag Manager on your site then GTM actually creates a dataLayer object for you in the name of “dataLayer” only by default.

You can just go to your site (with GTM installed), open console and if you type “typeof dataLayer” in your console, it will return “object”:

 

 

Now, just like you can see typeof dataLayer, you can actually access or read anything that is present in dataLayer.

There are multiple ways to look at JavaScript object through console. One is simply typing the name of the object and hitting enter, other is using sources like mentioned below:

To see the contents of dataLayer, go to sources > watch > + > type the name of any variable you want to see (in this case dataLayer) :

 

 

Another way to check the dataLayer is through your GTM debugger. Just go to your GTM, click on preview on top right (you need to have access for this) and refresh your site.

You will the GTM debugger with 4 tabs : Tags, Variables, Data Layer, Errors.

Click on Data Layer and you will see something like this:

 

 

Now whatever you see above is present in your dataLayer after the “conversion” event (11) has taken place, and you can use this in your tag manager to pass values to various analytics and marketing pixels.

The advantage of using GTM debugger is that you conveniently get to see how the dataLayer is getting updated with each event mentioned on the left : DOM ready, Click, Timer etc.

Example : If you are creating a trigger at DOM ready (4), but your required dataLayer gets updated with Window Loaded (5), your variable will not work with DOM ready.

How to do that?

 

You can create variables based on dataLayer using 2 methods, one is through JavaScript variable and other (if you are using the default name of dataLayer) is dataLayer variable. With default name, dataLayer variable is more convenient. You can use JavaScript variable in almost every tag manager and further using JavaScript variable you can access any JavaScript object including dataLayer. For now, lets start first with dataLayer variable in GTM.

Now, just login to your Google Tag Manager and go to the variables section and click on New.

Click on Variable configuration and select “Data Layer Variable”

Now here, under “Data Layer Variable Name” you need to enter the name of the variable’s path. How?

Focus on 2 things:

1. Type of bracket under which the variable resides > Is that a square bracket [] or a curly bracket {}
2. location of the variable in the data layer structure

Lets take an example. This is a screenshot from GTM debugger :

 

 

 

 

 

 

 

 

 

 

 

 

 

Starting with simple ones, anything that is not under any kind of bracket after the main brackets. Like in the case the only variable that is available is “event” and everything else is within somekind of bracket. (Again – we are ignoring the main brackets)

Now, if something is only under curly brackets, so for example uniqueEventId, we can access it by putting the name of parent variable and putting a period like this:

gtm.uniqueEventId  and will result in “10”. Here gtm is the parent variable as it is one level outside of the brackets in which uniqueEventId resides. Further, “start”,”element”,”elementClasses”.”elementId”,”elementTarget”,”elementUrl” are all siblings and to access any of them you will need to use “gtm.<name of variable within gtm array>”

Another example, lets say we want to pick the value of “list”. Now, list is only child of actionField which in turn is child of detail which in turn is child of ecommerce. So the variable will be like this:

ecommerce.detail.actionField.list which will result in “Pintalabios Personalizados”

Now, in case you want to pick a value which is within square brackets, you will need to put the index or location of that value. Let me explain.

You will notice that whenever there is a square brackets, there are one of more curly brackets and within those curly brackets there are the key value pairs.

In the example above we have “products” which is holding items within square bracket which has further one curly bracket (there can be many, each separated by a comma).

Now, each curly bracket set will have an index within the square brackets, and the index always starts with 0. When there is only one set of curly brackets it will have the index 0.

So, now lets say you want to access quantity, which is in the first and only curly bracket set, which is child of products, which in turn is child of details, which in turn is child of ecommerce. So, here is how you will put in the dataLayer variable:

ecommerce.detail.products.0.quantity

Now, lets take another example where we have multiple entries within the square brackets:

 

Lets say you want to record the name of third product in the list. Now remember the index starts with 0, so the index of third product will actually be 2.

So, the variable configuration will be like this:

ecommerce.impressions.2.name which will return “OH MY ORANGE!”

Please note! Please note! Please note! WE ARE NOW GOING TO LOOK AT HOW TO CREATE JAVASCRIPT VARIABLE

Now, If you want to get the JS variable, its better to use the console instead of GTM debugger. So just go to console and type the name of object which you want to use for building your variable. In the present case it will be dataLayer:

Now, if you notice there in an arrow. If you click on it you can expand the dataLayer object and further by clicking on the triangles that come next you can  :

 

Now, lets say you want to track pagePostType, which as you can see is within the element indexed “0” which is within dataLayer object. So your variable will be :

dataLayer[0].pagePostType

You can very easily validate that by typing above in the console itself:

As you can see the code above is returning the proper value of pagePostType

NOW NOW NOW NOW NOW NOW PAY CLOSE ATTENTION

when you put values in Google tag manager it does not take [] brackets and hence you will need to put it like this only:

 

In the variables section of GTM debugger here is how the value will look :

 

Now, lets look at other cases:

 

Now, lets say we want to again capture the name of third product, then same drill:

dataLayer[0].ecommerce.impressions[2].name:

But remember, in GTM the configuration will be like this:

dataLayer.0.ecommerce.impressions.2.name

Please note : From tool to tool there can be slight changes in how to create variables, like in GTM square brackets are not accepted in the form field, but there is no issue as such in Adobe Launch or Tealiam

But who updates the dataLayer?

The dataLayer is updated by your developers or at times some plugins or add ons can also do that for you.

You can also update the dataLayer through your tag managers as well, which can be in some advanced cases.

But, a correct answer is that dataLayer is usually updated by developers of the website and at times is done by plugins or add ons.

 

But Tag Manager is supposed to reduce the dependency on dev, this is increasing it!

Yes, but there is difference between reduce and eliminate. Tag manager does not eliminate the dependency, and even with data layer the dependency on dev is still reduced. How?

Understand this thing, data layer is agnostic of the platforms that will use it. The dev does not need to put separate data layer for FB or google Ads or analytics. You simply need to create variables in your tag manager and these variables can then be put into any tool to pass data.

Once the data layer is in place you do not need to approach dev for separate tools. Moreover, you can set a best practice within your organisation to set up a standard data layer with addition of any new components and your data layer and corresponding tracking with tag manager will be ready as soon as the page is published. And hence you don’t need to approach dev for every new addition to the page.

Lets say you are really good with Javascript/CSS/Jquery and you can create all the rules by using those. There are still some scenarios where dataLayer is useful:

1. Lets say you create the rules based on CSS, there was some update on the site and CSS got altered. Your rules will crash. But if you were using dataLayer, it will work fine
2. Lets say you want to track a form, but upon submission there is no confirmation page, plus there is nothing that you can pick from the page to configure your tag manager to track the submission. You will need to work with DataLayer
3. Lets say you want to track login status on a page and there is nothing that shows on the page that whether a user is logged in or not, you will need a dataLayer
4. Another example of form submission, lets say there are multiple forms on the site, but upon submission all the forms lead to the same thank you page and you need to find out which form led to the submission, you will need a dataLayer for that.

Again, lets say that you are someone who is able to do all that I have mentioned above without a dataLayer, then good for you, but most people (including Sanmeet Singh Walia) are not always able to create a solid and sustainable solution without the dataLayer.

So, I hope this post helped you understand about the fundamentals better.

Checkout our home page to know more about us.

Need help with Digital Analytics? Get in touch: