3 ways to use the google_tag_manager JavaScript object


In this video, I’m going to show you three
ways how you can utilize the Google Tag Manager Object. All and more, coming up. Hey there measurers, Julian here back with
another video for you. Now, today, we want to talk about the Google
Tag Manager Object. If you are a bit more advanced in Google Tag
Manager implementations, you have probably utilize the data layer. This is our central repository for structured
data that we want to utilize with our tags and our triggers and our variables. And so we can make it available to Google
Tag Manager through the data layer. But there’s actually a step in between which
is not often talked about. And this is the internal data model of Google
Tag Manager. So once we push data into the data layer,
it actually gets stored inside of the internal data model, and then get pulled out by your
data layer variables or your triggers or your tags. And this is really the internal representation
of you’re structured data inside of Google Tag Manager. We can actually utilize this internal data
model for our tag deployments, but we would need to have a way to access it. And this is what we do with the Google Tag
Manager object. Now, how can this actually be useful this
internal data model? Today, I want to show you my three ways on
how I utilize this often for my tag deployments, speed up my workflow, and make other cool
stuff happen. Now without further ado, we got lots to cover. So let’s dive in. Welcome back to our demo shop. Now let’s take a look, first of all, at our
Google Tag Manager Object. We can access it by going into our developer
tools. In Google Chrome, for example, it would be
here and then navigating onto the console where we have access to the JavaScript runtime
environment where we can put in our commands. And we simply type Google_tag_manager. And this is the object that we’re talking
about. In order to access it, you will need to have
your GTM ID ready. Because it might be that they are different
objects for different containers. And we can access our container by the square
brackets, double quotes, and our GTM container ID, you press Enter. And here we can see all the different methods
that we have available. Take a look at the data layer, this is the
internal data model that you can access through this JavaScript object. All we need to do is write a dot and then
data layer. And from here, I’ll show you my first tip. So through the get method, we can actually
get any kind of value from the data layer without needing to create a data layer variable. So for example, on this page, it’s a product
page, we have our data layer here. And we can see, we have already some information
inside of the data layer. Now, if you would like to build a tag inside
of Google Tag Manager, and I have something prepared here already, where we want to send
over an event to Facebook and in that Facebook event, we want to send a track called to view
content. And I would like to have the actual product
name in here. Now obviously, I could look at my data layer
and then create a variable within Google Tag Manager data layer variable, and then go back
and input this with the two curly brackets. But what if I only wanted to use this variable
once and only for this tag? Since we are here already in the context of
JavaScript, as we hear a custom HTML tag, I could just use our Google Tag Manager object
to access this value. How would I do that? Well, just like a data layer variable, you
would need to put in your key for the data layer into the variable. And so I’m going to just write dot get here,
and then enter the variable key. In our case, that would be ecommerce dot detail
dot. And since this is a an array here that I can
see here in the square brackets, I will write zero and then name. And I can press Enter. And I can see if this was resolved. Unfortunately, I made a mistake here, too. So I forgot the product actually. Let’s go back here. And put this after detail. We have our product, and zero and name, and
we can see here we get the name. So this would actually be the code that runs
in the background if you would create a data layer variable. And so we could just use this code directly
in the environment of JavaScript right here and resolve it this way. Let’s try this out, save this, and refresh,
go back to our page, our tag fires. And we have our view content with our product
name, happy ninja. So this was correctly resolved and would work
also for the next product if we go over here. So really a fast way to use Google Tag Manager
object to not have to build a data layer variable, especially if you just use it once. Now, let’s move on to the second tip. What if you wanted to capture certain attributes
from a click. So if I click here on the Add to Cart button,
I get a GTM link, click already installed a click trigger. Now I would like to pick up a certain element
that lives in the background. Let’s take a look. If I go to inspect element here, we can see
that this link, this ahref has a data product ID which I would like to pull out as I don’t
have it in my data layer yet. Now how could I accomplish this? I wouldn’t be able to use some thing like
a DOM element variable, as this would only be evaluated once once the page loads. But every time a user clicks on an Add to
Cart button, I will like to reevaluate this based on what the user has clicked on. Luckily, the Google Tag Manager object lets
us access the data model within Google Tag Manager. And that would be possible again through the
data layer get variable. But this time, we want to get a built in variable,
which would be gtm.element. And here, we can always see what link was
last clicked on. So if I click here, again on Add to cart,
and I repeat this command, and by the way, I just press the up arrow to get the last
command back, press ENTER again, we now see that we always have the last value that is
currently written into the data layer to our disposal here within JavaScript. So this is great because every time somebody
clicks, I could write a little bit of a command to pull out the actual data product ID, how
would I do this? Well, we can just go over to Google Tag Manager
and build a custom JavaScript variable. So go over to new and build a custom JavaScript
variable, this custom JavaScript variable will be for our product ID. And custom JavaScript variable, we will need
an anonymous function that returns something. Now in between one to do an extraction of
the data. So we will pull our GTM element here. And then we want to do an operation on it,
which is pull out the data product ID. How would you do that? Well, we can utilize a command called dot
get attribute. And then in parentheses, our selector in this
case, data minus product underscore ID. And we can test it out all beforehand. And we get 50 back, this is what we wanted. So let’s go ahead and copy this. We actually don’t need to put it up here. But we can just simply return it right away,
just like that. Let’s save this and try it out. And every time I click on an Add to Cart button
here, we should see in our variables, the product ID being filled differently with each
GTM click. So now we could utilize this. In our tag, we already have a tag prepared,
this is the add to cart tag, where I’m sending off a Facebook event. And I would like to input our product ID this
time, we have it saved in a variable right here and have it available. By the way, even going back to the tip number
one, we could write the whole line in here without actually needing to build a variable
itself within the custom JavaScript variable, even cleaner, and even less assets inside
of your Google Tag Manager account. But if you would like to reuse this variable
in other tags, then you might want to put this into a variable and abstract that this
way. Let’s save this refresh. See what happens. And if Facebook receives the data, add to
cart and we have a new event here that is a click event and the product ID is 53. So really great use of the Google Tag Manager
object as well. Last but not least, I often use this when
I would like to utilize the matches CSS selector option. So if I would like to build a trigger to trigger
on the top here of the menu itself, I could obviously build different triggers for clothing,
hoodies, t-shirts, and so on. But to keep it as clean as possible, you might
want to utilize the matches CSS selector. What does that mean? Well, if we would like to fire this tag upon
our menu click, we will need to build a trigger a new click trigger for menu clicks. And that would be the all elements trigger. And then we only want to fire this when a
certain element. And in our case, that would be the click element
matches the CSS selector. Now, what do we fill into this matches css
selector and why we use the click element. Let’s check out our page again, I need to
save this I’m just gonna put in here one just for now. And refresh our preview and debug mode. So we can see the GTM element. Matches CSS selector only works on HTML elements. So if you have a GTM click here, and we go
to variables, we see that the click element just shows object HTML diff element. Doesn’t really matter where I click, I get
a new GTM click, and our click element gets filled with the actual object of the HTML
value. What is in the background of that? Let’s check it out inside of our Google Tag
Manager object, open up the developer tools again, go back to our command. And this time, I want to get to the GTM element. Here we go. We have just clicked here on the search. And therefore this is the element that would
be evaluated in terms of our trigger. We also have this available. If you click for example, on this image here,
or back again, each time the value gets pulled. And we have the GTM element available to us
to be evaluated in our trigger. Now the crucial part that we want to actually
look at is the menu up here. So I’m going to click on these and going to
press the up arrow, Enter. And here we get the last element which was
the t-shirt element. And if I right click on this, it will actually
let me reveal this element in the elements panel. And that will give me my elements panel up
here, where can see the HTML. Now a little trick in the dev tools is to
press the Escape key, which will underneath open up the console as well. So we’ll be able to look at and see how our
HTML will behave based on our input here. Now when we look back on to the HTML, we can
see that all of these elements right here are within and UL element with the ID menu
main. So this is what I would like to use as a CSS
selector to actually mark and try to capture all of these different elements that are beneath
this UL. For this, I will need to have the right CSS
selector that matches up to the elements beneath it. So let’s take a look at how we can do this. If we have the right GTM element here already,
we can simply use the matches command. And then, without quotation marks, we can
enter our CSS selector and see if it matches up. So here we have an ahref. So if you put just a in, you can see the matches
CSS selector would turn true in this instance. Now as I could choose any element here, let’s
choose this one, I get a new GTM element. And if I click here, and press A It would
also turn true. So that’s obviously not right, wanted to turn
true only if it’s up here in the navigation itself. So again, we will utilize our CSS skills to
make up a CSS selector that only matches up if the click element is actually a descendant
of the UL with the ID menu main. Let’s see if this works. No, it doesn’t for the image we have just
clicked. But let’s look for the hoodie. And we can see here it turns true. What about the albums? here it turns turn
again, and let’s do a negative test. Let’s click here and it turns false. So we have now a CSS selected if you can use
inside of our trigger. With that in mind, we can utilize this. Go over to Google Tag Manager, go back into
our clicks here and say we only want to fire this if the matches CSS selector. This term, it saved this refresh, go back
to our page, reload this. And now if I click on any element up here,
we have our GTM click, and our tag doesn’t fire. Go back here, or we haven’t actually connected
it to the tag itself. So let’s do that really quickly itself. When you click, refresh this, let’s go back
here. And now click on our menu, and we see the
GA event menu, click has fired. If you click on any other element, it doesn’t
fire. And now we have tagged with the help of the
CSS selector, all of these menu points up here, and the tag fires. So really another great way to use the Google
Tag Manager object to test your CSS selectors beforehand and make sure they are working. All right. So there you have it. This is how you can utilize the Google Tag
Manager object. Do you have any other use cases that you use
the Google Tag Manager option for oftentimes? I would love to hear from you in the comments
down below. And if you liked this video, why not give
us a thumbs up and also subscribe to our channel right over there because we bring you new
videos just like this one every week. Now my name is Julian. Happy measuring.

5 Comments

Add a Comment

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