Introduction to Data Layer for Google Tag Manager

Google Tag Manager manages your works best when it's deployed alongside a Data Layer. Before we look into how Data Layer can be used with Google Tag Manager, let’s look at what a Data Layer is.

Most of the websites have all sorts of data on pages; it could be numbers such as Product Price, Quantity, etc. or it could be text values such as page, product, content classification. This data is scattered throughout the web page. If you use applications such as Adobe Analytics, Google Analytics, Google Tag Manager, etc., to use this information, you will have to ask the developers to change the code and pass that information to these tools. Asking developers to change code means that you will have to wait for them to implement these changes, which can take days, week event months.

This is where a Data Layer can help. Data Layer is a structured way of keeping all the data on the page in one central location, i.e. the Data Layer.

Any applications such as Google tag manager, Adobe Analytics, etc. can then easily use the data contained within Data Layer.

Yes, this code also has to be written by developers, but once it is part of the process, you don’t have to ask them to change the code every time.

There is an inbuilt functionality in Google Tag Manager that allows you to access the data within the Data Layers and use it in variables, tag or triggers.

Data Layer is coded in JavaScript. It is a JavaScript object that contains name-value pairs. Here is a simple syntax.

<script>

Data Layer  = [

‘key1’ = ‘value1’,

‘key2=’value2’,

‘keyn’=’value’,

];

</script>

Here is an example of a Data Layer  that on a page on analyticshire.com

<script>

Data Layer  = [{

'pageCategory': 'Job Details',

'listinglocation': 'Dallas',

'JobType': 'CON'

}];

</script>

This Data Layer changes the values based on the current page of the user. In the example above, the user is viewing the Job Detail Page, so the first key, i.e. pageCategory contains the value ‘Job Details’. The user is looking at a listing in Dallas, and this is a contracting job and the other two values.

You can decide what names and values make sense to your business.

It may not be creating these Data Layers but providing the information to the developers in your organization. These developers will then code the Data Layers.

However, if you understand the structure of a Data Layer  then you will be able to use them in Google Tag Manager easily.

If you are wondering how to determine the available Data Layers on a page, then there is a straightforward solution.

Using Chrome Developer Tool

Open the site that you want to look at the Data Layers for in Google Chrome Web Browser. After opening the site, click on three dots in the top right corner to open up the Chrome browser menu. In this menu, go down to More Tools and then Developer Tools, or you can simply click on Control + Shift + I.

This will open a window on the right-hand side. Click on “Console” and type in Data Layer to see all the Data Layers, as shown in the figure below.

Figure: Chrome Developer Tool

Using Google Tag Manager Preview mode.

You can even use the preview mode of Google Tag Manager to look at the Data Layers on a page. To do that, but Google Tag Manager in preview mode (use Google Chrome browser) and then in another tab, open the page that you want to view the Data Layers for.

In the preview window, click on “Data Layer” to see the Data Layers and values

Figure: Data Layer  in preview mode

Using Data Layer  in Google Tag Manager

Google Tag Manager has built-in functionality to grab values from the Data Layer and use them in variables, tags, and triggers.

Getting Data layer values in variables

Once we get the values from the data layer in Google Tag Manager variables, we can pass them to any tag or triggers that need them.

Follow these steps to get the values in Google Tag Manager variables.

  1. 1. Click on Variables in the left-hand menu.
  2. 2. This will be a user-defined variable, so scroll down to “User-Defined variables” and click on the “New” button”.
  3. 3. In the next window, click in the middle to pick the variable type.
  4. 4. Select the Variable type of Data Layer

Figure: Data Layer Variable Type

  1. 1. In the next window, enter the name of the variable that you want to capture the value from. Keep in mind that JavaScript is case sensitive, so type the name of the variable in the same case as it shows up on the webpage. For example, if I want to capture the value of Listing Location from the data layer, I will use the variable called “listinglocation”.

Below is the data layer code,

<script>

Data Layer  = [{

'pageCategory': 'Job Details',

'listinglocation': 'Dallas',

'JobType': 'CON'

}];

</script>

  1. 2. Leave everything else as it is. Give you variable and name and save it.

Figure: Variable configuration using Data Layer value

Repeat the same process to get other values in different variables. I am going to get Job Type as well, see below.

Figure: Variable configuration using Data Layer value

After you have captured the data layer values in the variables, you can use them in tags and triggers.  Let’s see how it works

Configuring the Tag

We will pass these Data Layer values to Google analytics as Event tags.  For Action and Lable values, click on the + sign next to get the variables that we configured. The final configuration will look as follows.

Give this tag a name and save it.

Figure: Tracking data Layer Variables in Google Analytics

Next, attach the trigger.  We will use all pages triggers, but you can choose to fire on only specific pages. For simplicity, I am using All Pages.

Preview the tag before publishing it.

Figure: Data Layer values to Google Analytics in preview mode

Ensure you check the Google Analytics real-time report.

Figure: Data Layer values in Google Analytics

If everything looks good, then Publish the tag.


Want to Learn Google Tag Manager. Here are few options:

  1. Get Google Tag Manager Book at Amazon
  2. Signup for Google Tag Manager Course on Udemy
  3. Signup for Optizent Academy and get Google Tag Manager + 20 other courses
  4. Free Introduction to Google Tag Manager course

Related Services

Leave a Reply

Your email address will not be published. Required fields are marked *