Beginner’s Guide to Triggers in Google Tag Manager

/

beginners-guide-to-triggers-in-gtm
Google Tag Manager makes it extremely simple to track different user interactions. The user interactions can be observed via Google Tag Manager and tracked in Google Analytics by sending something called a “Google Analytics Event.” Google Analytics Events can be defined and configured in Tag Manager by having a combination of a tag, triggers, and variables. Read more on this post to better understand the underlying mechanism of Google Tag Manager. But essentially,

  • A tag is used to collect and report an interaction to Google Analytics, or some other reporting tool.
  • A trigger is used to observe an interaction and to decide whether a tag should be fired or not.
  • A variable is used to capture some information off the page and provide that info to the triggers or tags when needed.

Google Tag Manager can automatically “listen” for actions happening on the page. When an interaction occurs, GTM will compare it against a list of expected interactions, aka triggers, and if a match is found, GTM will take action and fire the corresponding tag.

Sega Genesis Trigger

We love all types of triggers!

This blog reviews the many ways a trigger can be set up to observe, or listen to, an interaction happening on a page.

Triggers in Google Tag Manager

GTM offers several trigger types that can be used to fire tags. You can find a list of them when you create a new trigger.

Events in Google Tag Manager

  • Page View listens for the page being fully loaded and ready to view
  • Click trigger listens for any click on the page (on any type of elements)
  • Form Submission fires when a form is successfully validated and submitted
  • History Change fires when the browser history changes, i.e. a page change
  • Custom Event trigger listens to the events being pushed via the dataLayer
  • JavaScript Error fires when the scripts errors out
  • Timer fires after an interval of time

Let’s go through a few examples to see when and how some of these triggers could be used.

Page View Triggers

You want to track the pageviews, i.e. every time a page is being viewed. Which one of the above triggers do you choose? The Page View trigger. Note that within Page View triggers, there are three separate trigger types to choose from:

  • Page View fires when the GTM container code is loaded on the page. It fires even before you can see the page content. This trigger is the most basic trigger which is used often to fire a Pageview Tag. This is our “as soon as possible” trigger.
  • DOM Ready fires when the Document Object Model is ready, which means the browser is finished putting all the HTML elements in their appropriate positions. We use this if we need something to be present on the page before we fire a tag.
  • Window Loaded is the last chronologically and fires when the browser has finished rendering and displaying everything on the page.

Page View Trigger has a dropdown menu

Click Triggers

This type of trigger listens for the most common interaction a user will take, clicking their mouse.

There are two different trigger types for this trigger:

  • All Elements will literally fire anytime the mouse is left clicked. This could be on an image, a button, a link, or form element.
  • Just Links fires only when an HTML link is clicked on.

All Elements Trigger

If you want to find out if a button is being clicked on, i.e. a button with no links in it. Which trigger would you use? The Click trigger, with the All Elements trigger type. When you create a click trigger, behind the scenes, GTM would listen to every single click that is happening on the page and compare it against the conditions in the trigger you defined. Once a match is found, GTM will fire the corresponding tag.

Google Tag Manager Click Trigger Types

Here is an example showing you how to set up a trigger to track clicks on a button with class callToAction:

  • Choose Event: Click
  • Configure Trigger: Targets = All Elements
  • Fire On: Some Clicks -> Click Element — matches CSS selector — button.callToAction

Notice how we are using the CSS Selector to make sure we are only targeting buttons with the class callToAction and not any other element that might have that class. Be specific when you define your triggers.

Google Tag Manager Click Trigger Example - Tracking a button with class call to action

Link Click Triggers

You want to track the links in the navigation menu, or you want to track any link on the page, like file downloads or emails. Which trigger would you choose now? A Click trigger with a trigger type of Just Links. Check out this complete tutorial to learn how to track link clicks on your site.

For a link click trigger, select just links from menu

Another example use case for link click triggers would to track file downloads. We know to download a file we need to click on a link, so we use a link click trigger to track that action. Basically, on every link click, GTM would examine whether or not the link is meant to download a file, and if it is, GTM would fire a tag to report the download action to Google Analytics.

Sidenote: We’ve created easy, importable recipes for Google Tag Manager to tackle some of the most common tracking challenges, like our file download link recipe. We also have a outbound link recipe for links on your website that point to other websites, like your social pages or partners.

