How to track time on page with Google Tag Manager

by Edward Upton

How to track time on page with Google Tag Manager

Our script for accurate tracking of time on page beats Google's default measurement to give you an accurate picture of how long users are spending on your page open and in focus. **This post translates the approach into Google Tag Manager**. The setup consists of two tags (one custom), one firing rule and two variables. ## Step by step: ### 1\. Add the timer script as a custom HTML tag <br /> /\*<br /> Logs the time on the page to dataLayer every 10 seconds<br /> (c) LittleData consulting limited 2014<br /> \*/<br /> (function () {<br /> var inFocus = true;<br /> var intervalSeconds = 10; //10 seconds<br /> var interval = intervalSeconds \* 1000;<br /> var eventCount = 0;<br /> var maxEvents = 60; //stops after 10 minutes in focus<br /> var fnBlur = function(){inFocus = false; };<br /> var fnFocus = function(){inFocus= true; };<br /> if (window.addEventListener) {<br /> window.addEventListener ('blur',fnBlur,true);<br /> window.addEventListener ('focus',fnFocus,true);<br /> }<br /> else if (window.attachEvent) {<br /> window.attachEvent ('onblur',fnBlur);<br /> window.attachEvent ('onfocus',fnFocus);<br /> }<br /> var formatMS = function(t){<br /> return Math.floor(t/60) +':'+ (t%60==0?'00':t%60);<br /> }<br /> var timeLog = window.setInterval(function () {<br /> if (inFocus){<br /> eventCount++;<br /> var secondsInFocus = Math.round(eventCount \* intervalSeconds);<br /> dataLayer.push({"event": "LittleDataTimer", "interval": interval, "intervalSeconds": intervalSeconds, "timeInFocus": formatMS(secondsInFocus) });<br /> }<br /> if (eventCount>=maxEvents) clearInterval(timeLog);<br /> }, interval);<br /> })();<br /> ### 2\. Add two variables to access the data layer variables One for the formatted time, which will feed through the event label timeinfocus And one for the number of seconds in focus since the last event, which will feed through the event value intervalseconds ### 3\. Add the firing rule for the event littledata-timer ### 4\. Add the tag that reports the timer event to Google Analytics time-tag ## Options and further information You can change the timer interval in the custom HTML tag – the reporting will adjust accordingly. Choosing the interval is a trade-off between the resolution of the reporting and the load on the client in sending events, as well as Google's 500 hit per session quota. We've chosen ten seconds because we think the users who are in 'wrong place' and don't engage at all will leave in under ten seconds, anything more is some measure of success. If you'd like assistance implementing this or something else to get an accurate picture of how users interact with your site, get in touch! ##### Get Social! Follow us on LinkedIn, Twitter, and Facebook and keep up-to-date with our Google Analytics insights.

Edward Upton
Edward Upton

Founder & CEO

Edward founded Littledata in 2015 as an analytics consultancy for ecommerce brands including MADE.COM and Micro Scooters, then turned it into the data layer for Shopify. He has spent over a decade on Shopify tracking, GA4 and marketing attribution, and speaks on ecommerce analytics at events including DigiMarCon and the Ecommerce Agency Summit.