Friday, 26 February 2016 20:15

Who's Reading My Content? How to separate readers from scanners...

Written by
Rate this item
(0 votes)

Advanced Content Tracking - with Google Tag Manager

Have you ever wondered who is really reading your content?  Have you wanted to be able to evaluate all your content for true engagement - people who actually read your articles?  In this post we will show how you can use this reader information to better understand the value of your content.  Then walk through how to setup your website using Google Universal Analytics and Google Tag Manager to capture these very useful metrics. But before we start - credit where credit is due.  This post extends Justin Cutroni's idea outlined in a series of posts, Advanced Content Tracking is a great starting point, and many others posts and people have developed this idea.  Please see the full credits and further reading at the bottom of this post.

Content Tracking Today

Some people will land on your page and jump away - no problem totally un-engaged and we can see this as an exit, bounce or page views with a very short time on page.  But what about people who exit or bounce after reading your page?  By default Google Analytics cannot tell you any more information about what the person did on this last page. So to start we have our standard content reports - a lot of nice things here - pageviews, time on page, entrances... (Just FYI this technique lowers bounce rate and increases time on page, so keep that in mind when reviewing these metrics.)

AdvancedContent PageviewReport

With Advanced Content Tracking

But we have always wanted to know more!  And here it is - how many people load the article, start reading, reach the end of the article and scroll all the way the the bottom of the page (maybe even clicked on MORE articles!): And then even better - did people scan the article (scroll to the end of the content in 60 seconds or less) or read the article...

AdvancedContent ReaderType

Dashboard Metric Idea

% of Readers and % of Scanners are metrics we like to include in content dashboards.  We calculate these metrics by dividing Readers and Scanner by total ArticleLoaded.  This normalizes the results to easily see which articles people are reading versus scanning.

AdvancedContent ReaderTypePercentage

Show me the code...

OK your convinced this is a cool way to report on your content - so how do we capture this information?  The JavaScript code included will work for Google Universal Analytics with or without Google Tag Manager.  This post presents how to use Google Tag Manager (GTM).  We will step through the JavaScript code and then the GTM Setup. There are a few things you may want to change for the code to work on your website or to capture the information as it best fits your website's content.

JavaScript Setup

First the flags at the top of the script need to be set - when debugMode is true alert boxes will popup as you scroll on your pages.  Useful for when you are first testing the implementation on your site.  gtmMode turns on sending out dataLayer updates to your website, which in turn GTM will pick up.  If gtmMode is false then Google Universal Analytics event tags are fired instead.

	// Debug flag
	var debugMode = false;

	// GTM or Universal Analytics
	var gtmMode = true;

Next we have some changes we can make to alter how the code works.  First we can set the reader time - people who scroll to the bottom of the content in less than the reader time are ""Scanners"" over the reader time they are ""Readers"" - the default is 60 seconds but depending on the length of your websites content you may want to change this:

    // Set reader time here
    readerTime = 60; // Set to 60 seconds

Next we can set how far down to scroll before we start to record that a person is reading - by default it occurs at 150 pixels but you can change that here:

    // # px before tracking a reader
    var readerLocation = 150;

