Google Tag Manager – Triggers Breakdown and Javascript Alternatives

Fires ASAP – basically as soon as GTM starts loading.

Since this fires ASAP, this would be the same as just putting JS code in the same place, or instead of your GTM embed snippet.

Fires when the basic DOM structure of the page has been parsed. Images, styles, and other things could still be loading.

window.addEventListener('DOMContentLoaded',function(evt){ /* Do Something */ });

Or, since this won’t fire if the page has *already* hit DOM ready before this code ran, you can wrap it like this:

(function(){
    function handleEvent(){
        /* Do Something */
    }
    if (document.readyState==="interactive"){
        handleEvent();
    }
    else {
        window.addEventListener('DOMContentLoaded',handleEvent);
    }
})();

Fires when the page has been fully loaded (waits for images, scripts, etc). Can take a while!

window.addEventListener('load',function(evt){ /* Do Something */ });

(function(){
    function handleEvent(){
        /* Do Something */
    }
    if (document.readyState==="complete"){
        handleEvent();
    }
    else {
        window.addEventListener('load',handleEvent);
    }
})();

Listens for any click DOM event.

document.addEventListener("click",function(evt){/* Do Something */});

var elem = document.querySelector("#MyElement");
elem.addEventListener("click",function(evt){/* Do Something */});

Listens for click events, but “pre” filters to click events that have fired on links.

var links = document.querySelectorAll("a");
for (var x=0; x<links.length; x++){
    links[x].addEventListener("click",function(evt){/* Do Something */});
}

This is an advanced trigger that really shows off the power of GTM. There are a lot of different options with this trigger, but the basics of what it does is checks a few different things about the element to see if it is visible: getComputedStyle to see if the element has the display property set to hidden, and getBoundingClientRect to see if the boundaries of the element are within the current view of the user.

This is not trivial to code out by hand, in a way that works across browsers and reliably. One option is to use JQuery and check visiblity whenever the page is scrolled:

// Note - this fires whenever the element comes into view, regardless if already fired.
(function(){
    function testVisible(){
        if($("#MyElement").is(":visible")){ /* Do something */ }
    }
    testVisible();
    $(window).on("scroll",testVisible);
})();

Or, you could follow one of these guides: here or here

Fires whenever a <form></form> is submitted. Listens for the “submit” JS event.

document.addEventListener("submit",function(evt){/* Do Something */});

More robust option – listen for specific form, and don’t submit it UNTIL the marketing tag has fired.

var myForm = document.querySelector("#ContactForm");
myForm.addEventListener("submit",function(evt){
    // Prevent form from being submitted right away
    evt.preventDefault();
    // Do something
    /* sendGoogleAnalyticsEvent("Form Submitted"); */
    // Use a delay to ensure the above marketing tag has finished
    setTimeout(function(){
        // Submit the form
        myForm.submit();
    },1000);
});

This allows you to configure tags to fire once the user has scrolled a certain amount down the page. Uses scrollTop and scrollLeft to determine offset from origin and whether or not the threshold has been reached.

(function(){
    // 50% percent as float
    var threshold = 0.5;
    var fired = false;
    function checkVerticalScroll(){
        if (!fired){
            var totalHeight = parseInt(getComputedStyle(document.body).height.replace("px","").replace("%",""),10);
            if (document.body.scrollTop > (totalHeight * threshold)){
                /* Do Something */
                fired = true;
            }
        }
    }
    document.addEventListener("scroll",checkVerticalScroll);
})();

This trigger checks the page for any embedded YouTube Videos, and if they are there, allows you to fire tags based on a video play event (like start, pause, etc).

The way this works is a little complicated, since YouTube embeds are usually iFrames. First, it requires that all YouTube embed Iframes contain enablejsapi=1, which is why they have the checkbox “Add JavaScript API support to all YouTube videos”, which automatically adds that string to all embeds. Once an embed has that flag, the video will start sending cross-origin messages (via window.postMessage()) with event data, which GTM is listening for. Finally, GTM checks the event that is passed via postMessage, and parses what type of YouTube event it maps to (play, pause, etc.) and determines if your tag should fire.

(function(){
    // Change to match your YouTube Iframe embed
    var ytEmbedId = "myvideo";

    if (document.querySelectorAll('script[src="https://www.youtube.com/iframe_api"]').length == 0){
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        document.body.appendChild(tag);
    }
    window.onYouTubeIframeAPIReady = function(){
        console.log("YT Ready");
        var player = new YT.Player(ytEmbedId);
        player.addEventListener("onStateChange",function(evt){
            switch (evt.data) {
                case YT.PlayerState.UNSTARTED:
                    // Video start
                    /* Fire video start event */
                    break;
                case 0:
                    // Video Ended
                    /* Fire Video End Marketing Tag */
                    break;
                case 1:
                    // Video playing
                    break;
                case 2:
                    // Video paused
                    /* Fire Video Paused Marketing Tag */
                    break;
                default:
                    break;
            }
        });
    }
})();

This trigger is very specific to GTM – it can be used to fire a tag when a specific named event is pushed to the GTM DataLayer – which is kind of like a shared stream of events that exists in the page. Often, this kind of trigger is used when multiple vendors are working together to implement something.

So, for example, a shopping cart vendor can push an event to the DataLayer for when a user adds an item to the cart, and then the ad agency vendor can listen for that event with this custom event trigger and fire a GA conversion event when it is trigger.

If you are not using GTM in the first place, you wouldn’t really need a JS alternative to this. Just use native custom JS events! For multiple vendors working together, one vendor can use dispatchEvent() to send the event, and another can use addEventListener to listen for it.

