Click Element in GTM: a very useful variable

Here is one of the built-in click variables in Google Tag Manager that, at first glance, may not seem very useful.

Especially if you have tried to use it based on GTM preview mode and it has not worked for you.

That is normal, since this mode can show certain conceptual errors that can mislead you if you do not read up on it properly.

That is why in this article I want to talk a little more about this variable, which can get us out of trouble on more than one occasion.

That said, although there is a slightly more technical part -the one involving CSS selectors- I am not going to go into the more advanced options the feature allows, but simply the most common use cases where I have found it useful.

But let us start at the beginning.

What the Click Element variable in GTM is: Definition

Well, it is a variable that returns the element a user clicks while browsing the website.

You had probably already guessed that just from the name, but just to confirm it.

This variable appears when a certain auto-listener in GTM is active, which it is not always. In fact, when we start with a new container it is not active, but do not worry: you will now see that enabling it is extremely easy.

Well, when this listener is active and a user clicks on a link or element on our website, information related to that click is sent to the Data Layer. Specifically, these values:

• gtm.element
• gtm.elementClasses
• gtm.elementTarget
• gtm.elementUrl
• gtm.elementId

You can check it in preview mode:

The good thing about this is that you can access any of them through predefined variables in GTM, as I’ll explain now.

One more note: all these values are text strings, except gtm.element, which is an object.

The thing is that, as I mentioned in the introduction, when we look at its properties in preview mode we can sometimes find something like this:

And no, despite what you see there, it is not a string but an object.

An object that returns all the attributes of the element, such as:

• Href: the URL (if it is a link; not if it is another element)
• Title
• Element text

They are not shown in preview mode but are accessible if we need them.

Well, I do not know whether what I have explained so far already gives you an idea of what this variable can do, but just in case it does not, let me give you some examples.

Main use cases

At the moment, there are two main scenarios where Click Element has been very useful to me:

The first is when you want to measure clicks on one or more elements of your website that do not have an ID or any class.

This is the most obvious use and the one I am going to develop as an example in this article.

The second is when you need to measure a click on an element that contains several subelements.

Think of the add-to-cart button in an ecommerce site, where it is very common to have a div wrapping one span with the icon and another span with the button text.

And of course, what you want is to measure the click when the user clicks on any of them.

Without going into as much detail as in the previous case, I will explain how later.

How to use the variable

Now that we know what it is, I am going to explain how to enable this variable so you can start using it.

Enabling the variable

The first thing is to enable it in GTM.

To do this, go to Variables > Built-In Variables and enable it. While you are at it, enable all the other Click variables too, since they are quite useful:

This alone is not enough, because the listener we talked about at the beginning will be off.

Enabling the listener

But getting it running is as easy as creating a trigger for link clicks or clicks on any element:

Just creating it will make the listener start working.

And to check it, all you need to do is:

1. Enable preview mode.
2. Go to the website.
3. Click any link or any element depending on the trigger we created.

Once you have done this, you will be able to see the variable working as in the image at the beginning:

Good, now that I have explained all the theory, let us start with the practical part.

Using the GTM Click Element variable

Here is how to apply the variable to the two use cases I mentioned at the beginning.

#1. Menu links without ID or Class

Tell me this is not common: you want to track how many clicks occur on one or more elements of your website and, when you go to do it, you realise they have neither an ID nor any class you can use.

And yes, you could ask IT to add them and wait.

Or you could use Click Element today.

So, if you choose this second route, here is an example of how you could do it.

1. Select the correct CSS attribute for the trigger

I assume you have already enabled GTM's predefined Click variables and created at least one Click Element or Click Link trigger.

If so, the first thing we are going to do is find the CSS selector of the element whose click we want to track.

You have several options. Here are a couple.

1.1 Find the CSS selector using Chrome's element inspector

To use this method, it is advisable to have at least some basic knowledge of CSS and HTML.

Well, actually, for digital analytics in general it is advisable to have this knowledge, so the sooner you acquire it, the better.

That said, the system is simple:

1. Right-click the menu element we want to track.
2. Select "Inspect" in Chrome's context menu to open the Inspector.
3. Right-click the corresponding HTML tag (it will be an "a" tag) and select "Copy selector".

There you go, everything is done.

1.2 Find the CSS selector using a Chrome extension

If you have no technical background and the previous solution confuses you, you can use this Chrome extension (click the image to download it):

It can help you select the elements you are interested in:

It is a freemium, with paid plans and requiring Google registration, so I personally prefer the previous method, but if you know nothing about HTML it can help you.

1.3 Test

Whichever of the two methods you followed, it is worth checking that we have selected what we are interested in.

And only what we are interested in.

To review it, I add a class in the element inspector using what I copied by clicking the "+" icon on the right, like this:

It can be something like color: red !important or something similar such as background: red !important.

Something eye-catching that stands out clearly when I review the website and shows me what I selected. That way I can see whether I selected what I want and only what I want.

In this case, I can see that my selector selects only one of the three menu links, so I will have to tweak the selector slightly to capture all three.

