How to use a dataLayer variable to pull data from the GTM dataLayer [Quick Tip]

If you have GTM dataLayer on your website you can extract data from it and make it available in a Variable in Google Tag Manager.
In this video, let’s look out how we can utilize the data layer variable to pull out values from a data layer by knowing the key and the nested values.

🔗 Links:

DataLayer: https://support.google.com/tagmanager/answer/6164391?hl=en

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

Hey, there measure geeks. Julian here. Back with another quick tip video. Today, we want to talk about how you can pull out data from the data layer variable. Now, if you’re familiar with data layers, you know, you can push them in the background of a page and they look a little bit something like this in terms of the code so the user wouldn’t see a data layer push actually happening. But this data is now available within the data layer which is Google Tag Manager’s central repository of structured data. And we can send information into the data layer by different methods. Once they are in the data layer, you should be able to see that information in different ways. So for example, if you have the preview and debug mode open if you go to the data layer, you should see the information that was pushed into the data layer here under the data layer tab. You should also be able to see a push, depending on how it was pushed in the developer tools under elements.

Let’s look here for data layer, we have different data layers here. And here we go. This is the formation that we pushed earlier on this page. Actually, it’s here. And so you should also be able to see it in the console. If you simply type in data capital layer. In here, we open up the data layer array. And here we have our different objects. Now each object has key and then value pairs. So you always have this pair of a key, which in this case, would be event. And the value, in this case, would be blog post view. Now what if you wanted to pull out one or the other value from the data layer and make it available to your tags or your triggers, you would need to utilize a data layer variable. For that, you will need to know the key in order to pull out the value in our case it would be the author, and we should be able to pull out the value of admin. So let’s go over to Google Tag Manager on the variables, we simply going to build a new data layer variable, I’m going to name this with pretending DMV, and then my data layer would be for the author.

And now I’m going to go into the configurations and choose data layer variable. And here I will put in the data layer variable key. It actually says name here. But I find this a little bit confusing. I would rather remember this as key. And this key needs to be corresponding to whatever we have in the data layer as this first key that is tied to our value. So in our case, it would be author. And we can put in different configurations. You don’t really need to care about those unless you have a specific reason for it. Let’s go ahead and save and try this all up. We’re just going to refresh our previous debug mode, and then go back to our page. Reload that. And now under variables, we should be able to see our key. Now it’s always important variables are resolved based on these events. And the events are really like little checkpoints that you have on the page. So if you want to utilize your variable, your author variable upon page view, you would see that this is still undefined. On the second event here, we would see that now the dlv author is actually filled and it will stay filled unless it’s overwritten by the later events.

So if you would like to use this later in a trigger or a tag, be sure to fire it on the right event. So your data layer variable gets filled. Now it’s as easy as that, you will just need to know the right key, and then input that in your data layer variable to pull data out. But not all the data layers look like this. This is a pretty flat data layer. So you will just have a key and then a value. But you can actually nest these data layers within each other. So here we for example, have the GTM key which holds an object and I can see this in these curly brackets. And within this object, there is another key value pair. You might be familiar with a data layer that comes from an order received page, for example. Here we have the enhanced ecommerce tracking data layer. And this is pretty nested already. So we have our data layer object of first one, then we have within that our data layer ecommerce within ecommerce. Within that we have another data layer object, and then we have different keys. And within that, again, data layer object. A little bit hard to read within the preview and debug mode. So let’s open up our JavaScript console here.

And I’m going to look into the data layer by simply inputting again data layer, so we have four objects right now. And we want to look at this ecommerce which is up here. So we have this triangle which we can click on to open up. And here we can see the nesting pretty well at work. We have an ecommerce data layer object and we can open that up. We have within that a currency code and a purchase. Within the purchase, we have an action field within the actual field, we have, for example, the order ID in this case, it would be 309. If we wanted to pull out this 309, it would not be enough to just know the key here, the ID. We would actually need to utilize a special notation which is the dot notation. In order for Google Tag Manager to go down the tree and find the ID within our object. What would this dot notation look like? Or if you hover over it, you already see here, ecommerce purchase action field ID. And in between those days I was a dot. And this is exactly what we would need to write into our data layer variable if you wanted to pull out the order ID. So let’s try this out. Let’s go over two variables and build a new data layer variable for order ID.

And we go again to data layer variable. And we’ll start out with our first object here which was ecommerce. And I will separate this with a dot further into this ecommerce object, which the next object would be purchase. dot and here again, action field. And here we get to our ID. So we’ll put this one in here as well.

Let’s test this all out, Save and refresh, I’m going to reload this page, unfortunately, I will need to go through another another order right here. And here we go get to the next order receipt page. And if I click on the right event here, let’s go with the page view and I go to variables, you should be able to see now our dlv order ID was filled with our 315, which should be our new order ID that we can see right here. So it pulled out the right ID by using the dot notation to get into the nested values of this data layer object. Now, there is one last specialty about these nested object you might encounter that you want to pull out a value from a key pair that is actually inside of an array. What is an array? In JavaScript terms, it’s simply a list that is marked by these square brackets. So depending on how many products I bought here, so we have exactly two products, we should have a list of two products with some information in there. And here we go. If we had three products bought or have four products bought, this list would obviously get longer.

Now, you will need to tell Google Tag Manager explicitly that you want to pull data from the first product or the second product. So for example, if you wanted to get the product price here, we would need to access this array. And this would be done again with the dot notation. But this time, we will use numbers in order to find the right member of this array. Let’s try this first out in inside of our developer tools. Under console, I’m going to put in data layer again and go to our ecommerce object. We’re going to click once and then purchase, then we get to product. And here you can already see this special notation here. If I click on those, we have these numbers up here zero and one. And this is how our area is actually counted the first numbers zero, the second number is one. So if I wanted to get the product price for this first product, I would need to use the dot notation with zero and then our price key. So let’s try this out. Go again into our data layer variables, create a new one, product price of product number one and go with the data layer variable. Put in the same thing again, it begins with ecommerce dot purchase dot product this time.

And then as with the dot notation, we’re going to go into the first product which is zero and get to our price. See if I didn’t make any mistake, that should do it. Yes, save this and refresh. And I’m going to go through another order here.

And we get to our order receipt page. Our happy ninja one is the price is $35. So now if I go to the variables, if you done everything correct should see our $35 right here. It pulled it out out of the data layer for this first product. Obviously, you will need to repeat this for your different other products if you want to pull out the price of those. And that’s already with our little quick tip video. You now know how to utilize data layer variable to pull out values from a data layer by simply knowing about the key and then the nested values that might be within the data layer and how to structure your key in order to find the right product within a nested data layer.

Hey there it’s me again. Thanks for checking out our quick the video. Was that helpful? Did you understand something not quite? Then I’d love to hear from you in the comments down below. But if you liked it, then why not give us a thumbs up and subscribe to our channel right over there because we bring you new videos just like this one every week. Now my name is Julian, til next time

SHOW MORE...

Leave a Comment

avatar
 
smilegrinwinkmrgreenneutraltwistedarrowshockunamusedcooleviloopsrazzrollcryeeklolmadsadexclamationquestionideahmmbegwhewchucklesillyenvyshutmouth