Hey there and welcome back to another video of measureschool.com 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.
CSS Selector GTM Overview
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 GTM 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.
Checking CSS Selector Using Developer Tools
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.
Testing Elements Using Developer Tools
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.
Setting Up Your CSS Selector Trigger in GTM
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.