There are no tricks here, so perhaps this is a good time to acquire those CSS basics if you do not have them…

In my case, I go from:

#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a

To:

footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a

In other words, I removed the reference to the first item in the list, so when I test it I get this:

Which tells me that this is the selector I am looking for and I can continue.

Important: this selector is very poorly optimised. It could be refined and made much, much simpler, but I wanted to show that getting one that works is not that complicated even if you have only the tiniest bit of HTML knowledge.

2. Create trigger

With the correct selector copied, we open GTM and go to Triggers > New and I create one like this:

Explanation of each field:

• Name: since it is a Link Click type, I always start with "LC -".
• Fires on: "Some Link Clicks". Logical: we want it to fire only when a user clicks the footer menu links.
• Variable: Click Element, which is what we are talking about.
• Matching: it is useful to know that the type "matches CSS selector" will only appear with this built-in variable or with "Form Element". With none of the other predefined ones.
• Value: I paste the text string I copied and tested in the previous step.

We save.

3. Create the GTM tag

In this case, since what we want is to track a click event, we go to Tags > New and select a "GA4 Event".

We configure it like this:

Let me explain it:

GA4 Configuration Tag: I select the general one, where I have the tracking ID. If for some reason you do not have it (what are you doing looking at Click Element then?), create it first.

Event name: the one you will see in your GA4. The only advice I can give you here is to take care with the naming and keep it consistent with the rest of your event framework.

Parameters: this point is important. I add the "link text" because that is how I will distinguish clicks on each of the menu links.

If I did not add it, I would have an event adding together the clicks on all the menu links, but I could not segment them and see the numbers for each one.

That said, remember to create the custom dimension corresponding to it in GA4 if you want to use the data in reports:

Trigger: we choose the one we have just created:

Once the tag is saved, all that remains is to check that it works as expected.

4. Testing

We need to make sure everything works correctly both at GTM level and at Analytics level, so we will review both.

GTM preview

We enable preview mode, go to the website and click the links.

If everything went well, we will see the tag fire when it should:

Important: you may see two Link Click events in preview mode for every click you make on the links, as happens to me:

This is most likely because, like me, you have outbound click tracking enabled in GA4 enhanced measurement.

In reality this is not a problem, because the tag fires only on one of the twin clicks and therefore only one event is sent to Analytics, which is correct.

Here you can see how it does not fire on the other one:

We leave GTM for the moment.

DebugView in GA4

We open our GA4 property and go to Admin > DebugView.

And we click again on the website elements I want to track.

Then we should see something like this:

Which tells us that we are capturing the events correctly.

To verify that the parameter is being sent, we click the event and then the corresponding parameter. Its value will expand:

Everything seems correct, but remember: if you do not have a custom dimension collecting that parameter's value, you will not be able to see its data in reports no matter how much this view shows it.

Understood?

Then all we would need to do is publish the GTM container to start collecting users' clicks.

#2. Clicks on grouped elements

Let us move on to the second most common use case.

Look at this example of an add-to-cart button:

This is its HTML code:

As you can see, the structure is a button that groups two i with the icon and the text.

If I enable GTM preview and click the button, depending on exactly where I click, I get this (if I click the icon):

Or this (if I click the text):

Even though you cannot read it, you can see that it is different.

But of course, what I want is to track clicks on any of the elements that make up the button as a single one.

So I have two solutions:

• The easy one: create three rules in GTM with three different events and three different triggers, one for each element.
• The good one: use Click Element and a trigger like this:

When you choose "Matches CSS selector" and enter this selector as the value:

• The button class (".add-to-cart").
• And that of its child nodes (".add-to-cart *").

Clicks anywhere on the button (icon, text) will also be captured.

That is a good one, right?

Yes, buuuut…

Recommendations

Using triggers with CSS selectors has its risk.

Especially if you do not manage the website code yourself.

The reason?

Simple: at any moment the development team may make a change in the code that causes your selector to stop capturing the element you want. This is more likely to happen on websites that are constantly being updated.

To a lesser extent, but it can also happen with a theme update or a plugin update in your CMS.

So is Click Element not useful with this configuration?

Not at all; it is very useful, but I want you to be aware of its main drawback.

On the other hand, for the more techie, among you, you should know that the developer console gives you quite a bit more information about this object-type variable.

To see it, all you have to do is open the console and type "dataLayer":

Now navigate to the element and expand all the values:

The image shows you only a few, but there are loads of them.

From here it is up to you and JavaScript to access a few more possibilities, such as viewing the parent node:

And get its parent node class with gtm.element.parentElement.className using a GTM Data Layer variable:

Or also use gtm.element.firstChild.id to access the ID of the first child node by following the same procedure.

Conclusion

Click Element is probably the most powerful predefined click variable in GTM.

It is also the hardest one to use properly at first.

But it is worth it, because in certain scenarios it will save our lives.

Well, that statement may be a little exaggerated, but at least it will save us time.

I hope these basic notions help you get real value from it in your projects.