How to Use Timer Listeners in Google Tag Manager

  • Clock

How to Use Timer Listeners in Google Tag Manager

Do you have long pages on your website or a blog with a high bounce rate?

Visitors may not actually be bouncing.

The bounce rate metric, which measures the percentage of sessions whereby a person left your website from the entrance page without interacting with the page, is often misleading.  It can even be downright depressing for blogs and long pages because if a page viewed has no further interactions and is the last or only hit in the session, than Google Analytics will assign the page a time of zero. This leads to the wrong conclusion that the individual bounced, increasing your bounce rate, when they in fact did not.

Event Listeners in Google Tag Manager have made it easy to capture on-page interactions like link clicks, downloads, button clicks, and form submits. Simply add a new Event Listener tag of your choice, create a corresponding rule, and use that rule to trigger an appropriate Google Analytics (or other) tag. No custom coding required.

Aside from tracking clicks and form submits, GTM also provides an automated Timer Listener. This particular event listener allows you to trigger tags to fire at specified intervals.

Now, while it may be easy to see why tracking clicks and form submissions would be useful, perhaps it’s not immediately obvious why you would want to fire tags at specific time intervals.

The most common way that we use Timer Listeners is to track the time a user spends on a particular page. Wait, doesn’t Google Analytics track Time on Page automatically? Well, yes and no. GA calculates time spent on a given page by taking the difference between the timestamp of that pageview and the timestamp of the subsequent hit. But if a pageview is the last (or only) hit in the session, GA will assign it a time of zero.

That’s where Timer Listeners come in! If you’re using GTM (and if you’re not, you should be), Timer Listeners give you a simple way to get more accurate metrics for time on page, session duration, and bounce rate in Google Analytics.

Let’s look at how to setup a Timer Listener for maximum usefulness and efficiency.

If you are using Google Tag Manager’s Version 2 interface, check out the updated version of this post: How to Use Timer Triggers in Google Tag Manager [V2].

Basic Implementation

  1. To get started, you will need to have a Google Tag Manager account and permissions to edit your website’s GTM container.
  2. Create the Timer Listener tag as follows:
    1. Add a new tag. Select Event Listener > Timer Listener as the Tag Type.
    2. Enter the desired timer interval in milliseconds, e.g. For a 30 second timer, enter 30000, and set the timer limit to 1 (For recurring timers, see Advanced Implementation instructions below).Creating the Timer Listener tag in GTM
    3. Set the firing rule to “All pages”, or create a rule that matches your target pages.
  3. Create a new Timer event rule: {{event}} equals gtm.timerCreating the Timer Event Fired rule in GTM
  4. Create a new Universal Analytics event tag. Set the rule you created in the previous step as the firing rule. Enter appropriate values for Event Category, Action, and Label.

That’s it! You can now use GTM’s Preview & Debug mode to see your new tag in action. Once you are happy with the configuration, save a new container version and publish.

Advanced Implementation

Now, let’s crank it up a notch. What if you want to record multiple timer events from the same timer listener? A single 30 second timer is better than nothing, but what if visitors are spending 5, 10, or as much as 20 minutes on a single page before leaving your site? With only a 30-sec timer, your session duration metric could be hugely misleading.

