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
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.
GTM offers us 2 different trigger types in the Click category. They are:
- Just Links: in that case, the trigger will fire only on links HTML elements ( tags)
- All Elements: it means that everywhere a visitor will click, the trigger will fire. Using filters will allow you to know that some HTML elements that are not links have been clicked.
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.
User engagement triggers
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.
As for the previous types of trigger, you can filter this one based on the variables you have.
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.
As other triggers, this one can also be filtered.
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.
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.
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:
- Pause, Seeking, and Buffering
- Progress of the video, either in percent or in second, with custom threshold
There are a few more triggers, that are not specifically page views, clicks or user engagements.
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.
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
This trigger will set a few built-in variables (if they are enabled):
- 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
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.
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.