Time Trigger in Google Tag Manager (GTM) is an intuitive feature that allows you to fire a tag after a certain time interval has passed after your website has been opened on a visitor’s device. This feature comes in handy when you need to execute a piece of tracking code or display a pop-up to your website visitor after a certain time duration of their visit or even postpone the firing of a tag at all until another code is executed or a page is loaded.
Essentially, the fired tag (or event) data is passed on to the GTM Data Layer and then fed into the Google Analytics servers for processing your analytics data.
Why use Time Triggers in Google Tag Manager anyway?
You may ask, why use Time Triggers when Google Analytics (GA) can automatically track the time spent by the user on your site? Here’s why. GA can only determine the time spent by the users on your website by calculating the difference between the timestamp of their landing (or pageview) and their following interaction (or hit) on the site. If a user leaves without a second hit, GA will record the duration as zero seconds, resulting in a highly misleading analytics tracking value, unnecessarily inflating your bounce rate!
For instance, if a user has spent 15 to 20 minutes on the page that they landed on and left the site after that without navigating to any other page or further interaction, GA will treat that visit as a bounce as the user didn’t take any further action or visit another page on your site. This is highly misleading and also frustrating for blog owners to see a high amount of bounce rates.
This problem of inflated bounce rate is effectively resolved by using the Time Triggers! Time Triggers in Google Tag Manager facilitate more accurate tracking of various web analytics metrics like time spent on the site, bounce rate, and session duration, and so on.
So without further rambling, let’s check out how you can configure a timer trigger in GTM and then see the various ways in which you can make the most out of this trigger.
How to create and configure a Timer Trigger in Google Tag Manager?
This configuration will help lower the inflated bounce rate!
Before creating the Timer Trigger, make sure that Google Tag Manager is installed on your site. To get the install code, go to Admin in GTM and click on the Install Google Tag Manager under the ‘Container’ section (as shown below).
Now let’s discuss the steps to create and configure a timer trigger in GTM.
Step 1
Go to your Google Tag Manager account, click on the ‘Workspace’ tab and then click on ‘Tags’ menu item on the left pane, and then click on the ‘New’ button (in red), which will open up the Tag Configuration screen (explained in Step 2).
Step 2
Name the Tag with an appropriate name in the Tag Configuration screen – in this case, ‘Engaged Visitor’. Now select the appropriate Tag Type by clicking the ‘Choose a tag type..’ link in the Tag Configuration section.
Being a custom event, select the ‘Universal Analytics’ option from the ‘Choose tag type’ list.
Then I configure the tag by filling in other parameters of the Tag as below. The ‘Track Type’ must be set to ‘Event’.
The Category field is the first level of the hierarchy in the Event tag and I have given a custom name ‘Visit’ for it since it is an event that will fire after a few seconds of the user visit. However, you can give any other name of your choice for this field.
The action field is the 2nd level of the hierarchy which gives further information about the event, in this case, we are tracking the visits lasting for 20 seconds, hence the name ‘20 seconds’. The choice of name is completely up to you for this field as well.
In the Label field, I have entered the {{Page Path}}, a built-in variable. This variable returns the page path portion of the page URL where this event has fired during run-time. It can be found under the ‘Tags’ section (check the below screenshot) of the debug pane of the site (discussed later in the article).
The next field that you need to set is the ‘Non-Interaction Hit’. This is an important field. You must set this to ‘False’ to tell GA that this is an interaction hit and not to count it as a Bounce. You can leave all the remaining fields including the ‘Advanced settings’ as it is except the ‘Google Analytics Settings’.
The ‘Google Analytics Settings’ field must be filled in with a pre-created variable, which is nothing but the GA Tracking ID that you can find in the Admin section of your GA account. With that said, you can also enter your tracking id manually also in this field.
The variable creation screen (as seen below) can be opened by selecting the ‘New Variable’ menu option in the ‘Google Analytics Settings’ field and clicking the tiny round button next to the field.
Step 3
Now you can configure a Timer Trigger that instructs when to fire this particular tag. To create the trigger, click on the ‘Choose a trigger to…’ link under the ‘Triggering’ section. This opens up a ‘Choose a trigger’ window as seen in the below screenshot. Next, we need to create a Timer trigger by clicking on the ‘+’ button seen on the top-right corner of the ‘Choose a trigger’ screen.
This will open up the following screen, where you can configure the new trigger by giving it a name and choosing a trigger type.
To select a trigger type, click on the ‘Choose a trigger type..’ button, which will open up the following screen. Select ‘Timer’ from the options.
This opens up the Trigger Configuration screen. In this screen, you will need to fill in three important fields that determine the behavior of the trigger: the Interval, Limit, and a condition that tells GTM to fire the trigger on all the pages of the site.
The Interval field is in milliseconds, so for 20 seconds, you must enter 20000 in the field. The interval can be changed depending on your requirement of the duration a user must spend on your site to become an engaged visitor.
The Limit field is a value that determines how many times the Tag is triggered; in this case, I’m limiting it to just ‘1’, which means it will only fire once. And the condition ‘Page Path Matches RegEx .*’ in the field “Enable this trigger when all these conditions are true” tells GTM to enable this trigger on all the pages of the site.
Once you have entered all the fields, click ‘Save’ on the top-right corner, which will create the Timer Trigger that fires the event Tag.
Once saved, we have created the new Timer Trigger Tag in GTM, which can now be found in the Tags list (as seen in the screenshot below).
Now we can publish the newly created Timer Tag. But before that, we must preview it to make sure it works properly on the site.
In order to preview, click on the ‘Preview’ button on the GTM. This displays a message in an orange band, which says “You can preview and debug the workspace by visiting your site…”
Once this message appears in GTM, you can open the site (or refresh it) in the browser. When the site opens, it will have a debug pane at the bottom, which allows us to view the fired tags, variables, and other information.
The below screenshot shows my sample site with a debug pane, which displays the fired Timer Trigger Tag that we have now created. This ensures that the timer trigger tag is working as required and is ready to be published.
But before I actually publish the changes, I must make sure that this fired tag info is also fed into my GA account. For that, I must go to GA and check-in REAL-TIME –> Active Users.
The below screenshot shows that the fired Tag information has successfully fed into my GA account. Now the timer tag is ready to be published!
To publish or push the changes made in GTM workspace, click on the ‘Submit’ button in GTM.
The ‘Submit’ button then opens up the ‘Submit Changes’ screen with a ‘Publish’ button to the top right.
When the ‘Publish’ button is clicked, it opens up another window name ‘Container Version Description’ that allows us to create a log of the changes that we are going to push to the site (which helps in the future to easily keep track of the changes), in this case, the Timer Trigger event.
So I enter that on the screen before publishing the change.
After I hit the ‘Continue’ button, GTM shows the Version details that illustrate all the changes that I have made in GTM as well as the tags and triggers that I added to the site.
That was the basic implementation of a timer trigger. Now let’s check some other advanced stuff.
Taking Timer Triggers to the Next Level
There are a number of other ways you can leverage the power of timer triggers in your web analytics.
The beauty of GTM is that it allows you to create a user-defined variable out of every parameter. In the case of the Timer Trigger, it has the following Data Layer parameters, which start with the prefix gtm. (you can find it in gtm.timer –>Data Layer in the preview pane).
Stopping the Timer Midway
For instance, you can stop the execution of a timer trigger midway before reaching its limit by writing a small JavaScript code that uses the gtm.timerId parameter (check the above screenshot) and creating a variable named timerId that store’s the parameter’s value. The timer trigger will have a unique ID on each page where it is executed.
Here is the JavaScript code that you need to run to stop the execution of the timer (recently fired) prematurely.
var timerId = {{DLV – gtm.timerId}};
window.clearInterval(timerId);
But the drawback of stopping the timer before reaching its limit is that it won’t restart until the page is refreshed, hence this is only useful when you need to stop the timer when a new page loads. For detailed steps on stopping the timer, please refer to this blog post.
Finding the total time spent by the user on a page
This is a bit advanced implementation of the timer trigger using JavaScript, but of course not that hard to understand if you are aware of programming concepts. In order to find the total time spent by a user, we must leave the limit field of the Timer Trigger blank, which will let the Timer Trigger to fire indefinitely. This indefinite firing without limit will give us the advantage of calculating the total time spent by the user on a particular page.
Here are the steps to accomplish it.
- Create a timer trigger as discussed earlier in the article, but leave the ‘Limit’ field blank. This will fire the timer trigger infinitely until the user closes the browser or exits the page. But such a trigger will generate a number of events, so only enable it on select pages/blog posts or pages that exhibit a high amount of exit rates.
- Create two user-defined variables of the type Data Layer Variable that will be used in a JavaScript function (discussed shortly). One variable must point to (or associated with) the timer’s event number parameter named gtm.timerEventNumber (check the screenshot at the introduction of this section) and the other variable must point to the ‘timer interval’ parameter gtm.timerInterval. The gtm.timerEventNumber returns a numerical value that tells how many times a timer was fired. And the gtm.timerInterval returns the interval in which the timer fires (e.g. 20 seconds or 10 seconds etc.).
To create these variables, login to your GTM account and click on the ‘Variable’ tab and click the ‘New’ button under the ‘User-Defined Variables’ section (as seen in the below screenshot)
This will open up the following screen. Give an appropriate name for the variable (I’ve named it ‘Timer Event Number’) and then click on ‘Choose a variable type…’ to select the variable type and select ‘Data Layer Variable’ as the type from the list.
Enter the timer event number parameter as the Data Layer Variable name and click on ‘Save’ (see the below screenshot). Repeat these steps for creating the timer interval variable as well, but for the timer interval variable, you will enter the gtm.timerInterval as the Data Layer Variable name.
Now we need to create a small JavaScript function. To create it, you need to follow the same steps as creating a variable, but instead of selecting the ‘Data Layer Variable’ as the variable type, select the ‘Custom JavaScript’ option and enter the following function and ‘Save’ it. I have saved it as totalTimeOnPage. (Please note that the variable names (‘Timer Event Number’ and ‘Timer Interval’) in the function will vary if you have saved it with different names)
function() {
var timeelapsed = {{Timer Event Number}} * {{Timer Interval}} / 1000;
var minute = Math.floor(elapsed/60);
var seccond = timeelapsed % 60;
return minute + ‘m ‘ + second + ‘s’;
}
Once the JavaScript variable is created, we can create a custom event tag (which has been discussed earlier in the article). But in the Label field, you must select and input a custom JavaScript variable, in this case, totalTimeOnPage (Check the below screenshot).
Now you can save the tag and preview it, if the tag fires recurrently as expected and GTM data successfully fed into GA, you can go ahead and publish it.
Delaying Popups and Widgets
Although timer triggers are widely used by website owners to record the amount of time that a user has spent on a page, it can also be used to delay a tag from firing until an asynchronous request is executed. The best example would be to prevent the pop-ups and widgets (like newsletter subscription form or a survey form) from appearing on your website until a specific time interval has passed.
Let me conclude…
With this point, we have discussed some of the best ways you can leverage the timer trigger in your web analytics ventures. Of course, there are several other ways you can utilize this trigger in your analytics efforts, but they involve writing bigger JavaScript codes. If you are well-versed with JavaScript coding, the scope of harnessing this trigger in web analytics is almost endless.
But no matter how you make use of this trigger in analytics, never publish it without testing. Whether you use the timer trigger to bring down the inflated bounce rates or find the time spent by your visitors on a page; make sure you test the functionality using the preview mode before publishing it.
That’s pretty much it on how to effectively use timer triggers in Google Tag Manager. I believe this post will serve as a good reference resource for you on timer triggers.
Please let me know what has been your experience using timer triggers through a comment.