Here is an implementation strategy to fire recurring timer events every 30 seconds and appropriately labeling those events in GA:

  1. As above, you will need access to your GTM container.
  2. Create the Timer Listener tag.
    1. Add a new tag. Select Event Listener > Timer Listener as the Tag Type.
    2. Set the timer interval as above, but leave the limit field blank. This will allow the timer listener to fire indefinitely until the user leaves the page or closes their browser.
    3. Since a recurring timer will generate a lot of events, you may also wish to restrict this tag to certain pages by choosing a different firing rule, e.g. your home page, articles and blog posts, or other pages that have high exit rates.
  3. Create two new macros to capture the timerEventNumber and timerInterval auto-event variables as follows. At least right now, GTM does not create these macros by default:
    1. Create a new macro named timerEventNumber, set to the value of the gtm.timerEventNumber variable in the data layer. This will return the count of the number of times that the timer listener has fired on the page. Creating the timerEventNumber macro in GTM
    2. Create a new macro named timerInterval. Exactly as above, but with gtm.timerInterval as the data layer variable name. This will return the timer interval that you have specified in the listener tag.
  4. Configure your Universal Analytics event tag as follows,Using the timerEventLabel macro in GTMwhere {{timerEventLabel}} is a custom JavaScript macro defined as:
    function() {
      var elapsed = {{timerEventNumber}} * {{timerInterval}} / 1000;
      var min = Math.floor(elapsed/60);
      var sec = elapsed % 60;
      return min + 'm ' + sec + 's';
    }

    The timerEventLabel macro returns the elapsed time in minutes and seconds, based on timerEventNumber and timerInterval.

  5. Save, test, and publish!

You can of course modify the variable names or interval length to better match your current website and GTM implementation.

For more information, check out the Google Analytics Help Centre article about Event Listeners in Google Tag Manager. If you are already using Google Tag Manager’s Version 2 interface, check out How to Use Timer Triggers in Google Tag Manager [V2].

Let us know what you think about Timer Listeners and how you are utilizing them in GA!

By |2019-05-17T11:57:16-04:00October 9th, 2014|18 Comments