Form Submit Triggers

You want to track the successful submissions of a form. What would be the right choice for a trigger here? A Form Submission trigger. Here is an example to track a form with id equal to formID on the page www.example.com/formPage/ :

  • Choose Event: Form Submission
  • Configure Trigger: Select Check Validation
  • Enable When: Page Path — matches RegEx (ignore case) — /formPage/$
  • Fire On: Form ID — matches RegEx — formID

Google Tag Manager Form Trigger Exmample

Custom Event Triggers

You need to track a YouTube video, to find out, for example, how many times it has been watched. What would be the best choice now? A Custom Event. Custom Events are used to capture the events that were pushed into the dataLayer. The dataLayer is a code “bucket” used to pass information about both page content and user interactions to GTM.

If you define a Custom Event trigger, GTM would then examine events that have been pushed into the dataLayer, looking for a match to fire that trigger. This one is a little more complicated. You’ll have to figure out how to push new types of interactions to the dataLayer, or you may find a resource that someone else has created to do this for you.

For instance, our YouTube Tracking recipe listens for interactions with a YouTube video and then pushes those events to the dataLayer with the name “youtubeTrack.” Check out the blog post to better understand how the trigger and the tag are set up.

Google Tag Manager Custom Event Example - Youtube tracking


While this was just a quick overview of all the triggers in GTM, there is a lot more going into each single item we discussed. You can read more on our blog or consider attending our in-person Google Tag Manager workshops to learn more.

More Resources

