#GTMTips: Use an All Events Trigger for More Control

One of the most versatile triggers in Google Tag Manager is the Custom Event trigger. As its name indicates, you can use it to fire your tags when an event is pushed into dataLayer.

This process is at the heart of GTM’s dataLayer system. And it’s not just custom events. Every single trigger type in Google Tag Manager uses the event key in a dataLayer.push(), which is why you’ll see events like gtm.click (for the Click / All Elements trigger) and gtm.timer (for the Timer trigger) ending up in dataLayer, too.

In this article, we’ll explore a cool use case for the trigger I call an All Events trigger. An All Events trigger is a Custom Event trigger that’s set to fire when any event is pushed into dataLayer.

Tip 114: Use an All Events trigger to constantly check for something

Here’s the trick.

Let’s say you want to fire your tag when a page element appears. You’ve created a DOM Element variable, and you now want to fire a tag as soon as this element is present on the page.

However, you have no clue when the element actually appears. It’s not part of the page HTML but rather an asynchronously loading third-party library, for which you have no control over the render sequence. Furthermore, there’s no guarantee the element is ever visible in the browser viewport, so an element visibility doesn’t help, either.

So, what you need to do is create an All Events trigger that looks like this:

This trigger will activate with every single trigger event (that’s what the regular expression .* does), but it will only fire if the DOM Element variable returns a valid value (i.e. it exists).

We’re still missing one thing. Can you think of what it is?

That’s right, you got it! (Or you just read what’s in the hero image).

If you don’t make any modifications to the tag, it will fire for every single trigger event that’s pushed after the DOM Element becomes available. We don’t (likely) want that! So what you need to do in addition to adding the trigger to your tag, is to change the firing settings of the tag to Once per page:

That’s it! Now your tag will fire once as soon as the DOM Element appears on the page.

Summary

Simple trick but a very powerful trigger. Obviously it would be best if you’d cooperate with your developers to push an actual, predictable custom event into dataLayer as soon as the element becomes available. But if we lived in a perfect world I would have nothing to write about.

Also, remember the caveats with “Once per page” and single-page applications - “Once per page” is literally “Once per page load”, so with a SPA it would still fire just once, even if the user navigated to other pages of the site. In these scenarios you’ll really need to get the developers to cooperate and build a proper event-driven mechanism into dataLayer.