How to track CSS class change with Google Tag Manager?

Question

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?

Answer 1

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.