Click Element Variable in Google Tag Manager (how to use it correctly)

In this video, I will show you how to use click element variable with Google Tag Manager. Watch closely, because many people are doing mistakes here. If you’re new here, I teach people how to work with Google Tag Manager and Google Analytics. So, if you want to stay up to date with these tools, consider subscribing.

Click Elements variable can be confusing.

When you enable the preview mode, click a certain element on a website and then check its value, you might see something like this. Well, here’s the problem. This is not a real value of this variable, and it will not work in many cases as you would expect. So, in this video, I will show you what the Click Element actually is, and how to properly use it.

Let’s take a look. To get started with the Click Element variable, first we have to go to Google Tag Manager, variables and then configure. If you haven’t yet, then you should enable all the click variables right here. Obviously in this video, we will be focusing only on this one, but this is just a good practice in general to enable all of the click variables. Then just start seeing click events and the premium amount.

If you go to like Tag Manager, we have to go to triggers and create at least one Google Tag Manager, click trigger.

So, click new trigger configuration. And based on your situation, maybe you want to track a link. Then just links will be fine. But in this case, let’s say that we want to track clicks on any elements on our website.

So, choose all elements clicks, and then let’s name this trigger, then click save. And now we have enabled click tracking in our Google Tag Manager container. Click on the preview and then we will take a look What kind of data does the click element variable return? So click connect, and eventually you should see that the premium amount has connected right here.

So, if I click on any element, for example, I click on title.

Maybe I click on this link right here. You will start seeing some click events and the preview mode of Google Tag Manager. You can click on the first one and then go to variables. Here, you will see what kind of click information do we have. We have click last click element and so on.

And the past click element variable in Google Tag Manager premium amount was displayed as an object and its output was just a link of the URL. For example, if you click the actual URL, but now click element looks much more confusing when it comes to the preview and debug mode. Instead of object, now it is displayed as a string and the output looks like this.

And unfortunately, in this situation many Google Tag Manager beginners make a mistake which is quite an honest mistake, because as I’ve said this looks a bit confusing. So let’s say that in our case, we want to track this click but we don’t have any click classes or click ID even though we have right here, let’s imagine that we don’t.

So, what usually beginners doing Google Tag Manager, they try to use the click element variable in their Trigger, and they try to do something like click element contains, and this part, unfortunately, this will not work. So, if I go, let’s say to triggers and then do like this. So, I choose some clicks and then I enter something like this. This will not work because click element is not a regular string. And in this context string basically means just a regular text.

Click element contains a much more complex data structure that is just not displayed right here. So what kind of data does the click element contain? Well, first of all, we have to take a look at what does the click element actually mean. So, let’s say that I want to track clicks on this button.

So, when I click on it, then the click element variable will contain something like this.

So the click element actually contains a lot of stuff like IDs, names, text content, and so on. In fact, we can go even deeper and we can investigate and inspect what is in the actual click element. So, first of all, if I click on this click event in the premium amount and then go to the data layer you will see that we have a key called element. And this element is the child of GTM. So, if we wanted to access this parameter in the data layer the value of would be GTM.element. But even though the element key in the data layer contains a lot of information. Almost none of that information is properly displayed in the preview mode because there’s actually a lot of stuff. So if you want to check what is actually available in the element key right here or in other words, GTM.element you should go to the website, then go to console.

You can clear the console and then you enter data layer like this with the uppercase L now you should expand it and find the latest GTM.click event because this event is very closely related to this most recent event.

Well, actually not the recent, but let’s use this one. So, I will click this one. And this means not that numerous, but the previous one.

So, it should be this one. I click this dark triangle to expand it. And then I expand the GTM element. GTM.element is kind of the same or actually very close to what is in this part, which is GTM.element. Now, if I expand this one, you will see a lot of parameters.

Some of them are empty. Some of them contain some information. Here, we see a lot of parameters that are not, and they’re quite technical so you don’t need to care about them.

And we can also access things like children of this element and children basically are the elements that are in the lower position of the document object model of this website. I know that this might sound confusing but just bear with me. Then we also have things like ID enter text and all the other stuff. And a bit later in this video I will show you an example of how can you actually use some of these parameters in practice? So my main point right here is that click element is not just irregular text as it is displayed right here.

It is a complex structure that contains a lot of different parameters. So, if you use something like element contains and this, it will not work the only operator, and I mean this dropdown right here the only two options at work with the click element to variable are matches CSS selector and does not match CSS selector.

So, if you want to use the click element variable in your triggers, you have to be familiar with at least the fundamentals of CSS selectors below this video I will share several learning resources for you to get started with the CSS selectors. And if CSS selectors still look way too much confusing for you, then you can take a look at my Intermediate-Advanced Google Tag Manager course where I have a dedicated module just to this topic where I show you some tips on how to learn the topic faster. How to apply it in Google Tag Manager.

And so on. I’ll post a link to this course in the description of the video as well. Now let’s go back to that matches the CSS selector option.

Let’s say that on this page I want to track clicks of this, add to cart button. Now, if I inspect this by doing the right click and then inspect, I will see that this element actually consists of two elements.

Well, first of all, this element is not a link. Therefore, the just links trigger will not work. This element is coded as a button and you can see see it right here. This button actually consists of two elements. In fact, if I expand this button right here, I will see that there is a span element, which is text of the button.

Because if I hover right here you will see that it is highlighted right here. So we have a text and we have the background of the button. So one of the ways how we can track clicks on this button is by using CSS selectors. CSS selectors is a syntax that allows it to select certain elements on a page based on their attributes their classes, ID, maybe some other parameters. So, in this case, what we could do is that we can track clicks on all the elements that are this background where this button element or any element that is a child or even in the lower level of this element.

