Introduction to GTM triggers

Reading time: 9 minutes

Using a Tag Manager is a good thing, but taking all the benefits from it is a better one. After our quick Introduction to Google Tag Manager, we will speak today about the Google Tag Manager triggers. As a reminder, a trigger defines when and where a tag will be executed on your website, based on several conditions. There are several types of triggers, split on GTM into 4 categories:

  • Page view triggers
  • Click triggers
  • User engagement triggers
  • “Other” triggers

Google Tag Manager basic trigger configuration window

Google Tag Manager basic trigger configuration window

Page View Triggers

Google Tag Manager page view triggers

Google Tag Manager page view triggers

GTM offers us 3 different triggers type in the Page view category. They are:

  • Page View: this trigger fires as soon as the GTM tag is loaded on the page. That means, that it can fire before anything is visible (content, style…) on the page. It is the “earliest” trigger available.
  • DOM Ready: this trigger fires when the visitor browser has finished to put all HTML elements in position. Technically, it is when the Document Object Model (DOM) is ready.
  • Window Loaded: this trigger fires when the browser has finished to render and display everything on the page (including scripts, images, and any other element). In the Page View category, it is the “latest” one to fire.

These triggers can either be filtered to fire only when some additional conditions based on the variables are met, or fire for all the events.

Google Tag Manager Page view trigger configuration

Google Tag Manager Page view trigger configuration

Click Triggers

Google Tag Manager click triggers

Google Tag Manager click triggers

GTM offers us 2 different trigger types in the Click category. They are:

For these 2 trigger types, the following variables (built-in) are populated:

  • Click Element: the HTML element that has been clicked
  • Click Classes: the HTML “class” attribute, if applicable, on the Click Element
  • Click ID: the HTML “id” attribute, if applicable, on the Click Element
  • Click Target: the HTML “target” attribute, if applicable, of the Click Element
  • Click URL: the HTML “href” attribute, if applicable, of the Click Element
  • Click Text: the visible text inside the Click Element

In case you want a trigger for a specific HTML element, you can use these variables to filter your trigger.

Google Tag Manager click trigger configuration

Google Tag Manager click trigger configuration

User engagement triggers

Google Tag Manager user engagement triggers

Google Tag Manager user engagement triggers

Element Visibility

The element visibility trigger will fire when an HTML element becomes visible to the screen. To be more precise, it will fire when the element appears in the display area or that its CSS visibility property is set to visible.

This trigger offers a set of parameters to configure it properly:

  • the element identification: either with the element HTML ID or with a CSS selector
  • the number of time this trigger can fire: either once per page; or once per element (and per page), in case you are using a CSS selector that match several elements; or for every element and event
  • the percent of the element that needs to be visible for the trigger to fire (default is 50%)
  • a minimum “on screen duration” for this element (facultative)
  • an option to track DOM changes (otherwise, they are not taken in consideration by the trigger)

When this trigger fires, it will automatically set the 2 built-in variables “Percent visible” and “On-screen duration”, if you’ve enabled them in the Variable tab.

Google Tag Manager element visibility trigger configuration

Google Tag Manager element visibility trigger configuration

As for the previous types of trigger, you can filter this one based on the variables you have.

Form Submission

This trigger will fire when an HTML form is submitted. It is recommended to use a filter to only track some of the forms (based on the submission URL, or the form page…)
When fired, the trigger will automatically populate some built-in variables (that needs to be enabled):

  • Form Element: the HTML submit element of the form
  • Form Classes: HTML class attribute of the form
  • Form ID: HTML ID attribute of the form
  • Form Target: HTML target attribute of the form
  • Form URL: HTML href attribute of the form (if applicable)
  • Form Text: text visible inside the form

This trigger offers 2 options:

  • Wait for tags: it will delay the form submission until either tags have all been executed, or a timeout is reached. Enabling this option will delay form submission; not enabling it may prevent some tags to be executed.
  • Check validation: when enabling this option, the trigger will fire only if form submission is successful; when not enabling it, the trigger will fire every time the user tries to submit the form regardless of the success.

