Google Tag Manager 101 Part 7 - The Data Layer

16/06/2017

I set out on this series of articles intending to write a simple guide to Google Tag Manager for non-developers. After all, the main benefit of Google Tag Manager (GTM) for the marketing department is that they can build in tracking for their campaigns without having to wait for the IT department to release new code. So my plan was not to delve into JavaSscript at all ....

Having said that, sometimes you just can't avoid going a bit deeper to provide good analytics for certain types of website.

This article discusses the data layer, how to read from the data layer and send information through to Google Analytics and how to store state information from GTM into the data layer. I am only scraping the surface of what can be done, other people have written articles about getting in depth with GTM and the data layer.

We'll start with what can be done when a website developer writes information to the data layer. Using GTM, how do you retrieve the information from the data layer and send it through to GA?

Before we start, a really good Chrome extension to install is called "dataslayer" as it shows you the contents data layer at all times. It sits in a separate tab in Chrome developer tools (F12 on a PC).

We'll use an example of a website built by Cucumber (https://www.pggwrightsonseeds.com/) to illustrate data being written to the data layer and how to use GTM to send it through to GA.

On https://www.pggwrightsonseeds.com/ clicking on GRASS SELECTOR takes you here

Running this Search puts data into the datalayer

If you want to capture the values in the data layer, create a data layer variable for each one. The Data Layer Variable Name has to match the name as it appears in the data layer.

Next create a Trigger to fire whenever the Custom Event occurs.

Finally create a Tag to send the event to Google Analytics (this tag is sending the data in an event, you could define a custom dimension instead).

So far so good, you now know how to read values from the data layer and build triggers and tags to store the information in GA.

In what circumstances would you want to write information to the data layer from Google Tag Manager? You can usually add standard tags to a website without using the data layer but recently I had to tag up a website that was built almost entirely within the page. That is, each page had multiple tabbed content but there was no change in the URL when a tab was clicked. In order to record the tab clicks, I built triggers and tags to send virtual page views to Google Analytics whenever a tab was selected.

Each tab contained separate actions that I wanted to track such as button clicks and form submissions but many of these were common to multiple tabs, both the button to click to load the form and the form buttons themselves were using identical names - there was no easy way to determine which tab the user was on when they clicked a button.

I used the data layer to store the tab that the user clicked so that it could be used to report on their form actions. This meant that each tab click needed to fire 2 tags - firstly to send the virtual page view to GA and secondly to store the name of the tab in the data layer.

1. Create a data layer variable

All you need to create a data layer variable is a name. There was no need to set a default value for my requirement but set a default if you always want your data layer variable to contain a value.

2. Custom HTML to write to the data layer

So this is about as complex as we are going to get. Create a Tag of type Custom HTML and copy and paste the code exactly as it appears below. Amend the word "Tab" to your datalayer variable name and amend Details to the value you want to push into the datalayer.

<script>
(function() {
dataLayer.push({
'Tab': 'Details'
});
})();
</script>

The Trigger for this Tag is the user action that causes the variable to be set (in my case it was a tab click).

3. Use GTM Preview mode to check that the variable is being set

Using Preview mode is covered in previous articles - it is an excellent way to confirm that what you've built actually works as intended.

4. Use the data layer variable

Once you have created the data layer variable and populated it with a value, you can use this value to define rules in triggers and fields in tags - it can be used in the same way as all the built-in GTM variables.

5. What other uses are there?

Datalayer variables can be used to record user actions as they progress through your website. For example, if there are 2 key user actions that you want to track that can take place at any time, on multiple pages. It is possible to write a Google Analytics report or create a segment to report on when both are completed in the same session. But if you use the datalayer to store that each action has taken place, then you can send an event tag whenever a user completes both in the same session. The event can then be set as a website goal and you have much more reporting power at your fingertips.

Look out for Part 8 coming soon.

Written by Nick Baker