IMPORTANT: Set the div name for tracking your content.   We are using the div class name ""item-page"" this will probably be different for your website. (Unless you are using Joomla!)

        // If user has hit the bottom of the content send an event
        if (bottom >= jQuery('.item-page').scrollTop() + jQuery('.item-page').innerHeight() && !endContent) {

Lastly we are going to send information to the data layer so that our Tags and Triggers are easy to setup in Google Tag Manager. We will use the same event ""content-tracker"" so we will only need one trigger and our variables will be consistent for each - so we will send the information for the Google Analytics event like this:

dataLayer.push({
    'event':'content-tracker',
    'content-category':'Reading',
    'content-action':'ArticleLoaded',
    'content-label':'',
    'content-value':'',
    'content-non-interaction':true,
    'readerType':'Reader'
});

(Just FYI the readerType variable will only be sent back at the PageBottom Action.)

GTM Setup

So in Google Tag Manager we setup the following Trigger, Variables and Tag to record to track our readers.  Here is the trigger:

AdvancedContent GTMTrigger

Next you will need to create the variables - pulling them from the dataLayer.  This shows the variable for the Content Action:

AdvancedContent GTMActionVariable

You will create variables for all the data passed in the dataLayer - Content Category, Content Label, Content Value, Content Non-Interaction and Reader Type.  They will all look similar to Content Action. And finally we will want to create the Tag.  For Reader Type we are using Custom Dimension 5 - you will have to change this to the dimension you are using in your Analytics Web Property.  The final tag will be setup like this:

AdvancedContent GTMContentTag

Summary

I hope you can put this into action and even more importantly learn more about what content your readers like most.  Let me know how this works for you - would love to see how this helps you and your organization! A few things to think about too - The time on page will go up as a result of this code - it should be more accurate than the default Google Analytics setup but you may want to experiment with the non-interactive settings.  You may also want to track the Reader Type for the end of you content instead of the bottom of your page.  These are just a few thoughts - would love to hear how you extend this code.

Full Version of the Code

And the full version of the code is here:

jQuery(function($) {
    // Debug flag
    var debugMode = false;
	
    // GTM or Universal Analytics
    var gtmMode = true;

    // Set reader time here
    readerTime = 60; // Set to 60 seconds 
    // Default time delay before checking location
    var callBackTime = 100;

    // # px before tracking a reader
    var readerLocation = 150;

    // Set some flags for tracking & execution
    var timer = 0;
    var scroller = false;
    var endContent = false;
    var didComplete = false;

    // Set some time variables to calculate reading time
    var startTime = new Date();
    var beginning = startTime.getTime();
    var totalTime = 0;
    
    // Get some information about the current page
    var pageTitle = document.title;

    // Track the aticle load
    if (!debugMode) {
				if (gtmMode) {
					dataLayer.push({
						'event':'content-tracker',
						'content-category':'Reading',
						'content-action':'ArticleLoaded',
						'content-label':'',
						'content-value':'',
						'content-non-interaction':true
						});
				} else {
					ga('send','event', 'Reading', 'ArticleLoaded', '', '', true);
				}
    } else {
        alert('The page has loaded. Woohoo.');    
    }

    // Check the location and track user
    function trackLocation() {
        bottom = $(window).height() + $(window).scrollTop();
        height = $(document).height();

        // If user starts to scroll send an event
        if (bottom > readerLocation && !scroller) {
            currentTime = new Date();
            scrollStart = currentTime.getTime();
            timeToScroll = Math.round((scrollStart - beginning) / 1000);
            if (!debugMode) {
				if (gtmMode) {
					dataLayer.push({
						'event':'content-tracker',
						'content-category':'Reading',
						'content-action':'StartReading',
						'content-label':'',
						'content-value':timeToScroll,
						'content-non-interaction':false
						});
				} else {
					ga('send','event', 'Reading', 'StartReading', '', timeToScroll);
				}
			} else {
                alert('started reading ' + timeToScroll);
            }
            scroller = true;
        }

        // If user has hit the bottom of the content send an event
        if (bottom >= jQuery('.item-page').scrollTop() + jQuery('.item-page').innerHeight() && !endContent) {
            currentTime = new Date();
            contentScrollEnd = currentTime.getTime();
            timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000);
            if (!debugMode) {
				if (gtmMode) {
					dataLayer.push({
						'event':'content-tracker',
						'content-category':'Reading',
						'content-action':'ContentBottom',
						'content-label':'',
						'content-value':timeToContentEnd,
						'content-non-interaction':false
						});
				} else {
					ga('send','event', 'Reading', 'ContentBottom', '', timeToContentEnd);
				}
            } else {
                alert('end content section '+timeToContentEnd);
            }
            endContent = true;
        }

        // If user has hit the bottom of page send an event
        if (bottom >= height && !didComplete) {
            currentTime = new Date();
            end = currentTime.getTime();
            totalTime = Math.round((end - scrollStart) / 1000);
            if (!debugMode) {
				if (gtmMode) {
					if (totalTime < readerTime) {
						dataLayer.push({
							'event':'content-tracker',
							'content-category':'Reading',
							'content-action':'PageBottom',
							'content-label':pageTitle,
							'content-value':totalTime,
							'content-non-interaction':false,
							'readerType':'Scanner'
							});
					} else {
						dataLayer.push({
							'event':'content-tracker',
							'content-category':'Reading',
							'content-action':'PageBottom',
							'content-label':pageTitle,
							'content-value':totalTime,
							'content-non-interaction':false,
							'readerType':'Reader'
							});
					}
				} else {
					if (totalTime < readerTime) {
						ga('set','dimension5', 'Scanner');
					} else {
						ga('set','dimension5', 'Reader');
					}
					ga('send','event', 'Reading', 'PageBottom', pageTitle, totalTime);
				}
            } else {
                alert('bottom of page '+totalTime);
            }
            didComplete = true;
        }
    }

    // Track the scrolling and track location
    $(window).scroll(function() {
        if (timer) {
            clearTimeout(timer);
        }

        // Use a buffer so we don't call trackLocation too often.
        timer = setTimeout(trackLocation, callBackTime);
    });
});

Credits and further reading:

Justin Cutroni's series on this technique: Advanced Content Tracking

Additional people credited in Justin Cutroni's blog post: Nick Mihailovski, Thomas Baekdal - www.baekdal.com, Avinash Kaushik  http://www.kaushik.net/avinash/, Joost de Valk  Creator of the Google Analytics for WordPress, Eivind Savio Blogger and GA consultant.

Tamas Geiger (aka Duracell Tomi) - author of Google Tag Manager for Wordpress - https://duracelltomi.com/google-tag-manager-for-wordpress

Dorcas Alexander's Cheat and Win with Google Tag Manager: Easy Dynamic Content Tracking (As a rule I try to avoid cheating, but in this case...)

Read 3413 times Last modified on Sunday, 24 November 2019 00:31
Jay Murphy

Jay Murphy is a digital analytics expert and founder of Trionia, where he specializes in transforming data into actionable insights for large and mid-sized businesses. With over thirty years of experience and a passion for Google Analytics since its inception, Jay has honed his skills to bridge the gap between technical data analysis and strategic business planning. An educator at heart, he has developed and taught comprehensive digital marketing courses at both the undergraduate level and within organizations, enriching minds with his deep understanding of the digital analytics landscape.

His career, which began in systems analysis for spacecraft guidance, has evolved through roles that blend technical acumen with strategic vision across various sectors, including Fortune 500, Higher Education and Non-Profits. Certified in Google Analytics since 2011, Jay's leadership at Trionia has spearheaded successful online campaigns and innovative marketing strategies, underlining his commitment to leveraging data for growth. Jay's approach goes beyond the numbers; he's a storyteller who uses data to drive business success, making him a pivotal figure in the digital marketing world.

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.