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

<script><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 /> </script>

2. Add two variables to access the data layer variables

One for the formatted time, which will feed through the event label

And one for the number of seconds in focus since the last event, which will feed through the event value

3. Add the firing rule for the event

4. Add the tag that reports the timer event to Google Analytics

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.