Exploring all trigger types in Google Tag Manager: a comprehensive guide

 

Have you ever found yourself pondering over the enigmatic realm of Google Tag Manager triggers, with questions swirling in your mind about their functionalities, implementations, and practical uses?

From Form Submission triggers to YouTube Video triggers, we’ll explore each type in detail, providing you with valuable insights and practical examples along the way.

Whether you’re a beginner or an experienced user, this post will equip you with the knowledge you need to leverage the power of triggers effectively. So, grab a cup of coffee, sit back, and prepare to delve into the fascinating realm of Google Tag Manager triggers!

Types of triggers

Every tag is activated in response to specific events. When an event is detected by Google Tag Manager, it evaluates the relevant event triggers and activates the associated tags.

In Tag Manager, you can use various trigger types to capture events such as page views, button clicks, form submissions, or any custom event that you define.

Page View Triggers

Google Tag Manager offers page view triggers that allow tags to be fired when web pages are loaded in browsers. There are five types of triggers based on page load events, each with specific criteria for determining when the trigger should activate.

The order of precedence for page view triggers is as follows:

1. Consent Initialization

   This trigger ensures that consent settings are honored before other triggers are fired. It is used for tags that manage user consent state, such as Consent Management Platform tags or those that set consent defaults. A Consent Initialization – All Pages trigger is included by default in each web container. Note that this trigger is not suitable for tags that require early firing; instead, use an Initialization trigger. For more information on consent settings, refer to the relevant documentation.

2. Initialization

   This trigger fires before all other triggers except Consent Initialization triggers. An Initialization – All Pages trigger is included by default in each web container. Select this trigger to activate tags that should fire before other triggers.

3. Page View

   This trigger immediately fires when a web browser starts loading a page. Choose this option when you only need data generated from page impressions.

4. DOM Ready

   This trigger fires after the browser has finished constructing the full page in HTML, and the Document Object Model (DOM) is ready for parsing. Use this trigger type for pageview-based tags that interact with the DOM to populate variables, ensuring that the correct values are available to Tag Manager.

5. Window Loaded

   This trigger fires after the page has completely loaded, including embedded resources like images and scripts.

How to create a new page view trigger

1. Go to Triggers and click on New.
2. Select Trigger Configuration and choose the desired page view trigger type.
3. Optionally, improve performance by specifying conditions, typically a URL pattern, for pages where you expect the trigger to activate:
   • Under “This trigger fires on,” select “Some Events.”
   • Under “Fire this trigger when an Event occurs and all of these conditions are true,” add a filter to enable the trigger only on relevant pages. For example, set the condition “Click URL contains /path/to/promo” to restrict the trigger to specific pages.
4. Save the trigger and publish your changes.

Back To Index ↑

Click Triggers

Utilize the click trigger feature in Google Tag Manager to activate tags based on click events. When an element on a page is clicked and meets the trigger conditions, Tag Manager will automatically populate values for any active click-based built-in variables.

How to configure a click trigger

1. Navigate to the Triggers section and click on “New”.
2. Select “Click Trigger Configuration” and choose the desired click trigger type:
   • All Elements: Track clicks on any element present on a page, including links, images, buttons, and more.
   • Just Links: Track clicks exclusively on HTML links that use the <a> element, such as <a href=”www.google.com”>Google.com</a>.
3. For “Just Links” triggers, there are optional settings you can configure:
   • Wait for Tags: Enable this option to delay triggering until all tags have fired or until the specified timeout has elapsed.
   • Check Validation: Only fire tags when the link click is considered a valid action. If unchecked, the trigger will fire tags whenever any link is clicked.
4. Optionally, for improved performance, you can specify conditions (typically a URL pattern) for pages where you expect clicks to occur:
   • Under the “This trigger fires on” section, select “Some Clicks”.
   • Under the “Fire this trigger when an Event occurs and all of these conditions are true” section, add a filter to enable this trigger only on relevant pages. For example, you can use the condition “Click URL contains /path/to/promo” to restrict the trigger to specific pages where the click is expected.

