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

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

Is an installation of GTM on Shopify possible? In this video, we are going to explore options. Shopify is mainly closed-sourced so it’s not as easy to implement third-party tracking tools such as GTM.

Shopify Plus: https://www.shopify.com/plus
Shopify-GTM implentations: https://ecommerce.shopify.com/c/ecommerce-discussion/t/google-tag-manager-260275

GTM Ressource Guide: https://old.measureschool.com/guide
Free Email Course: https://old.measureschool.com/emailcourse
Courses: https://old.measureschool.com/products

FOLLOW US:
http://www.facebook.com/measureschool
Tweets by measureschool

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

So you want to install Google tag manager on your Shopify store, well in this video I’m going to show you how you can place the GTM snippet on all your pages including the check out pages of your Shopify store coming up right after this. Today, our journey starts in a Shopify store where we want to install Google tag manager on all Pages. Now in order to make sure this all actually works we would need to check the actual no more pages the homepage for example the product pages but then everything through the cops and through the checkout now the official Shopify documentation says you can install Google tag manager via the theme code editor. So in your back end that would be under your online store, themes, we can go to actions and edit HTML/CSS. Specifically we are looking at the theme.liquid file. This is where you would place the snippet. Now you can find the snippet of Google Tag Manager once you have opened up an account by clicking up here on the GTM ID. This will prompt you with the 2 snippets you should install Snippets that you should install the head section on the body section The HTML of your Shopify store so that would be one time here in the head section and one time in the body section manager would not be installed on all the pages namely the checkout Pages. Now in the documentation it says that you should place your code in a checkout.liquid file , but this is actually not available to normal Shopify uses only to Shopify Plus users.So I’ve come up with a little work around and that would look like this. So we would take the body portion of the tag, the no-script portion, copy that and go over to your theme.liquid file on Shopify and go down to the body section and place that right after the opening body tag. Let’s save this.

And for the head section we won’t use this integration we would actually go over to the preferences and here we can enter custom JavaScript to add to our Google Analytics code so let’s click on this and enter our head code right here, copy that and enter that here. Now this is already surrounded by Script tags as you see so no HTML allowed. So we will get rid of the script tags at the beginning and the end and we are left with just the script tag and we can save this.Go over to our store, reload, now we can see all ready and in our tag assistant for Google Chrome that we have Google tag manager installed. Another easy way to see if GTM is installed on all the pages is by entering the preview and debug mode. So now we are in the preview and debug mode and let’s refresh this page and we can see that Google tag manager is on this page. So let’s check our other Pages. We are going to the homepage, the product pages and each time we see that the console opens so Google tag manager is installed. Let’s checkout, also on the checkout page it’s installed. Let’s check out and you see Google tag manager is installed on all the pages including the checkout pages and thank you page.

Now, I must warn you that there a downside because you wouldn’t install the actual no script tag on the checkout pages with this work around. You would only install the head tag on the checkout pages. So if you go to the checkout page and open the source here. You find the head code but not the no script tag. That would only be installed on all the other Pages. Now what does the no-script tag actually do? It is for browsers do not have JavaScript enabled. In my experience that is a very rare case so the tracking difference would be very low or negligible so I wouldn’t worry about it too much. The other thing I would recommend is not to install Google analytics through Google tag manager because Shopify already has a very good direct integration with Google analytics and we can also use the enhanced eCommerce tracking features which wouldn’t necessarily work if you deployed Google analytics through Google tag manager because you would need to set up very specific data layers for this to work. But other than that you can go ahead and add your tags to your Google tag manager account and I think it’s very wise to do for any retargeting or conversion tracking or any other marketing tags that you want to deploy. It would make a lot of the tracking much easier to handle with Shopify stores. Now don’t forget if you’re ready to set this live for all your website users we have to publish all changes and it will go live to all your users.So now you have Google tag manager installed on all your pages on Shopify. So there you have it, this how you can install Google tag manager on your Shopify store completely if you want to see a few more examples on how to implement tags with Google tag manager on a Shopify store then leave us a comment down below and subscribe to the channel because we bring you new videos like this one every week now my name is Julian till next time.