Zee is an Analytics Engineer with a passion for user experience design. He is an advocate of simplicity, and he appreciates data-driven designs. He received a degree in Electrical Engineering from Georgia Tech where he challenged himself to solve complex engineering problems and competed at numerous coding hackathons. Zee enjoys reading, learning new languages, and helping local tech startups.

  • sarah

    This post arrived in my inbox right after I figured out how to set up a trigger on a button without a link, and right as I’m about to set up a form submission tag. Good timing! I always appreciate LM’s expertise and frequently find myself on your site as I set up new tags/triggers in GTM.

    • That’s awesome! Glad you found it useful 🙂

  • Oren Verdn

    Hey Zee, great guide! (even read it all the way through 🙂
    I have a Tag manager question that iv’e been looking for it’s answer for some time now,
    and i would really appreciate your help:

    i’m running a tag to track all clicks on outbound links from my website.
    This tag exclude clicks on internal links in the following way:

    element url Does not match RegEx .*www.sitename.*

    My question is this: does this tag currently exclude link clicks to sub-domains as well?
    If not, what do i do to exclude internal link clicks as well as link clicks to various sub domains?

    • Hi Oren,

      Have you had the chance to look into our Outbound Tracking Recipe? http://www.lunametrics.com/labs/recipes/outbound-links/

      That pretty much covers what you need.

      And regarding your trigger set up, it will work if you use something like this: {{click hostname}} — doesn’t match ignore case — sitename

      • Oren Verdn

        thank you!

  • Melody

    Hi- I have a question… where in Google Analytics can I see the results of the trigger firing? Thanks!

    • A trigger by itself can’t do much. You need to pair it with a TAG. The tag could be sending different measurements such as a pageview or an event to google analytics. Then you would be able to see the report in the All Pages or the Top Events reports. So you would need a tag first.

  • Boolean logic for event matching. It seems odd to me that if I want to create a trigger for multiple “thank you” conversion pages that have the same tag (adwords conversion) that I have to create a trigger for each page to match, instead of creating a Page view, URL Path equals /thispage/thankyou/ or URL Path equals /thatpage/thankyou/. Since there is only an AND function you cannot use the trigger in this way. That results in creating numerous triggers. Am I missing something?

    • Yes you can! You can have one trigger for all those thank you pages.

      Create a pageview trigger where Page Path — matches regex (ignore case) — /thispage/thankyou/|/thatpage/thankyou/

      The pipe character “|” stands for OR; this page or that page.

  • Magnus Bang

    Will it help the load speed of your pages, if your tags are set to trigger when DOM ready instead of Page View? And will you recommend it?

    • It won’t dramatically speed up the page load if you set your Pageview tag to fire on DOM ready. And I don’t recommend it; a user might bounce before the DOM is rendered and ready, and it is quite important to record that bounce, so it would be better to fire the pageview tag on Page View.
      On the other hand, there are some “HTML tags” that should be fired on DOM Ready such as the tags used for video tracking or scroll tracking.

  • Niv

    Hey, Is there a way to track with GTM when a specific Element is been viewed.
    For example, I want to know if a user reached by scrolling to a certain area in my page by notifying me when he viewed an Element in that area (I don’t want to implement it by calculating the percentage of the scroll bar).
    Thanks

    • Hi,
      You would need to create a custom HTML tag to implement a listener for that element; something similar to the code used in the scroll tracking recipe. In that listener, you would compare the distance from top where that element is to the distance scrolled into the viewport.

      • Pepe Sagara

        Hi Zee,
        I need something like that, I’m not proficient in javascript, (even in english) but I would like know how to fire a tag when I’m using an iframe.

        I’ll explain a little, I’m working in a website using asp.net mvc, the web site sells bus tickets, so the flow here is, select trip -> personal details -> confirm -(payment) -> order details (the last view where the purchase details are shown).
        The problem is, order details in a certain payment method is displayed inside an iframe in the confirm view, instead change to the order details view. The url does not change(abc.com/confirm).
        The controller of the last view sends the data to his view and that data is sent as html text trough a javascript function to the iframe inside the confirm view. So when that situation happens the tag is not fired, but when with other payments method the flow ends in the last view (the url belongs to the last page).
        Also the function that load the iframe with the information pushes what I want to fire into the dataLayer.
        I want to know if there are an event that fires the tag when the information its loaded to the iframe.
        P.D I got gtm.pageError when it happens.

        Hope you can help me, greetings!

        • Hi,

          Please include a couple of screenshots and explain what each one is referring to. I can take a look and let you know what I think.

          • Pepe Sagara

            Here I have the layout of the views, I have a header, a footer and the content, Firs, in the confirm – payment view the content displays the payment method availables, with payment method “a” the flow ends in the order details view and the tag is fired correctly, but with payment method “b” the flow ends inside the iframe where the payment methods was shown and the tag is not fired correctly using. https://uploads.disquscdn.com/images/b8dd48df0f78ade535d5952b8f513d1de0474324852ae64c3673c649db847c23.png

          • Pepe Sagara

            Then, here is the code where the content of the order details view is sent to the confirme-payment view through a function. 1a. the div with the id= classmod1 has the content to display, then in 2a the data is sent trough that function as well the information that I want to send to google.
            https://uploads.disquscdn.com/images/80aa9d5cd8e461410dc9b02ba1cc2f084e3ffaffdb95d6cdec32da3f6feb78e8.jpg

          • Pepe Sagara

            1B displays the data received, below starts the push to the dataLayer and next of that code the tag manager script [ (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:..]

            https://uploads.disquscdn.com/images/88bdac4456a6976a799e530e73d9f7d80f1155bb7874bd694a3e5b0514f25218.jpg

          • Pepe Sagara

            If something is not understandable please tell me.
            Thank you in advance.
            Greetings!

          • Is there a way for you to send the data out of the iframe to your site? Can you make the data available to the parent container? I’m assuming the iframe is hosted on a different site, and you don’t have the GTM code installed inside the iframe. Is my assumption correct? And can you send the transaction data out of the iframe?

          • Pepe Sagara

            The iframe is hosted in my site, I redirect to the bank inside the iframe and there the transaction is completed, after that the bank redirect to the last controller, the responsible to process the user information and generate the view with that information, I sent “datos” that contains the html and the user information embbeded and some variables with the user information that I want to fire. I dont have the GTM code installed inside the iframe.
            I got gtm.pageError and 0script Error, when I look into the tag assistant.

            I tried to use a trigger, that fires with a custom event, with no successful :/ like this: https://uploads.disquscdn.com/images/d59f62d0b874a8adf5e9e6defc4374249ee6d8cafb1672bd4efc12bbf1b3aa6d.png

          • Pepe Sagara

            And I tried the push the event in 3 different ways, all of them with no successful.

          • Pepe Sagara

            And I tried the push the event in 3 different ways, all of them with no successful.
            https://uploads.disquscdn.com/images/411ebe2c1462d1cf437f3c5a9c930a62790e71f7c33eb80b01b29d17292e7366.jpg

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.