Are you running an enterprise blog? Have you ever asked yourself these questions?
- Do your blog visitors read your articles completely?
- Do your blog visitors actually read your articles or do they scan through them?
This is a step-by-step guide that will show you how to measure
- Scroll depth (reached percentage of the article that the user scrolled before leaving the page)
- Visitor Reader Type (Scanner or Reader? Does he take enough time to reach the bottom of the article?)
…and will allow you to gain some insights about the quality of your articles and the behavior of your visitors!
The implementation is made with the latest and greatest tools from Google, which I will assume you already have an account for. If not, create one via these links, set them up for your blog, and come back 😉
You might not even have to change your HTML, but just spot a <div> element above and below the actual content of your article. In my example I will assume the following structure.
Step 1 – Setup a Custom Dimension
In your Google Analytics account, go to Admin > [Your Property] > Custom Definitions, add a Custom Dimension and call it “Reader Type”, with Scope = “Session”.
In your Google Tag Manager account, create a new constant variable (I called it dimReaderTypeIndex) and assign a value = the dimension index (in my case it’s “1”)
Step 2 – Add Data Layer Variables in GTM
In order to pass the scroll depth and the reader type to Google Analytics, we need to create some data layer variables in Google Tag Manager that we will then populate with our script.
- 5 data layer variables for the ScrollDistance Event that will be triggered each time that the user scrolls a portion of your article
- 1 data layer variable for the Reader Type custom dimension
Configure every data layer variable like this (I used the same value for variable name and variable label)
Your final variables list should look like this
Step 3 – Add Triggers in GTM
We need to define 2 triggers.
- Article Pages will have to fire the script on all article pages
(in this example all URLs that start with /article)
- ScrollDistance Event was Fired will have to fire a Universal Analytics Event containing the scroll depth and the reader type every time our script pushes an event called “ScrollDistance” in the data layer.
Your triggers summary should look like this
Step 4 – Configure the Script
If so far some things were still abstract, now it will all become clear 😉 Let’s put the pieces together!
Download the script
What it does
Based on the anchors that you define it can measure what percentage of the article was scrolled by your visitor. It also estimates a time that is required to read the article based on the number of characters of the article text and a reading speed that you can customize (I found 70 characters per second being a good estimate).
If the visitor reads the article faster than estimated he will be classified as a “Scanner”, otherwise as a “Reader”.
There is a configurable part that you’ll need to take care of. Here are the parameters that you should adapt to your needs (you will find them at the top of the script).
- DebugMode (true/false): set to true if you want to enable console debug messages
- ArticleSplitPercentage (number): by default it’s set to 25, which will cause an event to be triggered at every quarter of article (25%, 50%, 75%, 100%).
Make sure you can divide 100 by this number (e.g. 30 would not be a good idea)
- CountAsBounceBefore (number): every number below the defined one will be considered as a bounce. So if you define 100 (default) it means that if somebody reads completely your article and leaves your Blog it will NOT be counted as a bounce, but any scroll percentage below 100% will not count as “interaction event”.
- ArticleWrapperID (a div class or id): id or class of the div that wraps your article content
- StartArticleMarkerID (a div class or id): as explained in the beginning reference a div that is right above your article text.
- if your article starts with <div id=”article-start”/> use “#article-start” as a value
- if your article starts with <div class=”article-start”> use “.article-start” as a value
- EndArticleMarkerID (a div class or id): as explained in the beginning reference a div that is right below your article text.
The script contains a lot of additional comments, so it should be easy to understand.
Step 5 – Add the Tags in GTM
As a last step let’s configure 3 tags
- The Universal Analytics Page View tag (you might have this one already) is needed to send page views to Google Analytics and needs to be fired on all pages.
- Most important now, the Scroll Distance Script tag. Create a Custom HTML tag, paste the script and set the “Article Pages” trigger that you created in the previous paragraph.
- Finally, The Universal Analytics Event tag, which pushes an Event to Google Analytics whenever the “ScrollDistance” event is fired.Where you will have to refer to the data layer variable that you created in the previous paragraphs.
You are all set! Don’t forget to publish your changes in Google Tag Manager 😉 If you have any troubles with implementing it, just post a comment and I will be happy to support you!
Step 6 – Reporting
Now that you started collecting this data, what can you do with it?
I have setup a goal in Google Analytics: “Article Completely Read 100%” (Event Label = 100%)
On a dashboard you can then visualize the number of goal completion per article page, and also split the visitors in the 2 Reader Types. Here are some nice reports & plots you could create by using your new dimension and event type.
Stay tuned by subscribing to our Newsletter or following us on Twitter! In the next blog posts I will share some cool dashboards and custom reports for your blog!
Read all our Web Analytics post
I have over 8 years of experience in consulting and hands-on experience in Web Analytics, especially with Google Analytics (10+ years), Google Tag Manager (3+ years), Google Data Studio (1+ years) and Microsoft Power BI (2+ years).
I am also a proud dad, a passionate football fan (AC Milan) and I like to spend all my free time writing on my food-blog (www.cucina.li). What can I cook for you? 🙂
Latest posts by Andrea Rapanaro (see all)
- Break data silos with Google Data Studio and Supermetrics - April 25, 2017
- The Conversion Summit 2016 Highlights - September 2, 2016
- How Google Data Studio can help your Business - August 5, 2016