Guide: How To Use Timer Trigger in Google Tag Manager
Are you looking for ways to fire a specific tracking script or pop-up after 20-second-delay? If your answer is Yes, then hop on board, because I’ll show you how to make use of timer trigger (gtm.timer) in Google Tag Manager.
In fact, in Analytics Mania blog, I am also using timer trigger. If you wait 60 seconds (on desktop device), a small widget with email icon will appear at the bottom right corner. That’s a one way to subscribe to my newsletter.
What is Timer Trigger in Google Tag Manager?
Timer Trigger is a type of trigger which fires after a certain duration of time has passed on the web page.
The most common uses for the timer trigger seem to be either to send an event to Google Analytics after X seconds (to lower the Bounce), or to defer a tag from firing until some asynchronous request has completed with certainty. But don’t limit yourself!
Create Timer Trigger Within Google Tag Manager
To get started, you will need to have a Google Tag Manager account (duh) and permissions to edit your website’s GTM container. Create the timer trigger as follows:
- Add a new trigger.
- Choose timer as the trigger type.
- Then, enter the following options:
- Event Name: This lets you customize the event name that GTM pushes to dataLayer. It’s most useful in the case when you want to fire multiple timers on the same page.
- Interval: Here you can specify how many milliseconds should pass between each activation of this trigger. Enter 30000 if you want the time trigger to activate after 30 seconds.
- Limit: This option lets you choose how many times the trigger fires before it is stopped.
- Also, you can delimit the timer to only fire on specific pages by using the Enable When option. You’ll need to provide some condition which is already present when Google Tag Manager is first loaded, such as Page Path equals /home-page/, or something similar. In my blog, I use timer on all pages, thus Enable When condition is Page Path matches Regex .*
- Last, you can decide whether you want to fire a trigger either on all timers, or only particular ones. I used All timers.
- Hit save.
A sample timer trigger could look like this (fires once after 10 seconds on all pages):
What Happens in Data Layer?
After you created a timer trigger, enable GTM Preview and Debug mode, then refresh the website you’re currently working on (in order to test how the trigger works).
After preview and debug console appears, wait for timer trigger to activate.
Pro tip by Captain Obvious: for testing purposes, create a timer trigger which fires after 10 seconds (or less). If you set it to fire after 60 seconds (or more), you’ll end up waiting way too long and your debugging session will become less effective.
Anyway, let’s go back to our Preview and Debug mode. After waiting 10 seconds gtm.timer event appears on the left side of the pane.
Click it and navigate to Data Layer tab. You should see the array of various parameters.
Every time a timer trigger activates, it pushes particular set of data to the data layer:
- gtm.timerId – A unique identifier number for the timer. Each timer you have on the page has a different ID.
- gtm.timerEventNumber – The number of timers that have activated on the current page (whatever you have in the Limit option is the maximum).
- gtm.timerInterval – The value you set in the Interval option when creating the timer.
- gtm.timerStartTime – The timestamp of when the timer first started.
- gtm.timerCurrentTime – The timestamp of the most recent timer activation.
- gtm.timerElapsedTime – The time in milliseconds since the timer started.
The awesome thing about Google Tag Manager is that you can fetch any parameter from data layer and turn it into variable.
If you wish to know the event number (which iteration of timer trigger was just completed), you can create a Data Layer variable gtm.timerEventNumber (see the example below). P.S. dlv – stands for Data Layer Variable.
After you create this variable, refresh both P&D Mode and website you’re currently working on. Wait for timer trigger to fire. Click it and head over to Variables tab of Preview and Debug pane. What you’ll see it your newly created variable gtm.timerEventNumber.
What does this mean? You can create a trigger which activates only after 2nd timer. This is a hypothetical situation, but totally possible – you might want to fire two different tags: The 1st one after 10 seconds and the 2nd one after another 10 seconds. With dlv – gtm.timerEventNumber variable this can be easily achieved.
Use Cases of Timer Trigger
If you’re still looking for ideas where timer trigger might come in handy, here is some food for thought.
Postponing Email Popup
As I have already mentioned, I use this type of trigger myself (in this blog) in order to delay my email popup AND blue widget which ask my visitors to subscribe.
Altering bounce rate
Although I don’t personally use this tactic, it’s still worth mentioning. Some digital marketers use a timer trigger to fire a Google Analytics event.
If a visitor stays on a page for more than 60 seconds, a timer trigger activates and GA event called “Visitor Stayed for 60 seconds” fires. It’s important to mention that GA event must use non-interaction:false setting (which is a default in Google Tag Manager).
Such event might dramatically lower your bounce rate because a visitor not only landed on your page (1st interaction), but also stayed for more than a minute (which is considered as another interaction).
Visitors who make the 2nd interaction are not counted as bounced visitors on that page.
Although this sounds very appealing, there’s a reason I don’t use this tactic. A timer trigger activates even if the visitor isn’t actually looking at your page. He/she might simply have opened tens of browser tabs (with your site among them) and currently browse totally different website.
Even if the visitor isn’t interacting with your website, it will count as an interaction in Google Analytics (because you just sent an event after a page is opened for more than 60 seconds).
That’s why I prefer other ways of lowering bounce rate (which I describe in the nearest future).
But Wait, there’s More! Start A Timer Trigger After A Click
This idea came from Simo Ahava. In case you want a timer to start when the user does something (e.g. click), you’ll need to use a Custom HTML tag with custom code. Here’s the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script> (function() { // CHANGE THESE THREE: var eventName = 'custom.timer'; // The event name that is pushed into dataLayer var interval = 5000; // The interval in milliseconds var limit = 1; // The number of times the timer fires // OTHER SETTINGS: var timerNumber = 1; var startTime = new Date().getTime(); var fireTimer = function() { var timeNow = new Date().getTime(); window.dataLayer.push({ 'event' : eventName, 'custom.timerCurrentTime' : timeNow, 'custom.timerElapsedTime' : timeNow - startTime, 'custom.timerStartTime' : startTime, 'custom.timerEventNumber' : timerNumber, 'custom.timerId' : timerId, 'custom.timerInterval' : interval, 'custom.timerLimit' : limit }); timerNumber += 1; if (limit < timerNumber) { window.clearInterval(timerId); } }; var timerId = window.setInterval(fireTimer, interval); })(); </script> |
It does pretty much the same thing as the timer trigger. The difference is that you can use any trigger you want to fire this custom HTML tag, for example form submission, Facebook Like button click, etc.
Example: Show a popup 10 seconds after visitor clicks LIKE button under your article.
And don’t forget to edit timer interval (var interval) and limit (var limit) in the script above to match your needs.
Also, the keys pushed into dataLayer differ in that the prefix is not gtm. but custom.. So gtm.timerId becomes custom.timerId, etc.
Google TAg Manager Timer Trigger: Conclusion
Although timer trigger is pretty basic, it’s one of those must-have weapons in your Google Tag Manager arsenal. It’s fairly easy to use and allows you to postpone a certain tag for a particular period of time.
I use it to postpone email pop-up (on this blog), while others utilize it in order to lower bounce rate in their Google Analytics report.
Where do you use timer trigger in your GTM setup? Share your ideas in the comments below.
I’ve started using time triggers to get some insights into how long people stay on landing pages that don’t need a click.
The situation you mention with tabs opened in the background is however really a problem. Could you track if the user has scrolled at all and only then start the timer somehow?
Yes, you can. To achieve this, you’ll need to do several things here:
1. Import Scroll tracking to your GTM container.
2. Create a Custom HTML tag with the script I’ve mentioned here. Edit the script according to your needs.
3. Fire this Custom HTML tag only when a visitor scrolls more than 25 or 50 percent (you’ll need to create a Custom Event Trigger for that).
Hope that makes sense.
Please help me understand the implementation of Simo Ahava’s custom timer: I have a scroll tracker on a single-page site. I want it to send pageviews when a users pauses on a section for more than 1 second, rather than generating a pageview for every anchor that passes by. I have the scroll tracking trigger set up. I have the custome HTML tag with the timer, so how do I make it do this:
1. Scroll to #anchor tag.
2. If the timer counts to 1 second, send the page view.
I’m very grateful for any help–
Hey, could you send me a link to the website you wish to track?
It’s not published yet, but it’s a one-page site, and pageviews are going to be tracked by a scroll event, but I only want it to send a pageview after a 1 second pause. So I have a custom timer tag set to 1000 milliseconds, and I have the scroll-tracking event/tag that sends the pageview. So how do I trigger the one-second pause before the scroll event registers a pageview?
Having scroll tracking and Simo’s script is not enough. You’ll need even more custom Javascript in order to make this work. Unfortunately, I’m not that good with JS to help you.
My thoughts:
– You don’t need Scroll tracking here.
– You need History change trigger, instead.
– Every time a History trigger dispatches (meaning that URL Fragment changes), you should fire that custom Timer code. BUT that code needs to be edited in order to fire only ONCE when there are multiple URL Fragment changes in a second. In this step, I’m not capable of helping you (yet). You need to consult a JavaScript developer.