Follow these steps to configure your click trigger and enhance the functionality of your tags.

Back To Index ↑

Element Visibility Trigger

Google Tag Manager’s element visibility trigger is designed to activate when a specific element becomes visible within the viewport of a web browser.

This trigger can be triggered by various events such as page loads, scrolling, when a browser tab is brought to the foreground, or programmatic routines that affect the element’s position or visibility.

How to configure an element visibility trigger

1. Go to the Triggers section in Google Tag Manager and click on “New.”
2. Select “Trigger Configuration” and choose the Element Visibility trigger type.
3. Use the Selection Method menu to choose whether to select elements by ID attribute or CSS selector:
   • ID: Select a single element based on its ID attribute value.
   • CSS Selector: Select one or more elements based on a specified CSS selector pattern.
4. Choose one of the following options to determine the firing frequency of the trigger:
   • Once per page: The trigger fires only once per page. If multiple elements match the ID or CSS selector on a given page, the trigger will fire the first time any of them become visible. If the page is reloaded or the user navigates to a new page, the trigger will reset and may fire again based on the visibility of the selected element.
   • Once per element: The trigger fires once per selected element per page. If multiple elements match the CSS selector on a page, the trigger will fire the first time each of them becomes visible. If multiple elements on a page share the same ID, only the first matched element will fire the trigger. However, if the “Observe DOM changes” option is enabled in the advanced settings and a DOM change removes the first matched element, the trigger may fire again. The trigger will reset and may fire again based on the visibility of the selected element when the page is reloaded or the user navigates to a new page.
   • Every time an element appears on-screen: The trigger fires every time a matched element becomes visible, either programmatically or through user interaction.

Advanced options

• Minimum Percent Visible: By default, the trigger fires when the selected element is at least 50% visible. You can specify a different percentage value for the trigger to fire based on the element’s visibility.
• Set minimum on-screen duration: Enable this option to specify how long the selected element must be visible (at the specified minimum percent visible) before the trigger fires. By default, the trigger fires as soon as the element becomes visible.
• Observe DOM changes: Enable this option to track matched elements that appear as the DOM changes.

When the element visibility trigger fires, the following variables are automatically populated:

• Percent Visible: A numeric value (0-100) indicating the percentage of the selected element that is visible when the trigger fires.
• On-Screen Duration: A numeric value indicating the number of milliseconds the selected element has been visible before the trigger fires.

Please note that when multiple elements on a page match the trigger, it may impact page performance. It is recommended to use a CSS selector that does not match a large number of elements or use the ID selection method for optimal performance.

Back To Index ↑

Form Submission Trigger

The form submission trigger in Google Tag Manager enables you to fire a tag when a form is submitted.

How to set up a form submission trigger

1. Go to the Triggers section in Google Tag Manager and click on “New”.
2. Choose “Trigger Configuration” and select the Form Submission trigger type.
3. The “Wait for Tags” option allows you to delay the form submission until all the tags that depend on this trigger have fired or the specified timeout has elapsed. If not selected, slower tags may not fire before the form submission causes the next page to load.

The “Check Validation” option determines whether the trigger should fire only if the form submission is successful. If not selected, the trigger will fire whenever a user attempts to submit the form.

Note: To optimize performance, it’s recommended to specify conditions, such as a specific URL, where you expect the form submission to occur. Under “This trigger fires on”, select “Some Forms” and add a trigger filter to specify the form action’s location.

When a form submission trigger fires, the following built-in variables are populated:

• Form Element: The form element that was clicked.
• Form Classes: An array of values found in the form’s class attribute.
• Form ID: The ID attribute of the form element.
• Form Target: The target attribute of the form element.
• Form URL: The href attribute value of the form element, if any.
• Form Text: The visible text inside the form.

