Step by Step Guide to Track your Blog Readers with Google Tag Manager

cover

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 😉

Before Starting

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.

div-snippet

Last note before starting: the script that you will be able to download on this page is inspired by this post on E-Nor’ website and other resources on the web, like Justin Cutroni‘s Blog Posts.

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”.

ga-custom-dim

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”)

02-gtm-vars-02

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)

02-gtm-vars-01

Your final variables list should look like this

02-gtm-vars-05

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)03-gtm-triggers-01
  • 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.03-gtm-triggers-02

Your triggers summary should look like this

03-gtm-triggers-04

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.
    Example:

    • 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.05-gtm-tags-01
  • 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.05-gtm-tags-03
  • Finally, The Universal Analytics Event tag, which pushes an Event to Google Analytics whenever the “ScrollDistance” event is fired.05-gtm-tags-01-dWhere you will have to refer to the data layer variable that you created in the previous paragraphs.05-gtm-tags-06

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%)

goals-config

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.

Stats

reader-scanner-plot

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

Follow me

Andrea Rapanaro

Senior Business Analyst and Manager at Atos Consulting CH
Quick learner, customer focused and pragmatic business analyst specialized in Web Analytics and with strong technical knowledge coming from a developer background.

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? 🙂
Andrea Rapanaro
Follow me
Summary
Step by Step Guide to Track your Blog Readers with Google Tag Manager
Article Name
Step by Step Guide to Track your Blog Readers with Google Tag Manager
Description
A step-by-step guide to implement scroll tracking and reader or scanner visitor-types with Google Tag Manager
Author
Publisher Name
Atos Consulting CH
Publisher Logo

2 thoughts on “Step by Step Guide to Track your Blog Readers with Google Tag Manager

  1. Avatar
    mohammad ali Reply

    Hey Andrea Rapanaro,
    This is awesome information blogger reader google tag manager i like too much Thank You!

Leave a Reply

Your email address will not be published. Required fields are marked *