How to Pull Data from the Data Layer Using GTM Data Layer Variables

Hey there, measure geeks. Today, let’s walk through exactly how you can pull data from the data layer using Google Tag Manager’s data layer variable.

If you’re familiar with data layers, you know we can push data into them with javascript code that looks something like this:

data layer push

As we’ll illustrate later, a good example of when this type of push would happen, is on the checkout page of an ecommerce website. Upon the completion of a transaction, values like product id(s), cart value, tax, and shipping method can be pushed into the data layer.

This data layer push executes in the background of a page, so a front-end user wouldn’t actually see anything happening, but this data now becomes available within the data layer itself. We can then pull this data out of the data layer and store it in a variable to be used later on. Pretty useful stuff right?

The data layer is Google Tag Manager’s central repository of structured data. We can send information into the data layer using a variety of different methods.

3 Ways to See Data Stored in the Data Layer

Method #1: The Data Layer Tab in GTM Preview Mode

Open preview and debug mode in Tag Manager and select the Data Layer Tab. Here you will see the information that was pushed into the data layer.

data layer tab tag manager

Method #2: Using Chrome Developer Tools > Elements

Depending on how it was pushed, you should also be able to see the data layer information using Chrome developer tools under the elements tab.

Select the elements tab, and type in “dataLayer” in the search bar at the bottom of the window.

find data layer developer tools elements

This will highlight any instances of “dataLayer” in yellow, making them easy to find. You can see it here:

data layer information highlighted in yellow

Method #3: Using Chrome Developer Tools > Console

A third way to find your data layer information is using the console tab in developer tools. Simply type “dataLayer” into the console, and voila, there’s your data layer.

data layer developer tools console

Click the down arrow next to the data layer array, and you can see the different objects inside.

Understanding Data Layer Objects

Each object is made up of key and value pairs. In the example below, the first key:value pair in object #2 has a key of event, and a value of blog post view.

key:value pair

Now, if you want to pull out a value from the data layer and make it available to your tags or your triggers, you would need to utilize a data layer variable in Tag Manager.

Let’s say we want to create a data layer variable to hold the author value. In the screenshot above, you can see the value of author is admin.

To create a data layer variable that pulls the author value, we need to identify the value using the correct key.

Creating the Data Layer Variable in Tag Manager

Let’s head over to Tag Manager and create a data layer variable.

Select Variables > New > Data Layer Variable and give it an appropriate name. In the example below, we called it “dlv – author.”

In the Data Layer Variable Name field, you’d enter “author,” because this is the key that corresponds with the value you are trying to pull.

enter key in Google Tag Manager

(By the way, the word Data Layer Variable “Name” can be a little confusing here, since Data Layer Variable “Key” is really what this field is looking for.)

Again, if we take a look back at the console, you can see the key and value here:

author key

Once you have entered “author” in the Data Layer Variable Name field, you can hit save. Unless you have a very specific reason for it, don’t worry about any of the other settings for now.

So let’s try it out.

Go back to Tag Manager and refresh in preview mode, and also reload your page. Now click into the variables tab. At first, you’ll notice nothing is there.

no data layer variables yet

It’s important to understand that variables are resolved based on these events you see in the left hand column (Page View, blog post view, DOM ready, Window Loaded). These events are like little checkpoints that you have on the page.

In this case, if you looked at the Page View event, you’d see that your author variable is still undefined.

pageview undefined

Remember, it is the event of blog post view that actually pushes the author data into the data layer. If you look at any event prior to the blog post view event, the author data layer variable will be undefined.

If you click on the blog post view event, you’ll see that the author variable is now filled with a value.

blog post view event

This value will stay filled unless it’s overwritten by the later events.

If you would like to use this variable later in a trigger or a tag, be sure to fire it on the right event so that your data layer variable gets filled.

It’s as easy as that, you just need to know the right key, and then input that in your data layer variable to pull data out.

However, not all data layers look like this.

Pulling Data from Nested Data Layers

The previous example is a pretty flat data layer. With a flat data layer like this, you will just have a key and a value.

Let’s look at a data layer that comes from an ecommerce /order-received page. Here we have the enhanced ecommerce tracking data layer, with several nested data layers.

data layer nodes

In Tag Manager, in the Data Layer tab, you’ll notice that your nested data layer objects are displayed just like the nested HTML tags you’re probably used to seeing if you right clicked and inspected any element on a webpage.