By utilizing the form submission trigger, you can track and analyze user interactions with your forms to gain valuable insights and enhance your website’s performance.

Back To Index ↑

Scroll Depth Trigger

The Scroll Depth trigger in Google Tag Manager allows you to track and measure scroll events on a web page.

How to configure the Scroll Depth trigger

1. Open Google Tag Manager and go to the Triggers section.
2. Click on “New” to create a new trigger.
3. Choose “Trigger Configuration” and select the Scroll Depth trigger type.
4. Select the scroll depth options:
   • Vertical Scroll Depths: Fire based on how far down a user has scrolled the page.
   • Horizontal Scroll Depths: Fire based on how far to the right a user has scrolled the page.
   • You can use both vertical and horizontal scroll depth values in the same trigger.
   • Set scroll depths as percentages of the page height and width or as pixels. Enter positive integers separated by commas to specify the desired scroll depth thresholds.

   For example, if you select percentages and enter 10, 50, 90, the trigger points will be set at 10%, 50%, and 90% of the page height. When this trigger is applied to a tag, it will fire three times when a user scrolls to those thresholds.

5. The trigger will only fire once per threshold per page. If the user scrolls back up, the trigger will not fire again unless the page reloads or the user navigates to a new page with the same trigger.
6. For pages with infinite scrolling or significant variations in size, consider using the element visibility trigger instead.
7. Specify when the trigger should be enabled:
   • Container Load (gtm.js): Enable as soon as possible after the page begins to load.
   • DOM Ready (gtm.dom): Enable after the DOM is ready to be parsed.
   • Window Load (gtm.load) (default): Enable after all initial content on the page has loaded.

   Note: It is recommended to enable the trigger after the window has fully loaded (Window Load – gtm.load) to ensure accurate calculations of page dimensions.

When the Scroll Depth trigger fires, the following variables are automatically populated:

• Scroll Depth Threshold: Numeric value indicating the scroll depth that triggered the event.
• Scroll Depth Units: Indicates whether the threshold is specified in pixels or percentages.
• Scroll Direction: Indicates the direction of the scroll event (vertical or horizontal).

By using the Scroll Depth trigger, you can gain insights into user engagement and behavior on your web pages based on their scrolling patterns. This information can be valuable for optimizing content, analyzing user experience, and making data-driven decisions.

Back To Index ↑

YouTube Video Trigger

The YouTube Video trigger allows you to fire tags based on interactions with embedded YouTube videos on web pages.

Before using the YouTube Video trigger configuration, make sure to enable the built-in video variables that capture data about the video and its playback status. This data is pushed to the data layer with each interaction.

How to set up a YouTube Video trigger

1. Go to Triggers and click on New.
2. Choose the YouTube Video trigger type in the Trigger Configuration.
3. Configure the trigger settings:Capture Options:
   • Start: Triggers an event when the video begins to play.
   • Complete: Triggers an event when the video finishes.
   • Pause, Seeking, and Buffering: Triggers the event if the video is paused, the scrub bar is moved, or if the video buffers.
   • Progress: Triggers events at specific video progress points defined by percentage or time thresholds.
     • Percentages: Enter a comma-separated list of integers representing percentages (e.g., 5, 20, 50, 80 for 5%, 20%, 50%, and 80% respectively).
     • Time Thresholds: Enter a comma-separated list of integers representing time thresholds in seconds (e.g., 5, 15, 60, 120 for 5 seconds, 15 seconds, 60 seconds, and 120 seconds respectively).

   Note: The trigger will only fire the first time a percentage or time threshold is reached. If the user seeks past a threshold, the event will not fire.

   Advanced:

   • Add JavaScript API support to all YouTube videos: Enable this option to append the enablejsapi parameter to YouTube video player URLs. This allows control of the player via iFrame or JavaScript.

   Enable this trigger on:

   • Container Load (gtm.js): Enable as soon as possible after the page begins to load.
   • Window Load (gtm.load) (default): Enable after all initial content on the page has loaded.
   • DOM Ready (gtm.dom): Enable after the DOM is ready to be parsed.

   Note: It is recommended to wait until the window has fully loaded before enabling the trigger for best results.

