A couple of weeks ago Justin Cutroni wrote 2 awesome blog posts about Advanced Content Tracking using Google Analytics.
In Part 1 he shared the script he has written and is using, and in Part 2 he shared his findings and experience with this method.
I have been using his method with some small tweaks since before he published these blog posts, and since someone asked me if I could publish the script with my tweaks - here it is.
Differences between this script & Justin's script
- Reader classification:30 seconds. If you use more than 30 seconds to scroll the Content Area you will be classified as a Reader.
- Check if content area has to be scrolled: Tracked as Scrolling Allowed.
- Tracking of Content Length in pixels: Gives you more opportunity to analyze Readers vs. Scanners.
- All tracking is done using Non-Bounce Events: You can change that, but I wanted to be able to compare Bounce Rate on a article level with Readers and Scanners.
- Naming are different: The naming I'm using in my script is different from Justin's naming. I used a different Content Tracking script earlier, and kept the namings I used in that script.
Bonus: Analyzing your content in Excel
As Justin wrote, this data begs for Excel.
You can therefor download this Excel spreadsheet to analyze your data further. The spreadsheet requires the Next Analytics Excel plugin.
Using the Excel spreadsheet
In the _actions tab, change the following values:
- Site Name
- Date Start & Date End
- Google Analytics Profile ID
The Google Analytics script for tracking Readers & Scrollers
- Values in Blue: You may change these values
- Values in Red: You have to change these values
- The script requires jQuery.
- // This script was originally written by Justin Cutroni, see http://cutroni.com/blog/2012/02/21/advanced-content-tracking-with-google-analytics-part-1/
- var readerTime = 30; // Seconds after scroll to bottom of content before visitor is classified as "Reader"
- var readerLocation = 150; // # px before tracking a reader
- var callBackTime = 100; // Default time delay before checking location
- // Set some flags for tracking & execution
- var timer = 0;
- var contentLength = 0; // Content Length -> Length of content area
- var scroller = false;
- var endContent = false;
- var didComplete = false;
- // Set some time variables to calculate reading time etc.
- var pageTimeLoad = 0;
- var scrollTimeStart = 0;
- var timeToScroll = 0;
- var contentTime = 0;
- var endTime = 0;
- jQuery(function($) {
- // Check if content has to be scrolled
- if ($(window).height() < $('#contentArea').height()) { // Replace contentArea with the name (class or ID) of your content wrappers name
- pageTimeLoad = new Date().getTime();
- contentLength = $('#contentArea').height();
- _gaq.push(['_trackEvent','Page Scroll','Page Scroll: Allowed',window.location.pathname,contentLength,true]);
- }
- // Check the location and track user
- function trackLocation() {
- bottom = $(window).height() + $(window).scrollTop();
- height = $(document).height();
- // If user has scrolled beyond threshold send an event
- if (bottom > readerLocation && !scroller) {
- scroller = true;
- scrollTimeStart = new Date().getTime();
- if (pageTimeLoad > 0) {
- timeToScroll = Math.round((scrollTimeStart-pageTimeLoad)/1000);
- } else {
- timeToScroll = ""
- }
- // Article scroll started
- _gaq.push(['_trackEvent','Page Scroll','Page Scroll: Started',window.location.pathname,timeToScroll,true]);
- }
- // If user has hit the bottom of the content send an event
- if (bottom >= $('#contentArea').scrollTop() + $('#contentArea').innerHeight() && !endContent) {
- timeToScroll = new Date().getTime();
- contentTime = Math.round((timeToScroll-scrollTimeStart)/1000);
- if (contentTime < readerTime) {
- _gaq.push(['_setCustomVar',1,'ReaderType','Scanner',3]);
- _gaq.push(['_trackEvent','Page Scroll','Page Scroll: Content Scanner',window.location.pathname,contentTime,true]);
- } else {
- _gaq.push(['_setCustomVar',1,'ReaderType','Reader',3]);
- _gaq.push(['_trackEvent','Page Scroll','Page Scroll: Content Reader',window.location.pathname,contentTime,true]);
- }
- endContent = true;
- }
- // If user has hit the bottom send an event
- if (bottom == height && !didComplete) {
- endTime = new Date().getTime();
- totalTime = Math.round((endTime - scrollTimeStart)/1000);
- _gaq.push(['_trackEvent','Page Scroll','Page Scroll: Page Bottom',window.location.pathname,totalTime,true]);
- 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);
- });
- });
Some final words
Before starting to use this script, you should read both blog posts from Justin Cutroni to get a grip of the differences between this script and his script.
Other people I should thank for this content tracking method is Thomas Baekdal (and I really recommend his Plus Content).
If you think the tweaks I have done to the code could be improved, feel free to comment (I'm not a programmer).
Related articles
- How to Identify if Visitors are Reading Your Articles with Google Analytics
- How to Measure True Time with Google Analytics