However, if you do not have access to GTM, but another vendor *does*, and they want to share events with you by pushing to the dataLayer, you could still listen for their dataLayer despite not having a GTM login / access. You would basically replicate this trigger with some code like this:

(function(){
    // Hold ref to original push fn
    var originalPushFn = window.dataLayer.push;
    // Replace with custom push fn
    window.dataLayer.push = function(){
        // Pass arguments to orginal function - VERY IMPORTANT
        originalPushFn.apply(this,arguments);
        // Our own processing
        for (var x=0; x<arguments.length; x++){
            if (typeof(arguments[x])==="object"){
                filterDataLayerPush(arguments[x]);
            }
        }
        
    }
    function filterDataLayerPush(pushObj){
        // Handle
        // Example - waiting for event named "addToCart"
        if (pushObj["event"] === "addToCart"){
            /* Fire GA Add To Cart Marketing Tag */
        }
    }
})();

Lets you fire a tag when the URL changes in a non-standard way, without the browser actually navigating pages. The first way is through a “URL fragment” change. Most people know this as what follows the “hash mark” – e.g. example.com/subpage#subsectionalpha – where #subsectionalpha could change to #subsectionbeta without the page reloading. This is common on single-page-applications (SPAs). The second thing it listens for is the URL being changed through the HTML5 pushstate API. This is something newer and less common, but becoming more common with the rise of PWA (progress-web-apps).

For URL fragment / hash changes, the code is pretty simple. There is built in window JS event you can listen for:

window.addEventListener("hashchange",function(evt){
    if (location.hash === "#subsectionalpha"){
        /* Do Something */
    }
});

Unfortunately, there is not yet a good built-in JS event to listen for as an indicator of a pushState happening. The easiest current solution is to basically replace the global history.pushState function with your own function that scans the event and then passes it to the original function. If you look at the source code for GTM, you can see that is exactly what Google wrote their GTM JS code to do!

This gets triggered whenever an uncaught Javascript error occurs. The main use of this trigger is to capture the error data, and relay it to another platform that consolidates JS errors into some sort of dashboard, such as Sentry.io or Airbrake

Most error collection dashboards probably have SDKs or plug-n-play libraries to make capturing client errors easy, so I doubt you would have to do much hand-coding in terms of catching and relaying JS errors.

However, if you need to, there is a global window JS event that fires on uncaught JS errors for some browsers, which is aptly named “error“. Or refer to this site on a cross-browser approach.

This is pretty simple – fires a tag after a set amount of time has passed. Or fires it every __x__ amount of time.

Here is a quick demo of how you could implement this in JS.

(function(){
    // Configure time in MS and max fires
    var interval = 2000;
    var maxFires = 4;

    var timer;
    var fires = 0;
    timer = setInterval(function(){
        if (fires < maxFires){
            /* Do Something */
            fires++;
        }
        else {
            clearInterval(timer);
        }
    },interval);
})();

A trigger group is just a way in GTM to combine multiple triggers together into one rule. Normally, when you assign triggers to a tag, they function in an “OR” configuration, meaning that the tag will fire if ANY of the triggers get triggered. However, if you assign a trigger group, the triggers in that group function in an “AND” configuration, meaning that ALL of the triggers must have been triggered in order for the tag to fire.

Example: You want to fire a “high value user” tag if a user scrolls below 50% of the page, AND spends at least 60 seconds on the site. You could enforce this by creating a trigger group that contains both a Timer Trigger as well as a Scroll Depth Trigger, and then assign that trigger group to the tag you want to fire.

This is specific to GTM, so there is no need for a JS equivalent. JS developers should already be familiar with basic logic, such as AND vs OR – a GTM trigger group is basically the same as doing IF(TRIGGER_A && TRIGGER_B && …){/* Do Something */}

Element (Click,Form)

A CSS selector is a way to target an element based upon its properties that are mappable to how CSS gets applied to the element. An analogy could be selecting people based upon a description – “Pick all men in the room with blonde hair, glasses, and red shoes”. In the context of GTM, you might use this option to do something like filter link clicks to just click-to-call links, so you can fire a phone call marketing conversion tag. To do so, you could filter by “matches CSS selector”, and then put the value as ‘a[href^=”tel:”]’

Most browsers support the .matches() method, so this is easy in JS:

// Attach to all links
document.querySelectorAll("a").forEach(function(elem){elem.addEventListener("click",filterLinkClicks)});
// ...elsewhere in code
function filterLinkClicks(evt){
    console.log(evt);
    if(evt.target.matches('a[href^="tel:"]')){
        /* Do Something */
        // Fire click-to-call marketing conversion tag
    }
}

Pretty much anything…

Since this can be used as an operator with pretty much any variable, this can mean a lot of different things. For example, when used with “Click Text” or “Form Text”, GTM is basically comparing all the text contained within the HTML element to the value you enter to compare against.

Again, there are tons of different combinations that this filter allows for, but none of them are very complicated to implement in JS. For example, no matter how many elements are nested within another element, you can get all the text that is contained within and check if it contains a string using element.innerText:

var searchString = "Find Me!";

// Case sensitive "contains"
if(myElement.innerText.includes(searchString)){
    /* Do Something */
}

// Alternative case-sensitive approach
if (myElement.innerText.indexOf(searchString) !== -1){
    /* Do Something */
}

// Case in-sensitive
if (myElement.innerText.toLowerCase().indexOf(searchString.toLowerCase()) !== -1){
    /* Do Something */
}