YouTube Video triggers will function both on and after page load as long as one of the following is present when Tag Manager loads:

• An embedded YouTube video.
• The YouTube IFrame API <script>.

Back To Index ↑

Custom Event Trigger

The custom event trigger allows you to track interactions on your website or mobile app that deviate from standard methods. It is commonly used when you want to track form submissions that have been customized or overridden with alternative behavior.

How to create a custom event trigger

1. Go to Triggers in Google Tag Manager and click on New.
2. Choose the Custom Event trigger type in the Trigger Configuration.
3. Enter an event name for your custom event. You can also select “use regex matching” to enable regular expression handling for this field.

Example Configuration:

Here’s an example configuration for a web scenario where a tag should be fired when a custom event named ‘button1-click’ is pushed to the data layer:

1. Add the following code to your website that pushes the custom event to the data layer when a button is clicked:
   

   <a href=”#” name=”button1″ onclick=”dataLayer.push({‘event’: ‘button1-click’});”>Button 1</a>

2. Create a new custom event trigger in Google Tag Manager with the following settings:
   • Event name: button1-click
   • This trigger fires on: All Custom Events

When the specified button is clicked, a custom event with the value of ‘button1-click’ is pushed to the data layer. Google Tag Manager detects this custom event and triggers the associated tag.

You can use the dataLayer.push() method to send multiple variables along with the event. For example, you can send a conversion value with the custom event name like this:

dataLayer.push({‘event’:’button1-click’,’conversionValue’:25});

In Tag Manager, create a data layer variable and use this variable in the conversion value field of your Google Ads conversion tracking tag.

Practical example: Custom Event Trigger

Let’s say you have an e-commerce website, and you want to track when users add items to their shopping carts. However, the add-to-cart functionality on your website doesn’t trigger the default events that Google Analytics or other tracking tools recognize.

To track the add-to-cart events using a custom event trigger in Google Tag Manager, follow these steps:

1. 1. Add the custom event tracking code to your website: Whenever a user adds an item to their cart, you need to push a custom event to the data layer. This can be done using JavaScript. For example, when the “Add to Cart” button is clicked, you can add the following code to your website:
      

      <button onclick=”dataLayer.push({‘event’: ‘add-to-cart’, ‘product’: ‘Product Name’, ‘price’: 29.99});”>Add to Cart</button>

      In this code, we’re pushing a custom event called ‘add-to-cart’ to the data layer, along with additional information like the product name and price.

   2. Create a new custom event trigger in Google Tag Manager:
      • Go to Triggers in Google Tag Manager and click on New.
      • Choose the Custom Event trigger type in the Trigger Configuration.
      • Enter the event name as ‘add-to-cart’ (matching the event name in the code above).
   3. Configure the associated tag:
      • Create a new tag in Google Tag Manager that will be fired when the ‘add-to-cart’ event is triggered.
      • Set up the necessary tracking or analytics tag that you want to fire when a user adds an item to their cart.
   4. Test and publish:
      • Save your changes in Google Tag Manager and preview the changes on your website.
      • Test the add-to-cart functionality by adding an item to the cart.
      • Verify that the custom event trigger is working correctly and firing the associated tag.
      • Once you’re satisfied with the results, publish the changes in Google Tag Manager.

By using the custom event trigger, you can track the specific ‘add-to-cart’ events on your website, even if they don’t trigger the default events recognized by analytics tools.

This allows you to gather valuable data on user behavior and optimize your e-commerce tracking and analytics based on these custom events.

Back To Index ↑

History Change Trigger

By utilizing the History Change trigger, you can fire tags based on changes in the URL fragment or when a site utilizes the HTML5 pushstate API.

