CODEWITHSUNDEEP
google-analyticstriggersgoogle-tag-manager
Jurik
Jurik

Reputation: 3264

How to track CSS class change with Google Tag Manager?

I need to keep track of CSS class change with GTM (GA behind).

Of course I could fire a javascript event and take this as a trigger. But then I would have to deploy new code.

So is there a way to track certain CSS classes when they appear after the "DOM ready"-event?

Upvotes: 0

Views: 3881

Answers (2)

Lucas Massuh
Lucas Massuh

Reputation: 221

If the problem is doing a code push, you can adda a tag like the "Dom Change Listener" described in this tutorial https://www.simoahava.com/analytics/google-tag-manager-dom-listener/

You may want to change the part that checks for the change from "display" to whatever change you need to react to.

Upvotes: 0

Eike Pierstorff
Eike Pierstorff

Reputation: 32770

You always need a GTM event (i.e. a push to the dataLayer with the key "event" and an event as value) to trigger tags in GTM (also variables in GTM will only be updated as response to a GTM event).

If you do not want to deploy new code via conventional means you can set up a custom html tag that uses a function wrapped in a setInterval call (or possibly uses mutation observers, which I think can track changes to attributes) to check if the class has changed and then pushes an event to the datalayer that you can respond to.

So yes, there is a way, but it is certainly more elegant (and better for performance) to add the datalayer.push to the function that changes the CSS class.

Upvotes: 3

Related Questions