Custom Event Trigger Set Up in Google Tag Manager (GTM) v2

If you’re familiar with Google Tag Manager (GTM for short), you already know it’s a great tool for non-developers to implement tags across a web property with relative ease. Since GTM’s introduction, there have been a great number of blog posts, YouTube videos, and forum discussions surrounding how to accomplish everything from basic to advanced tagging implementation using the product. A lot of these aforementioned tutorials were written when GTM was in its infancy (GTM v1), when “variables” were “macros” and “triggers” were “rules” and the overall UI looked rather drab. These differences, along with many others, make translating those early tutorials very difficult for someone who is just getting into the tagging game. The following tutorial is a quick guide for how to set up a custom event trigger in v2 of GTM. This tutorial assumes that you have a basic understanding of how GTM works and you already have a container set up for your web property.

For more information on the in’s and out’s of Google Tag Manager, visit https://support.google.com/tagmanager#topic=3441530

Before we get started, I’d like to credit Simo Ahava’s GTM v1 tutorial on custom event listeners as the basis for the information provided below.

Source: http://www.simoahava.com/analytics/custom-event-listeners-gtm/#gref

Step 1

As mentioned above, I’m going to assume that you already have a GTM container set up on your web property, probably with a few tags already deployed, and you’re just looking to create a custom event trigger to tag something that isn’t an out-of-the-box GTM trigger (something other than a click or history change). All of the supported event listeners that can be utilized in the method outlined below can be found here:

https://developer.mozilla.org/en-US/docs/Web/Events

Step 2

Now that we’ve established what we’re here to accomplish, let’s start off with our first bit of code. For this example, we’ll use the “change” event to track when users are interacting with text boxes on our site. The same method applies to all of the event listeners linked to above, aside from a few rare cases like “blur” and “focus”, which I recommend you read Simo’s original post to better understand. The first thing we’ll want to do is set up a Custom HTML tag that fires on GTM load that will act as our custom event listener. So the first thing to do in that chain is to set up a Trigger for when GTM loads. This is actually a lot easier than it sounds. Just create a new trigger, choose “Custom Event”, and enter “gtm.js” in the “Event Name” section (as pictured below).

Save this trigger for later, you’re going to need it.

Guess what, later has come.

Step 3

Now it’s time to create your Custom HTML tag that fires on the GTM Load trigger. Here’s the code and what it should look like in GTM:

<script>
  var eventType = 'change'; // Modify this to reflect the event type            you want to listen for
    if (document.addEventListener {  document.addEventListener(eventType, {{generic event handler}}, false);
} else if (document.attachEvent) {
document.attachEvent('on' + eventType, {{generic event handler}});
}
</script>

Save this tag. Congratulations, you’ve successfully set up your event listener, but you may have noticed that we used a variable {{generic event handler}} in our javascript. You may have guessed it, we’re going to have to create that variable. Time for Step 4.

Step 4

Let’s create our {{generic event handler}} variable so that we can pass information to the data layer when our change event is triggered. Navigate to the variables menu and create a new Custom Javascript variable and enter the information below:

function() {
return function(e) {
window.dataLayer.push({
'event': 'gtm.'+e.type,
'gtm.element': e.target,
'gtm.elementClasses': e.target.className || '',
'gtm.elementId': e.target.id || '',
'gtm.elementTarget': e.target.target || '',
'gtm.elementUrl': e.target.href || e.target.action || '',
'gtm.originalEvent': e
});
}
}

Be sure to name your variable “generic event handler”; it should look the same as below:

Hit “Save”. You’re now 90% of the way there. The last thing to do is create a trigger for your custom event.

Step 5

This step is very similar to setting up the GTM Load trigger and is just as simple to implement. Create a new trigger, choose “Custom Event”, and enter “gtm.change” in the “Event name” section (as pictured below).

Two important things to keep in mind about this step is that and you will want to update the event name from “gtm.change” to the specific event you are tracking (i.e. ‘gtm.blur’, ‘gtm.focus’, ‘gtm.scroll’, etc.), and, secondly, you should add filters to this trigger if you want to pinpoint a change on a specific page or element. If you do not add filters, this trigger will fire every time a user makes a change to any text box across your entire site (or anywhere your GTM container loads). Once you’re satisfied with your change trigger and the filters you’ve applied, hit “Save” and give yourself a big pat on the back. You’ve just accomplished one of the more complex tasks inside GTM and hopefully have developed a new knowledge of how custom events can bring your tagging game to the next level.

The only thing you have left to do is add your custom event trigger to a tag of your choosing, whether it’s a Google Analytics Event tag or a Custom HTML tag. To quickly check if you implemented your trigger correctly, you should see it show up in preview mode next to all of your other out-of-the-box triggers whenever a change event occurs, like so (check out number 8):