GTM Quick Tip: Test Your Matches CSS Selectors beforehand

Hey there and welcome back to another video
of teaching you the data-driven way of digital marketing. My name is Julian, and I’m back with another
quick tip video for Google Tag Manager. This time, we want to talk about how you can
test your CSS selector quickly before you deploy your tracking. Now, you might be aware of the very powerful
matches CSS selector option that lets you target certain elements that were clicked
on. So for example, it works very well with the
click trigger together if you wanted to, for example, track all of the buttons or the link
clicks that happened on the menu point here. Be aware that the CSS selector option only
works if you really have an HTML element. So for example, if I click here, and I look
into my GTM link click under the variables, you need to utilize the click element that
is then displaying an HTML object. So if you look into the data layer, we have
here our GTA element with our object. Now to utilize the CSS selector option, you
will need to know a little bit of CSS. And then you can look into the elements pane
of the developer tools and figure out the CSS selector. I find this pretty laborious because it puts
me into a loop of writing a little bit of the selector, for example, okay, I have here
an ahref element, I could put it in here, save this, go back, see if my tag fires if
I click on the element and repeat if it doesn’t work as intended. Again, pretty laborious to go back and forth
between the preview debug mode and your changes. So a quick little tip that I have for you
today is to actually try this out inside of the developer tools. All you need for this is, first of all, you
would have the need to click on the element that you want to track, for example, this
album button. And then you open up your developer tools. In the console, you put in a command that
will actually access the internal data model of Google Tag Manager, and this command is
Google_TagManager. And then in square brackets, you put your
GTM ID. Now you get your GTM ID from the container
that you have deployed. So that would be this ID here. And you put that into your quotation marks,
then you write a dot, and we want to access the data layer. We want to get a special key, which in our
case, would be the GTM element. If we press enter, we get exactly the element
that is also displayed here in the data layer. And this is the element that Google Tag Manager
would try to use the CSS selector option. A great thing about this is that we can now
test against this element directly in the developer tools by simply write matches, and
then parentheses, and we can put in quotation marks our CSS selector option that we want
to test against. When you press enter here, return as an error. Well, this is because I didn’t type anything
in a true or false. So we have here and link element a, and it
would match that up. Unfortunately, if I click on any other element
here would obviously or an element down here, it would also match this up. Because these are all links. Now, we want to utilize the CSS selector option. So we want to look into the elements pane
and see how our links actually marked up. So let’s go and inspect here and inspect our
element. And we can see these are all part of the primary
navigation div element. Down here we have a little bit of a mock-up
of how a CSS selector could look like. Now, you need to know a little bit of CSS
in order to try this actually out. I’m going to press the Escape key, this will
open up the console and the elements pane in the same window. And here, we can try out our CSS selector. So in our case, it would be primary navigation. We could put that in, see if that works. No, it’s false. So this would not match up as our CSS selector. I’ve done some basic mistakes. The primary navigation is actually a class. So I need to put in a dot here, but still,
and here we go, we see that our CSS selector option now turns true. Now if I click on any of these other elements,
this will push a new GTM element in the data layer. And we can test it right away by just clicking
the up arrow here and pressing Enter again, and see if it turns true again. So for this element that I just clicked, or
if I click on this element, it would turn true. Now if I click on any other element on the
page itself. This is not part of the primary navigation
and therefore it’s false. So it’s safe to assume that this CSS selector
would suffice to track all the menu clicks on our page. So we can copy this and go over to Google
Tag Manager then do our final test. This will be our menu click and we’ll put
in the some links. We filter down on the click element where
the matches CSS selector option is the primary navigation and eight. Let’s saved this and refresh. Refresh our page here. And its second one, and we see our event click
fires, our tag files on these events. And if I click on any other link on our page,
it should not fire. Although was a link like because our CSS selector
didn’t turn true. So simply use this line of code to quickly
go through and test out your CSS selectors beforehand. Hey, there it’s me again. Thanks for checking out our quick tip 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.


Add a Comment

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