How to Track Time on Page Accurately in Google Analytics

how-to-track-time-1Time on page is an essential metric for understanding how visitors are interacting with your website. It is also one of the most widely misinterpreted metrics.

How Google Analytics Calculates Time on Page

Google Analytics calculates time on page by looking at the amount of time elapsed between when a page loaded and when a page was closed or replaced or when the session timed out. This means the data you receive for time on page is actually the difference between the two timestamps.

This is problematic for sessions that are single page views, as they have just one timestamp. For these sessions, Google Analytics is unable to measure any time on page, and therefore gives it a value of zero. This leads to an average time on page that is much lower than what you see in reports.

Why Is This a Problem?

You are receiving a distorted picture of time on page and may even be making decisions based on inaccurate data. This is particularly a problem for sites with a large amount of content. Visitors are likely arriving from search results or social media posts and often consume just the single page of content before leaving the site. Whereas you do expect a high bounce rate, you don’t expect such a short average time on site.

It is also an issue for websites with one or a few pages that often act as exit pages. It may appear as if users are spending very little time on these pages.

Ineffective Solutions for Accurate Measurement

There are a few solutions to improve accuracy of measuring time on page, some more effective than others. For instance, a simple solution may seem to be tracking scroll activity. However, this fails to take into consideration that visitors could scroll from the top of the page to the bottom before leaving, without having consumed any content.

Another potential option may seem to be adding custom events that ping Google Analytics at regular intervals. This will mean calculating average time on page with the following formula:

Total time on page / (total page views – total exits)

The problem here is that you are removing exit pages from the calculation. Therefore, the total time on page is divided by a number less than total page views, leading to an inflated average time on page.

Applying Strategic Timestamps

A simple and accurate approach is to fire hits to Google Analytics twice: once when the page view is initiated and once when the visitor is leaving the page. You will then need to calculate the difference, send it to Google Tag Manager, and relay the real time to Google Analytics.

To start, you need to create a variable to capture the first timestamp, which will allow you to use it in a tag. Create a new variable, selecting the type as “Data Layer Variable.” Give it the data layer variable name of “gtm.start” and the variable name of “Page Load Start Time.”how-to-track-time-2The next step is to create a tag to calculate the actual time on page and push the value to Google Tag Manager. Do this by creating a new Custom HTML tag called “HTML – beforeunload.” Use the JavaScript:

<script>
window.addEventListener("beforeunload", function (e) {
dataLayer.push({
‘event’ : ‘beforeunload’,
‘timeOnPage’ : new Date().getTime() - {{Page Load Start Time}}
});
});
</script>

Finally, before you can send the information to Google Analytics, you need to capture the real time on page from the dataLayer and set up the tag. This involves creating a new variable — a Data Layer Variable with the data layer variable name of “timeOnPage.” Name the variable “Real Time on page.”

After you’ve saved the variable, create a new trigger — this one a Custom Event type. Name it “Event – beforeunload” and give it the event name “beforeunload.”

Finally, you need a new Universal Analytics tag called “Timing – beforeunload.” Enter your tracking ID and set the track type to “Timing.” Under “User Timing Tracking Parameters,” var needs to be “Time,” category needs to be “Time on Page,” and value needs to be “{{Real Time On Page,” to relate to the variable you created earlier. If you have not already done so, build a page path variable, after which you can enter “{{Page Path}}” in the “Label” box.

Under “More Settings,” head to “Fields to Set” and add the field name “transport” with the value “beacon.” This will ensure that the Google Analytics hit is sent as a POST request rather than a GET request, which is the default. Lastly, configure the trigger for the tag and set it to the “Event – beforeunload” trigger you created.

When you have accurate time on page data, you can see if visitors are really only spending a short time on your pages and take action to improve user experience. Set the above tag to trigger on all pages or just those for which you feel it is important to receive accurate time on page data.

If you like my articles,