Search code examples
javascripthtmlcssgoogle-tag-manager

How to trigger element visibility when the style changes in GTM

I have some JavaScript code that changes the div style below from display: none to display: block.

From <div class="myClass" style="display: none;"></div> to <div class="myClass" style="display: block;"></div>

I want to send a tag when the Element visibility trigger fires. This trigger should fire when the style changes.

I have tried with .myClass[style*=display:block], but it doesn't send the tag as it does when I simply write .myClass

Trigger Configuration

Solution

  • I didn't get it to work with the css class selector, but it worked perfectly when I switched to ID selection method.

    I'm unsure why using .myClass didn't work because according to the documentation, it should have.

    The CSS selector may be used to target specific HTML elements. For instance, this selector applied to a Click Element variable will match a click for any element with a class attribute value of "purchase" that is a descendant of an element with an ID attribute value of "promo": #promo .purchase

    Also, note that you don't need to select "Observe DOM changes" because the DOM doesn't change when the element visibility is changed from none to block.

    Screenshot from GTM