June 19, 2017
3 Ways to Pull Data from Data Layer with Google Tag Manager
Data Layer is the foundation, which Google Tag Manager heavily relies on. It ensures maximum flexibility, portability, and ease of implementation. In my other blog post, I have explained how it works and how you can the most out of it. However, not all aspects were covered there. Since data can be saved using different structures, it should be accessed differently, as well. In today’s blog post, I’ll explain 3 ways how you should pull data from the data layer.
Although all three methods include Data Layer Variable that can be created in Google Tag Manager container, their settings will differ a bit.
If you have read my guide about GTM Preview and Debug mode, you already know that Data Layer tab is the most undervalued and totally untapped part of GTM debug console, which is forgotten by beginners and (especially) intermediate users.
This tab shows the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete.
In other words, you can see all data that is currently available in the data layer and what values were available after every Google Tag Manager event. And the best part: every data point (pushed to data layer) can be turned into a variable in Google Tag Manager.
#0. Before we continue: this topic is also thoroughly explained in the Intermediate GTM Course
In this blog post, you’ll take a glimpse at 3 data types in JavaScript: strings, objects, and arrays. However, if you want to dive a bit deeper and properly understand how they work in GTM, enroll in my Intermediate Google Tag Manager course.
#1. Accessing first-level keys
You’re probably asking why did I call them “first-level keys”? I’ll explain that at the end of this chapter.
For my WordPress blog I’m using DuracellTomi’s GTM plugin, which is pushing some keys and values with each page load:
- Key: pagePostType, value: post
- Key: pagePostType2, value: single-post
- Key: pageCategory, value: google-tag-manager-tips
- Key: pagePostAuthor, value: Julius Fedorovicius
See the screenshot below.
With help of Google Tag Manager, I can easily turn each one of them into data layer variables and re-use them in other tags.
Say, you want to send a Google Analytics event when someone leaves a comment. With every event, you also want to push article author’s full name. This way you’ll see which authors drive the highest reader engagement.
In this example, I will not go into details how to create a tag, as I will only demonstrate how to pull data from data layer and turn it into a variable (within Google Tag Manager).
In Google Tag Manager account, you should go to Variables and create a new one with the following settings (dlv stands for data layer variable):
That’s it! Save this variable, refresh Preview and Debug (P&D) mode, and refresh the website you’re working on. You should then see your newly created variable in Variables tab of P&D console.
Oh, I almost forgot. You’re probably still thinking, why did I call it “First-level key”. Well, that’s because all those 4 keys have no parent keys. Let me illustrate. Here’s the example where the key is on the first level.
|
1 2 3 |
{ pagePostAuthor: 'Julius Fedorovicius' } |
And here’s 2nd level key, because pagePostAuthor is a descendant of attributes key:
|
1 2 3 4 5 |
{ attributes: { pagePostAuthor: 'Julius Fedorovicius' } } |
In the next chapter, I’ll explain how you can pull data from the data layer if the key is not on the first level.
#2. Pull the data from child keys
Let’s try to put this as non-technical as possible: when keys are descendants of other keys, they are called child keys (to be honest, I’ve found various terms on this one, but child key sounds the most comprehensible for non-developers). In the example below, you can see that attributes are in the first level and pagePostAuthor is in the 2nd.
|
1 2 3 4 5 |
{ attributes: { pagePostAuthor: 'Julius Fedorovicius' } } |
In order to pull its value, you should slightly change one setting in a variable (within Google Tag Manager). Instead of pagePostAuthor, you should enter attributes.pagePostAuthor as Data Layer Variable Name.
What if pagePostAuthor also had a child key? What would you do?
|
1 2 3 4 5 6 7 |
{ attributes: { pagePostAuthor: 'Julius Fedorovicius': { someOtherKey: 'example' } } } |
That’s right. You should define the full path to that particular key: attributes.pagePostAuthor.someOtherKey, and so on… and so on… Every level should be separated by a dot.
Accessing child keys in the data layer is pretty common. When someone asks me to give an example, I always tell them about AJAX listener which helps to track AJAX form submissions.
In my blog post, Google Tag Manager AJAX form tracking, I’ve explained how to use AJAX listener (by Lunametrics). It listens to all AJAX requests and pushes their data to the data layer. Here’s an example:
There are a lot of nested keys. In order to pull data from data layer, you’ll need to use dot notation in data layer variable’s settings, e.g. attributes.response.
#3. Pull the data from array members
I was working with a developer on the implementation of Google Analytics Ecommerce tracking (standard, not enhanced). Following Google’s guidelines, I asked a developer to push successful order’s data to the data layer. Then, I could fetch that event (and its data) via Transaction tag within Google Tag Manager.
It’s very important that the developer follows guidelines and pushes data using the structure as instructed by Google. Here’s the official example from their knowledge base:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'transactionId': '1234', 'transactionAffiliation': 'Acme Clothing', 'transactionTotal': 38.26, 'transactionTax': 1.29, 'transactionShipping': 5, 'transactionProducts': [{ 'sku': 'DD44', 'name': 'T-Shirt', 'category': 'Apparel', 'price': 11.99, 'quantity': 1 },{ 'sku': 'AA1243544', 'name': 'Socks', 'category': 'Apparel', 'price': 9.99, 'quantity': 2 }] }); </script> |
“You know what?”, I asked myself, “This is very useful information”. I’d also want to push this order data to other marketing tools I’m using at Soundest (e.g. Facebook Pixel). I was mostly interested in price, name, and quantity.
So I tried Method #2 (from this blog post) and failed. I used transactionProducts.price, transactionProducts.name, etc., but my newly created data layer variables always returned undefined. So what’s wrong?
Notice anything suspicious? In my Standard Ecommerce example (taken from Google Knowledge Base), transactionProducts has 2 name keys, 2 price keys, etc.. So how the heck can Google Tag Manager know which value I am interested in? The first or the second one? And what would happen if a user purchased 5 products?
What we are dealing here with is called arrays. transactionProducts has an array containing two products with the same collections of keys: sku, name, category, price, quantity.
In Javascript, if you want to pull the value of first product’s price, you’d need to use transactionProducts[0].price (the index starts from 0), but Google Tag Manager does not support square brackets in this context, so you’d need to use dot notation, like this: transactionProducts.0.price.
In Google Tag Manager, your data layer variable should look like this:
If there were 5 products in the array and you wanted to access the price of the 5th product, Data Layer Variable name should be transactionProducts.4.price. Remember, the index here starts from zero, so the first product is actually not the 1st, but 0th.
Conclusion
Since data can be saved using different structures, it should be accessed differently, as well.
Now, you know how to pull data from the data layer in 3 different ways. Although they all use the same Data Layer Variable, their names are different which depend on the data structure – arrays, nested keys or single (first-level) keys.
51 COMMENTS
This article is helpful but it leaves me wondering how to actually handle ecommerce transactions which typically have a variable number of products. In your example, you have an array of 2 products. However, there's no way of knowing in advance how many products will be in the cart. Depending on what you're selling, customer's might have dozens of products in the cart. How are we supposed to handle that in GTM?? How many variables should we create? I mean is it really realistic to pre-define transactionProducts.0.price through transactionProducts.99.price to cover 100 products per order? And of course, you'd have to do the same for every other attribute of the product. Your developer is able to simply loop through the transaction and add any number of products to the data layer without hardcoding array space for them ahead of time. But there's no way to do that in GTM, is there?
Hey, if you just want to transfer transaction data from the Data Layer to Google Analytics (via GTM), you do not need to create Data Layer variables. Just go to "More settings" in UA Tag, enable Enhanced Ecommerce and tick "Use Data Layer" checkbox.
This way GTM will handle all the transaction data from the Data Layer without utilizing actual DL variables. But in order for this to work, you need to strictly follow Google's Enhanced Ecommerce implementation guide and use the required data structure.
Hi - follow up question. How would you set the variable to get the list of all skus purchased which are in an array in the data layer? For example:
transactionProducts
:
Array(3)
0
:
{sku: "1234", name: "product 1", price: "2.99", quantity: "1"}
1
:
{sku: "5678", name: "product 2", price: "5.99", quantity: "1"}
2
:
{sku: "9012", name: "product 3", price: "8.49", quantity: "2"}
From the above array, I would want to get each sku value and have it return together as the value of the variable. So something like "1234|5678|9012"
Is there any way to do that?
I would use a Custom JavaScript variable, but since I'm not very efficient with JS, I'd ask a developer to write me one.
Hi,
I am facing the same issue. Can you elaborate this?
How to use custom javascript variable to access the multiple data from a single array?
Hello,
@CHIP asked an intresting question.
If we have more than 1 item and we'd like to see the price value on AdWords and not Analytics.
What should I put in the DataLayer variable?
Nothing. You need to write custom JavaScript code which sums both prices. That code must be added to the Custom JavaScript variable.
Should I add then the "totalprice" to the datalayer script and put it in the DataLayer variable as: purchase.0.totalprice ?
It depends on how you store it in the dataLayer. Might be just "totalprice"
Or "purchase.0.totalprice".
This guide has already explained different data structures.
All that data also need for Facebook Catalog, any way to pass whole array?
Yeah, you need to know JavaScript well. Unfortunately, I don't have a script for that.
Hi Julius,
What if I have an array of data that is not ecommerce data and still want to pass an arbitrary number of occurrences on a page to GA by using GTM?
It could be titles and authors of articles on a page.
'articles': [{
'title': 'Good news ',
'author': 'D Duck'
},{
'key1: 'Better news',
'key2': 'Ducked'
}]
Best Regards
Anders
Key 1 and 2 are of course 'title' and 'author'.
Hey, it does not matter whether the data is E-commerce or not. An array is always an array. You should still use the method #3 of this blog post in order to access array members.
Hi, thanks for your reply. What in your opinion is the most efficient way to pass the entire set of data within the array to GA? Custom Dimensions and Metrics?
Cheers
Depends on what you want to achieve. I'd need a bit more descriptive example in order to understand your needs.
Julius, thank you for these posts. I am able using example 2 ( google tag manager ajax form tracking ) and the ajax listener to pull the data I need but I do not know how to display the data in my Analytics report. The data I am pulling is a Zip Code entered into a input field, I am stuck at the last step that should be trigger but none of the options seem correct
Hey,
1. Zip code is a Personally Identifiable Information (PII) which cannot be stored in Google Analytics. In 2011 a California State Supreme court ruled that Zip code is a PII. If Google notices that you're sending it, your account will be banned. Learn more how to avoid storing PII https://support.google.com/analytics/answer/6366371?hl=en.
2. After you pull the data from the data layer (by creating Data Layer variables), just enter them in Universal Analytics Event tag's fields (e.g. Event Action or Event Label). In those fields, variable must be surrounded by curly brackets {{variableName}}.
3. If you wish to pull the value from web form's input field, Lunametrics have published a tutorial https://www.lunametrics.com/blog/2016/09/22/tracking-form-field-values-google-tag-manager/
Hello,
great post.
I have a question: what if I want to go one level up, instead that down (child)?
For example developers are pushing an event in Data Layer called "test" with following structure:
{
product_id : '1234',
category: 'toys'
}
I will have to create two data Layer variables called product_id and category. This is quite a manual/long/error prone process for events with a lot of variables, and also I think there could be the risk of getting confused if another variable called 'category' is created in another event which fires on the same page.
So my question is, can you access the 'parent' level variable called 'test' (the name of the event itself), and then use test.product_id and test.category ?
I guess one could ask the developers to send the event with an alternative structure like:
{
test : [
{product_id : '1234'},
{category: 'toys'}]
}
But I'm not sure is this is bad and it sounds like a hack/short cut.
Is there a best practice or recommendation to follow, or are we supposed to created a variable for each element of a Data Layer event?
Thanks
Hello.
Thank you por your post. Nice information.
I have a doubt: can I create a dataLayer inside the Google Tag Manager? for example place the code of the dataLayer inside a custom HTML tag.
Is any way to do that?
In other words create the datalayer without touching the code.
Thank you
When GTM loads, it automatically creates a data layer. If you want to push some data into it, ]you can use window.dataLayer.push method to do that (with Custom HTML tag). I've described how Data Layer works in detail here https://www.analyticsmania.com/post/ultimate-google-tag-manager-data-layer-tutorial/.
You'll also find how to push data to the data layer.
Hi, i have one question: i push event from GTM custom html tag. Is there a way to make the GTM dataLayer variable that is picking value from this event get the updated value? Right now the custom event is fired from this tag on form submit, there is no page reload and it's after window loaded, so the datalayer variable will be undefined. Is there any way to solve this using dataLayer variable? Or the easiest is just to use JS variable?
Data Layer Variable will start returning some value only when that information is pushed to the Data Layer.
>Right now the custom event is fired from this tag on form submit, there is no page reload and it's after window loaded, so the datalayer variable will be undefined.
If you push an "event" key and some custom parameters to the Data Layer, those custom parameters can be retrieved with the Data Layer variables. Just include the "event" key in the dataLayer.push
Hi Julius,
Thanks for writing this blog. It's super useful for non-technical people like myself. I have a question.
How do I pull out "option in actionField" variable from
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
Is that "ecommerce.checkout.actionField.option" or "ecommerce.checkout.actionField.0.option"?
Hey, it's ecommerce.checkout.actionField.option because actionField is an object, not an array. Arrays are surrounded by brackets [], objects are surrounded by curly brackets {}.
The best way to find out for you in the future is to check it in the Preview and Debug mode. Create a Data Layer Variable, refresh preview mode and go to the website where that dataLayer.push occurs. If variable's value is undefined, something's wrong. If you see the correct value, then you did everything correctly.
Hey Julius, nice article! Really difficult to find useful articles.
But there is one question:
The used "dataLayer.push({ 'transactionId'..." isn´t the right one for enhanced ecommerce tracking, or? ususal my DataLayer looks different and ist not only based on the basic transaction. In one project i have seen a tansaction tag, which is running because of the datalayer u are using too. But at the Checkout Behaviour Analysis i see the steps which i have defined via gtm, but at the last point no transaction. I hope u know what i mean ;)
Hey, that snippet is supported only in the Standard Ecommerce. Enhance Ecommerce require totally different implementation and codes pushed to the data layer. You need to push "purchase" event. Here's a guide I always recommend to read https://canonicalized.com/enhanced-ecommerce-tag-manager/.
I like this web site very much so much wonderful information.
{
"@context": "http://schema.org/",
"@type": "Product",
"image": "",
"name": "{{ProductName}}",
"description": "{{ProductDesc}}",
"brand": {
"@type": "Thing",
"name": "LifeStyle"
},
"offers": [{
"@type": "AggregateOffer",
"lowPrice": 12.90,
"highPrice": 34.90,
"priceCurrency": "SGD",
"availability": "InStock",
"itemCondition": "NewCondition",
"availableAtOrFrom": [{
"@type": "Place",
"name": "India",
"address": {
"@type": "PostalAddress",
"postalCode": "12345",
"streetAddress": "62City"
}
},{
"@type" : "Place",
"name": "USA",
"address": {
"@type": "PostalAddress",
"postalCode": "123456",
"streetAddress": "Compass"
}
}
]
}]
}
i want to get data from availableAtOrFrom but its showing undefined please help me to get data using GTM
In my data Layer i am getting all related information but in tag its showing undefined, how can i show that information
Maybe you try to fire this tag on "All pages" trigger but that dataLayer data is pushed to the dataLayer only after DOM Ready or any other subsequent event?
No, i applied only for one page even selected one page option in trigger
Post here a link to your shared preview and debug mode and I'll check what's wrong.
https://www.googletagmanager.com/start_preview/gtm?uiv2&id=GTM-56W4N4V>m_auth=soUBug1dWwDHblU1nq9bbA>m_preview=env-6>m_debug=x&url=https://ps-dev-web.ntuclink.cloud/
You send the JSONLD tag one All pages trigger (Pageview event) but the data is pushed to the Data Layer after DOM ready. This means that you receive that data too late. Solution: Ask a developer to add the dataLayer.push with that custom data above the GTM container code.
Good article, and really a bridge to go from simple data layer usage ecomm for me ... However, what would be the best and easiest way to fill the datalayer with all this data ? I don't think that duraceltomi's plugin goes this far ...
Hey, you'll need to cooperate with a developer to have that custom data in the Data Layer.
Thanks ... actually, I found out that gtm4wp does populate the data layer with the complete e-commerce data ... it's a beta feature, but it works great ...
Good article, and really a bridge to go from simple data layer usage ecomm for me ... However, what would be the best and easiest way to fill the datalayer with all this data ? I don't think that duraceltomi's plugin goes this far ... ...
Hey, the easiest way is to either use a plugin (so for WP it is still the duracelltomi's plugin) or to ask a developer to push some needed data to the Data Layer.
Exactly what I needed, thanks!
Hi Julius,
thank you for this updated content. I have a question, I have implemented everything as above. Now I have a simple problem, I can't seem to resolve. How do I actually see these data layer variables in analytics?
Do you have an article you could refer me to.
Thank you
John
You need to insert those variables in your GA tags. Here's a general guide where one of the chapters explains how to insert variables in various tags.
Brilliant. I was really struggling with a new tag but your explanation about child keys solved the problem.
Thank you!
Thanks Julius, Learned a lot from your blog. Keep up the good work.
Julius this is brilliant! Suppose I don't want to push the data into GA, but into a Google Sheet spreadsheet. What setup would I use to push that from GTM to that spreadsheet? Any thoughts or articles?
It would much more reliable if you just asked developers to push the data from your server to zapier that is connected to google sheets (and avoid GTN here). Or maybe utilize google appscript. Unfortunately, I'm not that experienced here so I cannot give you a more precise advice.
Thanks for this useful information.
Can you tell me how can I scrap the image URL from the source page?
like
How can I pick an image URL with a variable so that I can add it into the review schema to complete my product review element?
I try to pick and successfully complete the task(FROm DOM element with CSS selector) but when I add the variable in the schema markup, it shows me URL with Extra slash for example; https/\example.com/\image.png
I'm don't know where I'm doing the mistake. thanks
Thank you very much Julius for your useful blogposts. I follow and advice your content.
Hi, thank you for your reply. It's all clear to me. the funny fact that it actually works fine. I didn't change anything, it seems like there was an issue in preview, once relaunched it worked ok.