Differences between "Click Classes" and "Click Element" in Google Tag Manager

css-selectors google-tag-manager
Simon Breton picture Simon Breton · Apr 18, 2017 · Viewed 22.1k times · Source

I don't really understand the differences between "Click classes" and "Click Element" in Google Tag Manager. I don't understand the expected use of these event and I don't understand their respective behavior regarding "contains" and "CSS selector".

Let's say I have class="buttons primary small".

What's working :

Click Element -> Matches CSS selector -> .buttons.small 
Click Classes -> contains -> small

What's not working 

Click Element -> contains -> .buttons.small 
Click Classes -> Matches CSS selector -> small

if Click Classes is "an array of the classes on an object", What's really happen "under the hood" of GTM when doing this kind of manipulation ?

It's not that I have a real issues, just trying to understand properly.

Answer

Simo Ahava picture Simo Ahava · Apr 18, 2017

Click Classes returns the value of the class attribute of the HTML element that was the target of the action. It is always a string, and in your example would return "buttons primary small" though not necessarily in that order.

Click Element returns the HTML element that was the target of the action.

"contains" is a match type in GTM that you use against strings. That's why it works with Click Classes (which returns a string) and not Click Element.

"Matches CSS Selector" is a check whether any given element matches a given CSS selector. "Matches CSS Selector" must thus be done against an HTML element. That's why it works with Click Element and not Click Classes.

In my opinion, Click Classes is redundant, since you're always better off doing a CSS selector check against Click Element rather than a string match against Click Classes. It's more robust that way, and you also don't need to worry about the class names being in a certain order in the class attribute value.

In other words, better:

Click Element matches CSS selector .buttons.primary.small

Worse:

Click Classes contains buttons primary small

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More