- Lev Kerzhner
- September 11, 2019
Intro
Time on page is one of the most basic and commonly used metrics to help understand the engagement level of a visitor, following the basic logic of longer time on page equals higher interest on part of the visitor.
While Google Analytics Facebook provide a similar metric, their measurement in inherently flawed. Their measurement relies on the time difference between two consecutive pageviews to derive the time a user spent on a page. In the case that the user didn’t continue to a next page, the time they would assume that user spent on the page is 0!
Use Case – Measuring engagement on a blog post
Blogs face a peculiar challenge. On the one hand, they feature valuable content, on the other hand, they often lack a clear ‘conversion event’ which makes it difficult to understand if a visitor of the page is worth remarketing to or not.
To understand if a visitor is worth remarketing to, what we really want to know is how much of a given article, or page, they read. This is where a metric like time on page, comes in handy.
If we take the time a visitor spent on the page and couple it with the average article reading time we can estimate how much of the article that visitor read.
For example, let’s say we have a 500-word article on our blog. The average reader would read it in about two and a half minutes. This means, that if a visitor stayed for two and a half minutes or three minutes on the page, there’s a chance that the visitor read the article.
How To Setup
This short guide will help you set up the trigger. If you’d like a shortcut, we’ve created a simple tool that will prepare a downloadable Google Tag Manager container -> Click here
1 Find out How long your article would take to read
The average reading speed for an adult is about 200 words per minute. So a 1000 word blog would take about 5 minutes to read.
Here’s a great tool to help you translate your specific word count to the time needed.
function wordCount(){
var wc =document.getElementById(‘form-field-word_count’).value;
var time_in_sec = wc*3/10; // /3.333
var t_min = Math.round(time_in_sec/60);
var t_sec = Math.round(time_in_sec%60);
var t_string= t_min + ‘:’ +(t_sec<10?’0′:”)+ t_sec;
document.getElementById(‘count-output’).value = t_string;}
2 Setup a Time on Page trigger in Google Tag Manager
Open GTM and go to the Triggers screen
Click on NEW
Give your trigger a name – “Time on Page” for example
Click on the pen to choose trigger
Choose timer
Select an interval at which the event will be fired in milliseconds.
e.g. A value of 30000 would mean that the event would be fired every 30 seconds. If a visitor stays a minute and 20 seconds, the event will be fired twice once at 30 seconds and once at one minute.
We’ve found 30 seconds (or 30000ms) to be a reasonable interval to work with, but you can choose to use more granular values.
Set a limit.
This means an upper limit after which the timer will stop firing events. This is meant to cap off events.
e.g. A value of 4 would mean that the event would be fired 4 times at the interval set above.
So 30 seconds interval with a limit of 4 will fire at 0:30, 1:00, 1:30 & 2:00
We recommend using an upper limit of double or triple the time it takes to read the article.
Choose where the trigger will fire. If you’d like the event to fire on a specific page or category enter:
Page Path – Contains – /category/post
If you’d like the event to fire on all pages enter:
Page Path – Matches RegEx – .*
3 Create a Timer Data Layer Variable
Go to the Variables screen
Under ‘User-Defined Variables’ Click on NEW
In variable type, select: “Data Layer Variable“
Name the Variable ‘DLV Timer’
In ‘Data Layer Variable Name ‘ enter:
gtm.timer
Click ‘Save’.
4 Create an Elapsed Time Data Layer Variable
Go to back to the Variables screen
Click on NEW
In variable type, select: “Data Layer Variable“
Name the Variable ‘Elapsed time’
In ‘Data layer variable name enter:
gtm.timerElapsedTime
Click ‘Save’.
5 Convert Elapsed Time from milliseconds to seconds
Go to GTM Click on Variables
Click on NEW
In variable type, select: “Custom JavaScript“
Name the Variable ‘Elapsed time in Seconds’
Enter the following code in the Custom Java Script line.
function () { return Math.round({{Elapsed time}} / 1000)}
Click ‘Save’.
6 Create a Tag to fire the event to Facebook
Go to GTM Click on Tags
Click on NEW
Give your Tag a name, for example “Facebook Time on Page”
In Tag configuration select Custom HTML
Paste this code into the tag:
<script> fbq(‘trackCustom’, ‘time on page {{Elapsed time in Seconds}} seconds’) </script>
Click on Triggering
Select your previously created trigger, “Time on Page”
Click on Save
7 Create a Tag to fire the event to Google Analytics
Go to GTM Click on Tags
Click on NEW
Give your Tag a name, “Google Analytics Time on Page”
In Tag configuration select Google Analytics
In Track Type select, “Event”.
In Label enter “time on page”
In Label value enter {{Elapsed time in Seconds}}
In Google Analytics Settings, Use your Google Analytics Settings Variable. If you don’t have one, simply click on Create Variable and enter your Google Analytics ID.
Set the Non-Interaction Hit field to TRUE to avoid a negative impact on Bounce Rate
Click on Triggering
Select your previously created trigger, “Time on Page”
Click on Save
Downloadable GTM container
Here’s your shortcut to glory!
Ready made GTM container fully set up with tags for Google Analytics and Facebook. You can easily customize the settings such as the timer’s interval and limit.
Just download this GTM import file below, unzip it, and follow the instructions.
Log into your GTM account
Choose to the Account and Container in which you want to install Fixel
Navigate to the Admin section
Choose ‘Import Container’
Click ‘Choose container file’ and select the JSON file downloaded
Select the ‘Existing’ workspace option
Change the radio button to ‘Merge’
This is very important so that all your existing configuration carries over to the merged container.
Keep the ‘Overwrite conflicting tags, triggers and variables’ selection
Click ‘Confirm’
Publish the container by clicking ‘Submit’ on the workspace’s main screen
+ Downloads
