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

Question

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 really happens under the hood of GTM when doing this kind of manipulation?

I don't have real issues, I'm just trying to understand it properly.

Answer 1

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