You see the items nicely organized into a hierarchy. Every time an element is nested inside another element, it is indented to the right, so elements on the same level are vertically aligned and easy to identify.

This is a little harder to visualize within preview and debug mode, so let’s open up javascript console again.

Again, we’re just going to type in “dataLayer.” You’ll notice we have four objects now. Go ahead and expand all the little triangles until everything is expanded.

console nested data layer

Here you can see the nesting a little more clearly.

We have an ecommerce data layer that we opened.

=> Within that we have a currency code and a purchase.

=> => Within the purchase data layer, we have actionField.

=> => => Within that, we have several key:value pairs including the order ID. In this case, it is 309.

If we wanted to pull out this 309 into a data layer variable, it would not be specific enough to just enter “id” for your key.

We would need to utilize a special dot notation, which is illustrated in the image below.

At this point all you need to do is hover over the key to find it’s full path. Let’s zoom in nice and tight so you can see what we’re looking at:

id hover

What do we see? Forget about the zero for now, we’ll talk about what that means in just a second. What we see, starting with the ecommere object, is:

ecommerce.purchase.actionField.id

Each nested object is separated with a dot.

This is exactly what you would need to write into your data layer variable if you wanted to pull out the order ID.

Let’s head back over to Tag Manager and try this out. Create a new data layer variable, and enter ecommerce.purchase.actionField.id as the Data Layer Variable name.

dlv orderID

To test this all out, you should save and refresh the page, and go through another order on your test site. Add whatever you want to your cart, checkout, and get to the next order receipt page.

In Tag Manager preview and debug mode, go to the variables tab, select the appropriate event (in this case it is Page View), and you’ll see that the data layer variable “dlv- orderID” that was just created is populated with an order number – in our case, 315. Success, it worked!

nested variable success

It pulled out the correct ID by using the dot notation to go down the tree and get into the nested values of this data layer object.

Pulling the Value From a Key Pair Inside of an Array

There’s one other type of nested object you might encounter – a key pair inside of an array.

What is an Array?

In javascript terms, and array is simply a list of items inside of square brackets. In it’s simplest form, it might look like this:

[W,X,Y,Z]

Array elements’ positions are numbered, starting with zero, so for the array example above:

W = position 0
X = position 1
Y = position 2
Z = position 3

This can be confusing at first. The best way to think about it, is that the assigned number of each element is how far offset it is from the start of the array.

Now let’s do another transaction on your test store, make sure to purchase more than one item. On your order received page, if you look at the data layer tab on Tag Manager preview and debug, you can see an array of two products.

two product array

Let’s say for example that you want to store the price of the first item in a data layer variable.

It’s just as easy. Just head on over to your console, type in “dataLayer,” navigate to your key:value pair, and follow the nested path to the key you want to identify.

nested data layer in array

In this case, the key is:

ecommerce.purchase.products.0.price

Let’s head over to Tag Manager and create a variable with this Data Layer Variable name. See below:

dlv productPrice

Save, refresh, and go through let’s go through another test transaction.

Buy a couple items, get to the order received page. Look at the variables tab in Tag Manager preview and debug mode, and you’ll see that the purchase price of the first item in your cart has been populated into the variable you just made.

Success! That’s all there is to it.

You now know how to utilize the data layer variable to pull out values from a data layer by simply being able to identify the key. You have also learned how to structure your key in order to find the right piece of nested data.

Comment, Like, and Subscribe Today

Was this article helpful? We love to hear from our audience. Leave us a comment below.

If you found this lesson valuable, why not gives us a thumbs up on our video and subscribe to our channel. We create you new videos every week!

Or, if you really want to fast-track your marketing success, sign up for our premium measure community Measure Masters today.

3
Leave a Comment

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Julian JuenemannDanielKen Recent comment authors
newest oldest most voted
Ken
Guest
Ken

Hey Julian, great article. Also just wanted to highlight that the last image you attached appears to be wrong. It is exactly the same as the second last image on the page. Thanks!

Also, after pulling a variable in GTM, do you have an article on how to send it to Google analytics?

Daniel
Guest
Daniel

Hi! Great article!
I’ve got a question about pulling data from array.
You’ve shown what to do, when you know how many products was purchased. But usualy customers buy various number of products (one, two, but also five, ten, etc.).
How to build a variable(s) which will get as many pirces (or id, or any other key), as number of purchased products?

Julian Juenemann
Admin

first you would need to decide in which format you want that data, as there are different data types in JavaScript. Then you can follow this video which outlines how to transform the dataLayer.