Sun, May 19, 2019
Improved timer trigger in Google Tag Manager: launching the timer based on tab activity time
One of the main problems for marketers and web analysts is the large number of tabs users have open in their browsers.
These tabs prevent visitors from focusing solely on our content. That’s why marketers come up with different “tricks” to keep users’ attention.
This is an even bigger problem for analysts: with so many tabs open, you can’t be sure that the user spent the entire time — from page load to a certain moment — actually on the page.
This leads to absurd situations:
- A marketer wants to show a special offer popup to users who stay on the page for more than 2 minutes. A user opens the page and switches to another tab. After 5 minutes, they come back — and immediately see the special offer. This looks especially ridiculous in cases like:
- An analyst wants to collect an audience of people who spent more than 3 minutes on a specific page, to later “retarget” them. For this, they set a timer trigger for 3 minutes and send the corresponding event to Google Analytics 4. The user opens multiple tabs, finds the answer on one of them within 5 minutes, and closes all of them, including ours. That user ends up in the newly created audience, even though they weren’t really on our page.
You could list such examples endlessly, but it’s better to go straight to the solution. As you can see, the standard timer trigger in Google Tag Manager no longer seems ideal — so let’s write our own.
Setting up a timer based on tab activity time
In this solution, we’ll use the Page Visibility API, which allows us to detect whether the tab is currently active. The timer runs when the tab is active and pauses otherwise. Thanks to Eugen Hardysh, who helped write this code.
<script>
(function($) {
$.fixTime = function() {
var dateObj = new Date();
return Math.floor(dateObj.getTime() / 1000);
}
})(jQuery);
function onVisibilityChange() {
var current_timestamp;
if (document.visibilityState === "hidden") {
invisibility_time = jQuery.fixTime();
} else {
current_timestamp = jQuery.fixTime();
window_invisibility_time += (current_timestamp - invisibility_time);
}
}
// Call the functions above and send data to GTM
jQuery(document).ready(function() {
/* After how many seconds from page load should we send data to dataLayer? */
TIME_WHEN_SEND_DATA = 30;
// main part of the script
invisibility_time = 0;
window_invisibility_time = 0;
document.addEventListener('visibilitychange', onVisibilityChange, false);
if (document.visibilityState === "visible") {
if (typeof dataLayer === 'undefined') {
console.log('dataLayer НЕ ВИЗНАЧЕНО!!!');
} else {
var startLiveDoc = jQuery.fixTime();
var check_time = function() {
if (
document.visibilityState === "visible" &&
jQuery.fixTime() - startLiveDoc - window_invisibility_time === TIME_WHEN_SEND_DATA
) {
dataLayer.push({
'event': 'active_time_' + TIME_WHEN_SEND_DATA
});
} else {
setTimeout(check_time, 1000);
}
};
check_time();
}
}
});
</script>You only need to change the value of the TIME_WHEN_SEND_DATA variable. The time is set in seconds.
Let’s set this up. We’ll need a Custom HTML tag where we’ll insert our script, and a custom event trigger.
For the tag with the script, I use the All Pages trigger. But since we’re creating a timer, it doesn’t have to run right at page load. You can use other triggers if needed.
Pay attention to the name of the custom event that will fire when the timer triggers: the timer value in seconds will always be appended at the end, for example — 30 in our case.
You can also modify the information passed to the dataLayer to store the timer time in a separate variable. For example, like this:
dataLayer.push({
'event': 'active_time',
'time': TIME_WHEN_SEND_DATA
});Of course, this solution won’t track visitors who open the tab and go make coffee, but it will definitely make your data more accurate.
You can also learn how this solution can improve bounce rate measurement on your website.
If you enjoyed this content, subscribe to my LinkedIn page.
I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.
Web Analyst, Marketer