The topic of this post follows the subject ofthe data layer push. Basically, once you have stored information in the data layer, you can also read this information. By “reading” we imply that we can pull back out this information so that Google Tag Manager can use it. And this is what we’re going to look at today. Some parts may not be fully explained since they were covered in another post, nevertheless, these are minor and you should still be able to understand clearly the process.

Objectives

We’ll use a new variable that hasn’t been discussed in previous posts. This is the Data Layer Variable. 

This is what we’ll use to extract the information out of the data layer. Lastly, we’ll use an extension to mimic our preview mode and also see how other websites use the data layer for inspiration.

Let’s go. 


The Data Layer Variables

For the purpose of this post and the previous one on the data layer push, we created a basic page with a 2 option quiz. The question is Whose your favorite celebrity? Visitors could choose by selecting either Michael Jackson or Bob Marley. 

Now, these two selections are self-redirect links (meaning if you click on one of them, it won’t send you to another page, your page will refresh and come back to where you are). 

The purpose of this setting is simply to learn how to take values and pass them (push) to the data layer, and (our case today) extract them back out of the data layer into GTM.

Although information can be stored in the data layer, Google Tag Manager can’t do much about it unless we put it in its hands, turning it into information that GTM can use. And this is where variables come in. 

The end goal is to send an event to Google Analytics. We will call our Event Category “character” and our Event action “choice”, to which we’ll add the actual character values from people’s selection that we pulled from the data layer (just in case: this means that if someone selected Michael Jackson for example, then we will see it in GA’s report).

Now you might be thinking why not simply use a Click Text in GTM that will simply provide the character values of any text clicked on our page? Absolutely, but again, this is an exercise to understand how to use the data layer, and to show how to pull information out of it. 

Now, how do we get this information out of the data layer? 

To accomplish this, we’ll create a Google Tag Manager variable. The name of this variable is …. (drum roll)… The Data Layer Variable.

That’s easy to remember. We’ll use the Data Layer variable to pull information out of the data layer. 

So to pull information out of the data layer, you would use a data layer variable. That sort of puts it in the hands of the tag manager.”

Chris Mercer

Go to Variables > Scroll down to User-Defined Variables: 



The Data Layer Variable Name (avoid the confusion)

The Data Variable Name is not the same thing as the Variable that you usually rename. 

This has to do with the key/value pairs of the data layer. 

In our case then:

  • What is the key? 
  • What is the variable name?

Go to your web page, then go to the data layer from the preview mode. You’ll see that our Key is “character“. 



What the data variable will do now is to go into the data layer to find “character” and return also its value (the value here is Michael Jackson). 

So put in character


Warning: its case sensitive

Look again at the data layer, “character” is written in lowercase and you must keep this format consistent if you refer it anywhere else. 

Always assume GTM is case sensitive. 

Rename the Data Layer Variable: 

For best practice naming convention you can start with DLV (data layer variable). 



Going back to our preview mode on our web page. Go to the “Variables” tab. You can see that our Data Variable entered the character’s value being Michael Jackson because this is what we clicked on. This is why keeping the case consistent is important because if you wrote: “Character” with capital “c” instead of “character” the value for the key would have not appeared. 

What is left to do now? 

For everything to work we need to create a Tag and a Trigger. 

Creating Your Tag

Follow what you see in the image. 


For Label, you can easily select the Data Layer Variable we created earlier from the list. You can start typing open curly brackets and a selection will appear. Under Google, Analytics Settings don’t forget to select your GA variable. 

Create Your Trigger 

Ok, hang with me for a sec. 

Ask yourself: when do I want the Tag to fire? 
Or (same thing): when do I want my Tag to happen?

We want the Tag to do its work as soon as there is a selection right? 

The problem is that the value we click on appears at a certain time and in a certain order in GTM’s left Event Panel during preview mode. 

You see if someone clicked on Michael Jackson, 3 events are happening. 

But it’s only our event number 15 (called characterUpdate) that will show the value “Michael Jackson“. And it’s exactly this characterUpdate event I need to select. Not those before or after. For example, Click and Link Click do not have that value. 


Note: characterUpdate was a simple data layer push we did in the past which is not covered here. 

Here is the method to configure a Trigger that only fire when characterUpdate appears in the left event pannel.

In GTM, go to Trigger and do the following : 

Chose a Custom Event for your Trigger Type. 

Under Event Name, type in characterUpdate. 

Select All Custom Events.


Rename your Trigger

note: CE refers to Custom Events. 


You can rename your Variable following a structured naming convention to remember well everything you did so far. Something like : 

GA – Events – Character Choice


Because it’s an event that will be reported in Google Analytics and its about a choice selection.
 
Save everything, refresh your Preview Mode and your web page. 

Now if you click on Bob Marley or Michael Jackson, I can see that my Tag (GA – Event – character Choice) is fired for characterUpadate.


Everything seems good, BUT, we should ultimate verification test is in the Real Time Report in GA. 


Drill it down by clicking on Character: 


Using the Data Layer Chrome Extension

The Data Layer Insperctor tool mimics errything we have on our Preview Mode (on the web page). This can be also used on other people’s websites to see what others do and what we could replicate. 

On your web page, do a right-click, go to inspect, and then go to console. 

Conclusion and Last Tips

Remember that you don’t always need to do everything on your own. You can talk to your developer if you face any complications, so you should not feel responsible to push through everything. 

We covered how to read (extract) info from the data layer into GTM using the data layer variable. The data layer allows us to put this information in the hand of GTM so that it can do something with like sending it to Google Analytics. 

We can push all sorts of information into the data layer for many reasons. Maybe you want to submit a form or maybe to pass information about logged-in or returning users and use this to fire goals. To do so you’ll then need the data layer variable to pull out this information and use GTM to send it to your analytics.