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.