Did you know that there is a layer in your website that is responsible for collecting and managing data?
A website is commonly made up of three layers: the presentation layer (what users see), the applications layer (made up of the tools you connect to your website, like Google Analytics), and the data layer(where all the data generated by your visitors gets stored).
The data layer provides a reliable way of collecting data from your website. As digital marketers, we all know the importance of data collection for optimization efforts, but how do we view data from this layer? Is there a way to grab it?
In this post, we’ll show you how to pull data from your data layer using the data layer variable in Google Tag Manager.
💡 Top Tip: Before implementing anything for the first time on your website, we recommend trying it out on your demo website.
An overview of what we’ll cover in this guide:
- 3 ways to see data stored in the data layer
- Understanding data layer objects
- Creating the data layer variable in Tag Manager
- Pulling data from nested data layers
- Pulling the value from a Key Pair inside of an array
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.
Sign up to the FREE GTM for Beginners Course...
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.
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.
This will highlight any instances of “dataLayer” in yellow, making them easy to find. You can see it here:
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.
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.
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.
(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:
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.
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.
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.
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.
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.
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.
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:
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:
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.
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!
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?
Array elements’ positions are numbered, starting with zero, so for the array example above:
W = position 0X = position 1Y = position 2Z = 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.
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.
In this case, the key is:
Let’s head over to Tag Manager and create a variable with this Data Layer Variable name. See below:
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.
So those are the ways to view and pull data from a flat or nested data layer using Google Tag Manager’s data layer variable.
Do you sometimes find that the data layer contains the right information but isn’t in the format you can use? We have just the guide on how to transform the data layer with Google Tag Manager.
What data do you want to grab from your data layer? Where will you use this data? Let us know in the comments below!