Because if I click right here, I collapse the structure of the elements. And then if I click right here, I expanded, and you can see that this element is kind of on the lower level compared to this button right here. So now I will go to Google Tag Manager and update this trigger. So I keep using the click element variable. Then from contains, I go to matches CSS selector because matches CSS selector accept the click element variable.

And then in this part I will have to write a valid CSS selector. Now in this video I will not dive deeper into the explanation of the syntax.

So, if you want to learn more you can check the resources below the video. Now I will go to the website and then I will copy the ID of the button element right here. Then in this field, I paste that ID.

But in this case Google Tag Manager will not know what it is. Is it a class? Is this the ID? Therefore, in CSS we have to enter this hashtag before the ID.

Because if we add this symbol in front of some texts then Google Tag Manager will know that we are looking for element of which ID is exactly this one.

So, with this CSS selector we will be targeting all collects that happen on the button element right here. But what happens if a visitor collects on this element which is the text, well then the visitor will actually click not the button element but this element and this element ID is different. Now on other websites there might be even more elements below the button. Maybe some elements are children of the span element and so on. So, in order to build a robust trigger, we have to configure our CSS selector like this.

We will be looking for clicks on elements of which ID is this one or we will be looking for clicks on any element below it. And that can be done with the following syntax. We copy this part, the entire CSS selector. Then we enter comma paste that CSS selector once again, this is a very important then you enter space and asterisk. So this means that we will be looking for clicks on elements that have this ID or on any element that is below this ID.

So, in our case, the element that is below the button is the span element. And now I should rename this trigger to let’s say click and add to cart button or something like that. And this video, I won’t be testing this example but if you want to learn more about this kind of technique I have another video, which is a tutorial on three click tracking techniques with Google Tag Manager.

So I will post the link to that video below as well. And if you want to know this tracking technique where we use the matches CSS selector and this kind of selector, it is called Wildcard CSS selector.

So if he wants to learn more about it I will post the link below the video. So let’s quickly recap what we have learned in this video so far. And then I will share my final tip in this video. So we have learned that click element in reality is not a string and it is a complex object that contains a lot of information. That’s why you cannot use things like contains equals ends with or whatever with the click element variable.

The only two operators that you can use are does not match CSS selector and matches to CSS selector. And then I shared an example of the Wildcard CSS selector that we use to track the clicks on the button element, or in other words on the background. And then this part is responsible for tracking clicks on all the elements that our children or grandchildren or whatever level in that button.

Or if we look from this perspective those elements are on the lower level of the main element. And now the time has come for the final tip that I wanted to share.

Here, I have some demo page where I can add this product to your cart. Now, if I do the right click and inspect this element I will see that this element is a link. This is it’s class. And the parent element of this link contains the product ID. So first of all, let’s take a look.

What kind of information can we get with the built in Google Tag Managers functionality? So let’s go to Google Tag Manager then triggers new trigger configuration, just links.

And then again, let’s enter all link clicks because this is our first just links triggered in the container click save. And now I will refresh the preview mode once the preview mode as refreshed or enabled I will now click this link. Then in the preview mode I will see the link click event right here.

If I go to variables, I will see that add to cart. BTN class is available right here. So this could be used in my click trigger condition because I could track all the clicks of elements where click classes contains this value. However, I don’t have anything else related to the product ID, but if I expect this element I will see at the parent element, which is one level up. This contains the ID.

And after looking in the backend of this website and comparing to the IDs I am 100% positive that this is not just some element ID but this is the ID of the product.

So I could use this in my tax, but how can I access it? And that’s where the click element of variable becomes. Once again, quite useful. Let me show you, first of all I will clear the preview mode right here.

I will then refresh the page once again and then I will click the link. Once again, I do it. And then I go to the console. I clear the console and then enter data layer with the upper case, L hit enter here. You will see six data layer pushes that have occurred on this website.

And one of them is link click. This link click is that click that happened when I collect this link. So I will expand it. Then I will expand the GTM element. And then there is one parameter of this element that is quite interesting to me.

If I scroll down, I should be looking for a parameter which is called parent element. This key will return the element that is the parent of this link. So this is the link and the parent element is this one.

So I want to access parent elements, ID parameter. So let’s keep digging.

Let’s go back to the console. I have parent element. I expand it. And then in this element, I need to find the ID key. This ID key right here is returns.

The parent elements, ID attributes value, which is this one. This is the exact same thing as it is right here. So, if we look at the entire path, it will look like this. We have GTM.element, and then we go one level deeper.

So, we have to enter.parentElement.id. And where can we enter this information? Well, we can use the data layer variable.

So let’s go to Google Tag Manager, variables new variable configuration data layer variable. And then we entered the entire path which is GTM.element.parentElement.id.

And let’s save this variable. Now let’s refresh the premium out and check whether this variable is configured correctly.

So I will close the console and then I will click this link. Once again, I did it. Now, I go to the premium amount of Google Tag Manager and do the link click right here.

I will see that my data layer variables value is this which is the ID of the parent element. All right. I hope that now we have a much better understanding of how to work with the click element variable. As you can see, this kind of topic belongs in the Intermediate-Advanced Google tag Manager zone. If you found this video useful hit the thumbs up button below the video because it helps me continue working on this channel.

https://linkboss.io/?ref=yosezbaez62deke

https://mailer.gold/baezyz2023

https://dash.sparkloop.app/signup?origin=newsletter_radar&aff=290086c5

The Instagram extension for WooCommerce allows you to show photos of your products from Instagram based on hashtags – requires free WooCommerce WordPress plugin.

Find out how to start upgrading your commissions and get paid every day