Google Tag Manager form submission trigger configuration

Google Tag Manager form submission trigger configuration

As other triggers, this one can also be filtered.

Scroll Depth

This trigger track scroll actions of the user. There are 2 configuration options:

  • Vertical Scroll: when the user scrolls down (only), the trigger will fire at some specific threshold defined either in pixels or in percent of the page height
  • Horizontal Scroll: when the user scrolls right (only), the trigger will fire at some specific threshold defined either in pixels or in percent of the page width

Thresholds are integers, separated by commas.

Google Tag Manager scroll depth trigger configuration

Google Tag Manager scroll depth trigger configuration

Each trigger is activated only once per page view and per threshold.

In case one or several thresholds are already visible on the screen, the trigger will automatically fire for these thresholds without any scrolling from the user.

When fired, the trigger will set values for the 3 built-in variables (that needs to be enabled):

  • Scroll Depth Threshold: the numeric value of the threshold that has fired the trigger
  • Scroll Depth Units: the units, either ‘pixels’ or ‘percent’, of the threshold
  • Scroll Direction: the direction of the scroll, either ‘vertical’ or ‘horizontal’.

As all other triggers, this one can be filtered.

Youtube Video

The Youtube Video trigger will help you tracking events on your Youtube videos.

It includes several events that can be easily used to fire the trigger:

  • Start
  • Complete
  • Pause, Seeking, and Buffering
  • Progress of the video, either in percent or in second, with custom threshold

You can also enable an advanced feature: the JavaScript API support for all videos. If you do not enable it, only the Youtube videos that have the JavaScript API support will fire the trigger. If you enable this option, your video will reload when GTM is loaded.

Google Tag Manager Youtube video trigger configuration

Google Tag Manager Youtube video trigger configuration

Other triggers

There are a few more triggers, that are not specifically page views, clicks or user engagements.

Custom Event

A custom event is based on an event name sent by the website to GTM. When received, this trigger fires.

Use of this advanced trigger will be detailed in a future article.

Google Tag Manager custom event trigger configuration

Google Tag Manager custom event trigger configuration

History Change

This trigger will fire when the URL fragment (hash) change, or when a website is using the HTML5 pushstate APIs.

This trigger will set a few built-in variables (if enabled):

  • History Old URL Fragment: the URL fragment (hash) before the change
  • History New URL Fragment: the URL fragment (hash) after the change (as it is now)
  • History Old State: the old history state object, controlled by the site’s calls to pushState
  • History New State: the new history state object, controlled by the site’s calls to pushState

Google Tag Manager history change trigger configuration

Google Tag Manager history change trigger configuration

JavaScript Error

This trigger will fire when an uncaught JavaScript error occurs.

This trigger will set a few built-in variables (if they are enabled):

  • Error Message: the text of the JavaScript error message
  • Error URL: the URL of the page on which the error was raised
  • Error Line Number: the code line number, where the error was raised

Google Tag Manager JavaScript error trigger configuration

Google Tag Manager JavaScript error trigger configuration

Timer Trigger

The timer trigger will fire based one timer. It may fire once, or many time, at a regular interval. The configuration parameters are:

  • Event Name: the name of the event generated (default: gtm.timer)
  • Interval: the interval according to which the trigger will fire
  • Limit: the number of time the trigger will fire

The trigger will then fire every ‘Interval’ for a maximum of ‘Limit’ times.

Google Tag Manager timer trigger configuration

Google Tag Manager timer trigger configuration

 

We’ve seen in this article all the “built-in” triggers of Google Tag Manager, including the “custom event” trigger, that we can use to create any trigger based on custom events. Triggers are very important in Google Tag Manager as they rule the tag execution. Having precise triggers is important, so we are sure to track the events we are looking for. In future articles, we will have a deeper look at some specific triggers that need a bigger focus.

 

 

Sources & Copyright:


Stay updated! Join our newsletter for webanalysis tips