#GTMTips: Simple custom event listeners with Google Tag Manager – News Couple

#GTMTips: Simple custom event listeners with Google Tag Manager

First of all, check out this article for an overview of how custom event listeners work in Google Tag Manager. The reason I’m writing this #GTMTips article is because I want to upgrade the solution a bit, and I want to bring it back into the spotlight. why? Because it is still one of the most effective ways to customize the implementation of Google Tag Manager.

a Custom event listener It is a wizard that you write using JavaScript. It allows you to handle any JavaScript DOM events, such as click, form submit, mouse move, drag, touch, error, page load and unload, and much more. It also allows you to take advantage of a file useCapture A parameter that will be very useful if you have another JavaScript on the site that interferes with GTM’s default event triggers.


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

Tip 69: Easily create custom event listeners

The solution consists of the following elements: a Custom HTML tag fire with page load, and custom javascript variable Provide a callback. You will also need a set of files data layer variables To fetch the values ​​that were pushed to dataLayer by callback.

The idea is that when the page loads, you attach your custom listener to whatever element you want to track for the given event. Then, when this interaction is recorded by the browser, the code pushes an object to dataLayer Which you can then use to fill in your scores.

Custom HTML tag

This is what your custom HTML tag will look like.

  (function() )();

call this a page width Trigger if attached directly to a coil document knot, or a DOM ready Trigger if attached directly to an object and the item is in a file HTML source, or a Loaded window Trigger if attached directly to an element that was added dynamically to the page during page load.

Make sure to change eventName A value to reflect the event you want to track. If you want to track clicks, change it to click. If you want to track users who hover over the item, change it to mouseover, and so on.

You can choose to add the listener directly to an element using the appropriate CSS selector as parameter for document.querySelector(). Alternatively, you can add the listener directly to a file document node.

Finally, you can set useCapture to me false If you want to use bubble stage instead of capture stage with event handler. Since you are simply tracking interactions and not really creating any side effects, I would really recommend leaving this as it is. true.

This is important especially if you have another JavaScript on the site that is messing with event propagation. The typical symptom of this is that you have Format and links only Catalysts They refuse to work. So using file capture Phase, you’re evading the javascript that stops publishing, and you may only be able to track those events when the default GTM triggers can’t.

The last line actually adds the listener, providing a custom JavaScript variable as the callback.

custom javascript variable

This is what JS – generic event response It should look like:

  return function(event) 

This callback pushes a set of information about the event to dataLayer, spacing everything with a stretch custom.gtm. Abbreviation. The event name will be the same custom.event.<event name>, for example custom.event.click for click event or custom.event.dragstart When tracking the checkout procedure.

Variables pushed to dataLayer Reflects those used by GTM’s default triggers, except for custom.gtm.originalEvent which will contain a reference to the original event that triggered the callback. This is important if you need information from this event object, such as which mouse button was clicked when a click was recorded. This is (currently) missing from the default launcher functionality for GTM.

data layer variables

You need to create a data layer variable for each of the keys being pushed into dataLayer. To mimic the Google Tag Manager naming scheme for inline variables, you can use something like the following:

variable name Data layer variable name
custom event element custom.gtm.element
Custom event categories custom.gtm.elementClasses
Custom event ID custom.gtm.elementId
Custom event target custom.gtm.elementTarget
Custom event URL custom.gtm.elementUrl
Original custom event custom.gtm.originalEvent

Custom event trigger

To activate your tags when registering a custom event, you will need to set a custom event trigger to the name of the event it was pushed to dataLayer In the callback of the custom JavaScript variable. So, to follow an example dragstart event (recorded when the user starts to drag the selected element into the browser), the trigger will look like this:

custom event trigger for dragstart

Work example

Let’s deal with an issue you might have on your site. You want to trace a form element by ID contactUs, but no matter what you do, the GTM’s model launcher refuses to fire it. I’ve looked around, read my articles, and come to the conclusion that the problem is with another javascript on the site that stops posting the event submit form. A friendly local developer tells you that due to the nature of the plugin you are using, it is impossible to change this behavior.

Listeners event dedicated to the rescue! You can trust in useCapture Tag to keep track of form submission even if posting is turned off. Here’s what’s file Custom HTML tag will look like:

  (function() )();

Add DOM ready to this tag, set to activate on pages that have this form specified in the HTML source.

Now, whenever a form submission is detected, your custom HTML tag will fire, pushing the next object to dataLayer:

    'event': 'custom.event.submit',
    'custom.gtm.element': form#contactUs,
    'custom.gtm.elementClasses': '',
    'custom.gtm.elementId': 'contactUs',
    'custom.gtm.elementTarget': '',
    'custom.gtm.elementUrl': 'https://www.domain.com/my-form-handler/',
    'custom.gtm.originalEvent': submitEvent

You can choose these variables using the data layer variables you created earlier.

You will only need a file Custom event trigger, where is the event name The field has the value custom.event.submit.

Once you attach this trigger to your tag, you can use the data layer variables to populate all relevant fields.


Whenever I talk about GTM to someone, and that is often, I always end up talking about the many ways we can customize Google Tag Manager to work more efficiently on our websites. Custom event listeners are still, after all these years, my favorite way to customize a GTM setup.

It gives you a lot of power in tracking user interactions on the site.

As always, I hope GTM will continue to release new virtual starters for us. I’ve always dreamed of an “empty” event trigger, where you simply have to add the name of the DOM event, and it will also have a checkbox for whether you want to use capture set or not. This would make a custom solution redundant, but that’s only a good thing in my book.

Have you created any creative custom event listeners in your GTM settings?

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button