18 Comments

  1. Luc October 10, 2014 at 9:32 am - Reply

    Many thanks for this tuto. I did it on my blog and it works very well.

    • Kristina Brown October 14, 2014 at 9:16 am - Reply

      Thank you for sharing your comment Luc!
      If you have any suggestions for future topics, please let us know.

  2. Janis November 13, 2014 at 4:54 am - Reply

    Are there problem in Custom Javascript code?

    • Marc Soares November 20, 2014 at 10:39 am - Reply

      Hi Janis. Thank you for your comment. Did you experience issues using Custom Javascript to set up Timer Listeners in GTM?

  3. Matt December 16, 2014 at 10:04 am - Reply

    I think the end of the last line of custom JavaScript should be a semi-colon not a comma.

    • Marc Soares December 16, 2014 at 10:29 am - Reply

      Thanks Matt! You’re right. I have updated the post. Hope you found it helpful. Let us know if there are any other topics you would like to see us write about.

  4. patrick February 25, 2015 at 11:02 am - Reply

    Hi there,
    maybe I dont see it but is’nt there a much easier way to measure this just by setting up advanced segments? or what would you say is the advantage of using the time listener in GTM to measure the bounce rate this way?

    Thanks for your Feedback

    • Marc Soares February 25, 2015 at 6:24 pm - Reply

      Hi Patrick,

      Thanks for your question. In Google Analytics, the bounce rate is the number of single-page sessions as a percentage of total sessions. It is the proportion of visits in which the user landed on your site and immediately left without any further interaction. It doesn’t matter if the user spends 2 seconds, 2 minutes, or 20 minutes on the page; If there is no subsequent hit sent to GA, the session is counted as a bounce.

      This can be a problem for single-page websites and sites with blog posts or articles. In these cases, single-page sessions are common, as users are likely to view a single page, post, or article and then leave the site. By sending a timer event at 30 seconds, we’re telling GA that any session longer than 30 seconds should not be counted as a bounce. This results in a more meaningful bounce rate, since the metric then includes only single-page sessions of less than 30 seconds.

      • patrick February 26, 2015 at 9:12 am - Reply

        Hi Marc,
        well my point is that you dont necessarily have to use the google tag manager since you can find out this data (e.g. Sessions < 30 seconds) easily by using advanced segments.

        • Marc Soares February 26, 2015 at 11:37 am - Reply

          GA calculates time spent on a given page by taking the difference between the timestamp of that pageview and the timestamp of the subsequent hit. But if a pageview is the last (or only) hit in the session, GA will assign it a time of zero.

          So, single-page sessions will by default have a time of zero. The user could have spent a significant time on the page, but without a subsequent hit, it will appear as zero in GA. If you use an advanced segment to capture sessions with Session Duration < 30, you will be including all single-page sessions, even though many of these could have been longer than 30 seconds. The timer tracking enables you to distinguish the true "under-30-second" sessions by providing a second hit to GA, thus allowing it to calculate a more precise session duration. As previously mentioned, it also produces a more precise bounce rate.

          • patrick March 4, 2015 at 5:08 am - Reply

            Hi Marc,

            thanks for your reply – got it. Can you give me a hint how to connect this data (this event i track) now to the given Data i have in GA. So how to illustrate this in GA? Cheers, ~Patrick

            • Marc Soares March 4, 2015 at 11:21 am

              Once you have configured the timer event, you will need to create a rule that matches that event (See Step 3 in the Basic Implementation above). Then you would create a GA tag that fires based on that rule (See Step 4). This will send a hit to GA whenever your timer event fires.

              You will then be able to see the data directly in your Events reports and indirectly as an impact on your bounce rate and session duration metrics.

  5. Rob February 27, 2015 at 9:59 pm - Reply

    Hi Marc,

    Thanks for your great article. I’m using DFA Floodlight tags to track on-site actions on my client’s website and would like to fire a pixel after a user spends 3 minutes or more on site. Do you know if the GTM Timer Listener approach you’ve outlined above could be used to achieve this?

    Thanks,
    Rob

    • Marc Soares March 2, 2015 at 12:35 pm - Reply

      Hi Rob,

      That is an interesting question. The approach above is designed to track time on page, but with some creativity, it could conceivably be modified to track time on site.

      The challenge is that GTM loads as a new instance on each page (and the data layer does not persist). So on any given page, GTM cannot access information about previous pages in the session. However, we often resolve such a situation through the use of cookies, i.e. setting a value in a cookie on one page and then retrieving it from the cookie on the next page.

      For time on site, you would essentially need to replicate on the client-side the same type of calculation that GA does on the server-side for session duration. You would need to keep track of the timestamp at which the session began, and then calculate the difference to the timestamp of the current page.

      So, consider an implementation like this:

      • On every page, store a timestamp of the page load in a cookie, unless that cookie already contains a timestamp within the last 30 minutes. This will preserve the timestamp of the first page of the session.
      • Configure a timer listener, where the interval parameter is a custom javascript macro defined as: 3 min – (Timestamp of current page – Timestamp of first page in session). You would need to block this timer listener after 3 minutes has elapsed in the session.
      • Set your Floodlight tags to fire on the timer event.

      The result should be that your Floodlight tags will fire when 3 min have elapsed in the session.

      Hope that points you in the right direction. Let me know how it works out.

  6. François April 29, 2015 at 4:54 am - Reply

    Hi Marc,

    Thank you for this article. In the debug mode of GTM I can see that the timerEventLabel is equal to the time. It works well 🙂

    But in Analytics, the timerEventLabel = NaNm NaNs !

    Do you know what cause this problem ?

    Thank you !

    • Marc Soares April 29, 2015 at 9:14 am - Reply

      Hi François,

      The NaN is the result of a “Not a Number” error in JavaScript. This indicates that something is going wrong in your timerEventLabel custom JavaScript macro. Please check that you have defined the timerEventLabel macro as shown above and that you have also properly defined the timerEventNumber and timerInterval macros. Also, make sure that your GA event tag is set to fire upon the gtm.timer event in the rule as shown above.

      Let me know if it works out!

  7. Nicolas Colombres July 16, 2015 at 12:18 pm - Reply

    Hello Marc,

    Can I use this in GTM 2.0? We want to try ot out 😀

    Regards,

    Nicolas

Leave A Comment