April 6, 2020
How to use a dataLayer variable to pull data from the GTM dataLayer [Quick Tip]

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


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 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’s 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
authorvariable 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 a 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

10 thoughts on “How to use a dataLayer variable to pull data from the GTM dataLayer [Quick Tip]

  1. Thank you Julian for the enlightening tips! i would like to know how the data layer push in variable values is it by a java script right but does the java script pull out this value from the cms? just want to know the technical process and the chain that's going on. it makes it easy to master analytics once you got a granular idea on how's things going from the starting point.

  2. Hi Julian, great value as usual! I've stumbled upon a little problem and was hoping you could give me some pointers. At first i'd just put 'revenue' for the transaction total which obviously wasn't working (instructions from old vid), luckily I stumbled upon this one. Now when I finish an order in the testarea of GTM the variable finally gets loaded correctly. The FB purchase event also get fired.

    However when I move into diagnostics of Facebook business manager it says the parameter of value is undefined. Ive tried switching up between '{{dlv-transactiontotal}}' and {{dlv-transactiontotal}}, which gave no different results. Hopefully you can help me out! Thanks

  3. Hi Julian. Great video. Super Helpful! A few curious questions – Is there a way to add up the product price for all products in the cart? Say from 0-100 or something of that nature? If not is there a way to subtract Shipping and Tax from Revenue? Thanks in advance!

  4. Hello Julian thanks for your wonderful video , We want to get the dynamic values for below defined dataLayer window.dataLayerLocalAnalytics=window.dataLayer || [];

    window.dataLayerLocalAnalytics.push({

    'language': pageLanguage,

    'title': title,

    'loggedin':pagePath

    }); . We are able to get the dynamic values for language , title and looged in in developer console but if we use the same path in GTM dataLayer variable we are unable to get it . We used path to get values for title like dataLayerLocalAnalytics[0].title , dataLayerLocalAnalytics.0.title nothing works can you please help here. Quick reply is much appreciated.

  5. hi Julian, I am started receiving data in date layer but not getting it in tag manager can you help i thing more when i put static values in data layer variables data are reflecting in google analytics but not when data in dynamic

  6. Maybe an easier way to get the path from the "Chrome" Developer Console would be to find your nested targeted object and right click and then select "Copy property path". With a big note of this will not work in Firefox. The back and forth between GTM and Dev Tools seems way too tedious.

Leave a Reply

Your email address will not be published. Required fields are marked *