- JavaScript is the language that Google Tag Manager
is based on.
And therefore, really cool to know
if you are working in GTM.
So if you wanna be more effective,
work more safely, and faster in GTM,
you should definitely know these five JavaScript commands
that I'm about to show you.
Let's dive in.
All right, to get started,
we want to look at a very simple command
that you should definitely know
inside of Google Tag Manager,
and it's called data layer.
Now, let's say a friend sends you a website and says,
"My tracking doesn't work."
You know that the data layer
is the basis of Google Tag Manager,
and often the values that you find inside of the data layer
make up all the tracking that is later happening.
So, the first step to check a tracking deployment
is to actually look at the data layer.
But what if you don't have access to the Tag Assistant
or don't wanna go through the hassle of logging in
and so on?
Well, you can quickly go to a website,
open up the developer tools,
which you can do with a shortcut.
Or up here, you can click on More Tools
and then your Developer Tools right here.
And I'll put this to the side.
Enter a little command called dataLayer.
It needs to be with the capital L
and small D at the beginning.
And then, you can look into what is in the data layer
which information do we have here.
Do we have the right information for the tracking
that needs to happen?
So when I add to cart,
do I have add to cart information in here
or we actually need to update this
after we have done an action.
So, all I can do is press the up arrow here.
And we see we have now seven things
inside of the data layer,
and one of them is the add to cart.
So, the information is there
and we could troubleshoot even further
or end the story right there,
because the data layer is not set up.
So if you need a quick way to check the data layer
without extensions, without the Tag Assistant,
just type in dataLayer to your JavaScript console.
Now, the next command that you should definitely know
when you're working in Google Tag Manager with JavaScript
is the dataLayer.push.
Now, dataLayer.push is a special command
that is attached to the data layer,
and it fills the data layer with information.
So, you need to definitely know how to use this
because the dataLayer.push uses, as an argument, an object
with a key and a value.
Press Enter,
and it will be pushed to the dataLayer.
If we look into the dataLayer again,
we now see our key value pair here inside of the dataLayer,
and you could use it in our tracking as well.
Now, where would a command like this
be useful to actually know?
Well, if you want to build a data layer
and push custom information into the data layer,
you definitely need to know how to write a data layer.
There's a lot of specifics about how to write a data layer
and how to design it, but this command can be perfect
if you just want to try out your tracking.
If you have already built tags
that listen to a certain data layer event, for example,
like purchase, you can simply go in here
and say that our key is the event.
And then, we put this as purchase, press Enter.
And then in our Tag Assistant,
we should see our purchase right here
with the information that was pushed.
So, we can try out data layer pushes beforehand.
Especially when you are seeing a data layer online
and you want to, for example, install
something like the purchase checking here.
You can look at this and try this out beforehand
by copying the command,
and then simply filling it into the JavaScript Console
and seeing how this now affects your data layer
and what you get as a message, for example,
if you wanna change anything around.
Or if you might have a data layer just like this one,
gonna copy this and put this in.
You might see
that there is an unexpected error that happened,
something inside of the data layer isn't right.
And you will be able to correct your mistake
before you send it to the developer.
So in our case here, you can actually look this up.
And we see right here in this line, there's an error.
The error actually happens in the line beforehand.
There was a comma that was forgotten
inside of the data layer and the whole thing fails.
So in order to fix this,
we could go in and write this again.
And then, let's look where the arrow is right here.
Put in the comma and voila, now it works.
And it's very handy to know
about this dataLayer.push functionality
in order to design your own data layers.
Try out data layer syntax
before you give it over to a developer
and find errors this way.
Next up, we have the query selector method.
Now, this is a method that is very important
for Google Tag Manager,
because it lets us select certain things on the page
that is an elements on the page,
but we need a little bit of background of CSS
in order to know how to select an element.
But once you know a little bit of CSS,
it shouldn't be hard to utilize this selector method.
So let's say you wanna get the price from this page,
you can always right-click and go to inspect element.
Now, this is actually what the query selector already does.
It finds an element on the page and looks,
and returns it to you
so you can do further operations on it.
So in our case, here we have 18
and it is woocommerce-Price-currencySymbol.
Here is the price class.
So, we see how it's marked up down here.
We also have an indication of how it's actually marked up
and we can now utilize the query selector
to test our CSS selector.
So, we can transfer it over to Google Tag Manager.
So for example,
we could go in here and just get rid of this.
And we can write document.querySelector.
And then in parentheses and quotation marks,
we can enter our CSS selector.
Now, again, this takes a little bit of knowledge of CSS.
In our case, here we have a class called price.
So, we can put in price.
Press Enter, and it will give us this class back
which is the price itself
but with the dollar signs and so on.
So, maybe we can go even deeper here.
Go into the span and then bdi.
So, let's do that.
We go into the span and then bdi.
And then, we only get our 18 right here,
which we can pull out, for example,
the text content later on.
Where is this actually useful?
This is the CSS selector that now you can use
in different places inside of GTM.
Now that we have tested it
and know what it actually selects,
we can go over to Google Tag Manager.
And for example, build something
that will pull out exactly that text
by going into the user defined variables
and creating a DOM Element variable.
The DOM Element variable takes an ID or a CSS selector.
Exactly that.
So, the query selector is what we want to enter here.
And we can give this all a name
and then have that in there.
Also, we have a trigger available
that use uses CSS selector.
So, you might have heard of the element visibility trigger
that has a selection method because you need to run it
on a specific HTML element.
And we can put in the element selector here.
Again, this needs to be a CSS selector
that is exactly what Google Tag Manager
will use, the query selector method,
in order to find your elements selection.
And then also, inside of the filters
that you have inside of your triggers,
you have the option here to use matches CSS selector.
And here again, you can use the query selector method
that we have discovered.
So before I use any of these methods,
I always go in and utilize this on the document note.
So document.querySelector,
and I test out what are the actual CSS selectors
that will bring me my desired result
in order to fill my variables, my triggers.
Or even inside of my tags,
I can utilize this query selector methods.
So, it's very important to know this as a GTM user.
Next up, the Google Tag Manager object.
We did a full video on this one already,
but where I find it particularly useful
is when we are looking again at the data layer.
Now earlier, I told you,
you can use utilize the dataLayer command,
and that will give you your data layer.
But this is actually not the internal model
of Google Tag Manager, because this is an object
on the page itself.
Google Tag Manager has an internal representation
of the data layer, as we might know it.
And to that we have, for example, variables
which can be differently than the data layer itself.
So when you want to access the internal data model
of Google Tag Manager with JavaScript,
you utilize a command
called google_tag
_manager
And then in the square brackets,
you need to set up your GTM ID
that you usually have up here right here.
You can also do on the page itself.
If you start the square bracket,
it will already give you a suggestion of what it found
in the namespace.
So, you can just press the right arrow
and it will autofill it.
And then, you are accessing the internal data model
of Google Tag Manager.
What we can do here is multifold.
But what I find really useful
is to look at the data layer itself.
So the internal data layer,
and we can get a variable.
What do we fill into the get command right here?
We can fill anything in that we would fill
into a DLVA, data layer variable,
that you might be used to from going here
into your variables
and creating a new data layer variable.
So anything that you would fill in here,
you can fill in right here as well.
So if you wanted to get, for example,
let's go into the data layer
and see what kind of elements we have here,
ecommerce.currencyCode.
We would fill this normally in here,
build a variable out of it.
But with this command, we can test it right out
and say ecommerce.currencyCode.
Press Enter,
and we can see it gives us back exactly what is written
in the internal data model.
So, we can utilize this as an alternative
to data layer variables.
We can test our data variables before hand
but also use it as a alternative.
Where does this come in handy?
Well, if you utilize inside of Google Tag Manager,
for example, we have here a custom JavaScript variable,
which pulls the product price out of the data layer itself.
This is marked up right here
as ecommerce.items.0.price.
You can just copy this.
And then inside of my custom JavaScript variable,
I can totally replace this with Google Tag Manager.
And then in parenthesis, we can actually utilize
a built in variable.
Well, I don't have this.
Let me go back here configured.
We have our container ID, which we can also utilize.
So again, google_tag_manager.
And then, we can fill this in with a variable,
our container ID variable.
And the, dataLayer.get.
And in parentheses, our ecommerce.items.0.price.
Now you might say,
"Well is pretty much longer than the other version."
But you don't have to go in and create multiple variables,
especially when you have something
that you would just quickly want to pull into one variable.
It might be easier to write this out,
and you're not using as much space
inside of your Google Tag Manager account,
but make it also easier to read in that sense as well.
So this works exactly the same way,
and it's now implemented inside of our variable.
We can also utilize the same method inside of our tags.
So getting our data layer variable,
or checking our data level variable from this menu directly
with this Google Tag Manager object command
makes my life easier
because I can quickly check something
and how it's resolved
without having to create a data layer variable.
You can, by the way, utilize several other methods
inside of the Google Tag Manager object.
For example, to reset a data layer.
We done a complete video and walk through
on this one as well,
which I'm gonna link up in the description down below.
And finally, let's talk about number five,
which is the IIFE, immediate invoked function expression.
This is this little code right here.
Where can this be useful and why should you use it?
Well inside of your page,
you might have noticed that we use certain keywords
that you kind of have to remember
in order to access certain things
like Google Tag Manager.
And these are kind of reserved keywords.
Now, hopefully they will not be used by any other program
by any other scripts, but you might know
that there might be many, many different scripts
running on your page.
And all of them are competing for the space
where hopefully you have a unique name.
This is the global variable space.
Now if you use some reserved keywords,
you could overwrite it.
So for example, if I put in dataLayer here on my page,
we see that it says hello.
Shouldn't it show us what we seen before
with the data layer object?
Well, that's actually because I have written
a faulty little custom JavaScript code here,
which overrides the data layer with a bad written syntax.
Now you should not use data layer if possible,
and any other reserved keyboard here
for name for your variables.
But in order to make sure,
especially if you have long codes
and you don't actually have written the code
or just copying it from somebody else,
you should definitely utilize
something called an IIFE,
immediate invoked function expression.
What this does, it creates a context for your code to run in
that is closed off from the global variable space.
So, you don't have the danger of overwriting anything.
So, we can put this IIFE in here
and then run our little code inside of this IIFE,
and this will make it much safer
for the global variable space.
So if we try this out,
we should now see that if we look for the dataLayer,
it's not overwritten.
Everything is still working fine.
Because our custom JavaScript
runs in a completely different context
than the global variable scope.
So as a tip, remember this little syntax here
to run your custom HTML code in an IIFE
to avoid conflicts in the future.
(air whooshing)
Hold on, I'm not done with the video yet.
I got a bonus number six for you.
So far, we have talked about the data layer,
the data layer push, the query selector,
and then the Google Tag Manager object.
And last but not least, we had the IIFE.
Now bonus number six
has something to do with our click trigger
and relative click variables.
I'll show you all about this topic
in this video right over there.
So, see you there.