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).
   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.timer
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. 
   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,where {{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!