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 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.
#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 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 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.
43 COMMENTS