Differences between "Click Class" and "Click Element" in Google Tag Manager
I don't really understand the difference between "Click Classes" and "Click Element" in Google Tag Manager. I don't understand the expected usage of this event, and I don't understand their respective behavior regarding "contains" and "CSS selector".
Let's say I have class="buttons primary small"
.
What works:
Click Element -> Matches CSS selector -> .buttons.small
Click Classes -> contains -> small
What does not work
Click Element -> contains -> .buttons.small
Click Classes -> Matches CSS selector -> small
if Click Classes is an "array of classes on an object" what really happens "under the hood" of GTM when doing this kind of manipulation?
It's not that I have real problems just trying to get it right.
source to share
Click "Classes" returns the attribute value of the class
HTML element that was the object of the action. It is always a string, and your example will return "small buttons", although not necessarily in that order.
Click Element returns the HTML element that was the action object.
"contains" is the type of match in GTM that you use against strings. So it works with click classes (which returns a string) rather than using the Element.
"Matches CSS Selector" is a check if any given element matches a given CSS selector. "Matching CSS Selector", therefore, must be performed against an HTML element. This is why it works with the Click Element and not Classes.
In my opinion, the "Classes" class is redundant, as you are always better off checking the CSS selector with the "Click" element rather than string matching with the "Classes" classes. This is more robust and you also don't need to worry about class names being in a specific order in the value of a class attribute.
In other words, better :
Click the element matching the CSS selector .buttons.primary.small
Worse
Click "Classes" contains small buttons
source to share