24

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.

Improve this question

1 Answer 1

Reset to default
47

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

When you just search for a button-Tag, then you receive "[object HTMLButtonElement]". To match it set the rule to contains "Button". (note the uppercase B).
Or just use a CSS selector, again: Click Element matches CSS selector button. That will match all clicked elements that were <button> HTML elements.
In tagassistant however, it says: Click Element, Data Layer, Variable: string. That makes it so confusing. Certainly because in my head, like you said, contains is something you can use against a string. Which tagassistant says it is...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.