This trigger is particularly beneficial for tracking virtual pageviews in single-page web applications, where the URL fragment changes dynamically without full page reloads.

How to set up a History Change trigger

1. Go to your Google Tag Manager account and navigate to the desired container.
2. Click on “Triggers” and then select “New” to create a new trigger.
3. In the Trigger Configuration, choose the “History Change” trigger type.
4. When a history change event occurs, the following variables will be populated automatically:
   • History old URL fragment: Represents the previous URL fragment before the change.
   • History new URL fragment: Represents the updated URL fragment after the change.
   • History old state: Refers to the previous history state object, which is controlled by the site’s calls to pushState.
   • History new state: Refers to the new history state object, which is controlled by the site’s calls to pushState.

You can leverage the populated variables to track and analyze user interactions, customize tag firing conditions, or perform other actions based on the specific history change event.

Back To Index ↑

JavaScript Error Trigger

The JavaScript error trigger is designed to fire tags when an uncaught JavaScript exception (window.onError) occurs. You can utilize this trigger to log error messages in an analytics tool or perform any other desired actions when an error is detected.

When configuring a tag associated with this trigger, you can use the JavaScript error variable to capture the error message and include it in the tag payload.

This allows you to send the value of the error message variable to your analytics tool or perform other relevant actions based on the captured error information.

How to set up a JavaScript error trigger

1. Go to the “Triggers” section in Google Tag Manager and click on “New”.
2. Choose the “JavaScript Error” trigger type from the available options.
3. When the JavaScript error trigger fires, it populates the following built-in variables:
   • Error Message: This variable contains the text of the JavaScript error message.
   • Error URL: This variable holds the URL of the page where the error occurred.
   • Error Line: This variable provides the line number in the code where the error was detected.

   Note that the JavaScript Error trigger will only capture errors that occur after Tag Manager has loaded, and it specifically captures uncaught exceptions.

Back To Index ↑

Timer Trigger

The Timer trigger in Google Tag Manager allows you to send events at specified time intervals. This trigger is useful for measuring the duration of user interactions on a page, such as reading an article, completing a form, or making a purchase.

How to set up a new Timer trigger

1. Go to “Triggers” and click on “New” in Google Tag Manager.
2. Choose the “Timer” trigger type in the Trigger Configuration.
3. The default value for the Event Name is “gtm.timer”, which is the name of the event passed to Tag Manager. In most cases, you won’t need to modify this value. However, you can use a custom event name if desired.
4. Specify the Interval in milliseconds. This determines how frequently the trigger will fire, such as every 5000 milliseconds (5 seconds).
5. Optionally, you can set a Limit value to specify the maximum number of times the trigger will fire. Leaving this blank will allow the trigger to continue firing events until the user leaves the page.
6. In the “Enable this trigger when all of these conditions are true” section, you can specify additional conditions using variables, operators, and values. This step helps optimize website performance by enabling the trigger only when necessary.
7. Save the trigger and publish the container to make it active.

Back To Index ↑

Trigger Group

The trigger group will evaluate the conditions of all the selected triggers as a whole. It will only fire and trigger the associated tags after all the selected triggers have fired at least once.

If you have added multiple instances of the same trigger, each instance will need to fire the corresponding number of times before the trigger group fires.

Trigger groups are useful when you want to create more complex conditions for firing tags, by combining multiple triggers and defining specific requirements for them to be met.

How to create a trigger group

1. Go to “Triggers” and click on “New”.
2. Choose the “Trigger Group” type in the Trigger Configuration.
3. Click on “Add” and select two or more triggers from your container that you want to combine.
4. Click on “Add” to add the selected triggers to the group.
5. (Optional) If you want to require multiple instances of the same trigger before the group fires, click on “Add” again and select the desired trigger. Repeat this step for the number of times you want that trigger to occur before the group fires.
6. Click “Save” to save the trigger group.

Back To Index ↑