CODEWITHSUNDEEP
javascripthtmlcssgoogle-tag-manager
Mau Gonzalez
Mau Gonzalez

Reputation: 137

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

Upvotes: 0

Views: 2490

Answers (2)

Dagmar
Dagmar

Reputation: 3281

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

Upvotes: 0

reZach
reZach

Reputation: 9479

If you want to trigger a tag in GTM when you programmatically change the display of your element through JS, try triggering the tag with an Event instead of Element Visibility. You'll want to have GA loaded on your page, but then call this when you change your visibility of your element:

dataLayer.push({"event", "visibility-changed"});

Then, for your trigger, choose Event and type in visibility-changed as the event name.

Upvotes: 1

Related Questions