Tracking visitor scroll depth using Google Analytics

vickeryhillAnalytics, Web Development

Looking for Instructions to track for Universal GA & GTM? Read Scroll Depth Tracking For Google Analytics Using Google Tag Manager.

The Big Questions

  • How engaged are your website’s readers and how much of your website do they actual view or read?
  • Do your page introductions (top content) encourage readers to continue reading through to the bottom or are they bored and moving on?
  • Are your calls-to-action buried below your typical viewers screen resolution page bottom?

We recently setup a single page, responsive website for a new Barre, Vermont restaurant and, during our goal planning, we realized it would be very helpful to see whether the visitor was actually reading the content ‘below the fold’. Using a jQuery scroll tracking plugin and Google Analytics (GA) asynchronous snippet (as well a side note regarding an option for sites using the Traditional method), we’ll setup tracking in an actual online example, then review reporting and recommendations for website optimization.

Real-world client summary

We recently launched a single-page responsive website for a restaurant in Barre, Vermont called the Cornerstone Pub & Kitchen. The single page site is built on a responsive WordPress template with a variety of content modules at the top for operational and social content functions (hours, directions, contact info, Facebook, and Twitter). We setup Google Analytics event tracking via anchor tag onclick calls to track iconic mouse click.

Below these trackable features is the meat of the website (literally) in the form of mouth-watering menu items, the craft beer list, and a mission statement about the owners. Since this section of the content is a single, long scrolling page, we wanted a way to track the visitor reading down through the content region by scrolling.

First, we used existing GA report data to see what the typical visitor resolution is. As you can see, the top 10 visitor Screen Resolutions add up to almost 76% of all visitors.

Of those 76%, resolutions vary from iPhone 320x480px to the largest 1920×1080. Our ‘tallest’ screen resolutions tracked have a height of 1024px.

Looking at the site layout, we can see that at 1024 pixels, they can only read the mission statement and first line of the menu items.

 

The Solution: Analyzing Scroll Depth

Since Google Analytics’ doesn’t include scroll depth tracking in its otherwise robust (and free) toolset, we found a method to trigger events at specific page percentages by a visitor using a jQuery plugin that records events using Google Analytics _trackEvent method.

 

Setting up Scroll Tracking using GA Asynchronous Method

Requirements:

  1. You need to load jQuery script library (version 1.7 or higher).  Download the latest version of jquery here.
  2. And call to a version of jquery.scrolldepth.js on/in your website’s script folder. Download jquery.scrolldepth.js via Scroll Depth Githhub Project Page.

Installation:

  • Make sure to have your asynchronous tracking script set up in the head of your web pages with _gaq.push([‘_trackPageview’]); as this will be the method that our scrolling event’s will be tracked.

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXXXX-X’]);
_gaq.push([‘_trackPageview’]);
(function() { var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

  • Make sure jquery.scrolldepth.js is installed in your site’s scripts folder.
  • Load Google jquery library; add script reference on site pages.
  • Load scroll depth script AND scrollDepth function just above the closing body tag on your site pages:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script src=”/ScriptLibrary/jquery.scrolldepth.js“></script>
<script> $(function() {  $.scrollDepth();}); </script>

Data and Results:

After successfully integrating the jquery Scroll tracking method as an event, we logged into Google Analytics a few hours later to see the events being triggered by visitors when they look down %’s of the page.

In the initial days, we see (click to enlarge):

Google Analytics Asynchronous Scroll Tracking

  • Baseline (0%): by 100% of unique visitors
  • 25% Page Scroll: by 86% of unique visitors
  • 50% Page Scroll: by 82% of unique visitors
  • 75% Page Scroll: by 78% of unique visitors
  • 100% Page Scroll: by 68% of unique visitors
As you can see, nearly 70% of visitors scrolled all the way to the very bottom of the page letting us know they are reading the entire menu and the site is operating as hoped.
Knowing that a majority of visitors scroll to the bottom content, we could now test out future content/design ideas for the footer like banner advertisements, social media content feed or even navigation to take the visitor to future pages like job opportunities in Barre, catering, etc.
Digging deeper, we can start to look at traffic sources, OS, browsers, or even better, screen resolutions to see which resolutions are looking how deep. In the following Google Analytics report screenshot we remove ‘baseline’ with an advanced filter to make the data more sensible (since everyone looking at the site sees the baseline).

Moving Forward:

Obviously 100% scroll depth by 100% of your visitors would be perfection but it’s not a realistic goal. Increasing scroll depth to 100% for an additional 5-10% would be huge and with modest effort testing, modifying menu items, and shortening mission statement content–it’s a realistic possibility.

Learning what the visitor is doing on your site with new mechanisms like scroll depth tracking can be very useful to test existing layout and content, as well as hypothesize about future enhancements.


ALTERNATIVE: If you are using ‘traditional’ (non-asynchronous) Google Analytics loading on your site:

If you are loading Google Analytics via the Traditional tracking script setup because of third-party constraints, you use the following setup and you can start by tracking a single % point on the page to track as an event when the visitor reaches it. In this example we chose 50% scroll depth.

Installation:

  • Scroll TrackingScript to add just below opening <head> tag:

 

<script src=’http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
/* <![CDATA[ */
var IsDuplicateScrollEvent = 0;$(document).ready(function () {
SetupGoogleAnalyticsTrackEvents();
});function SetupGoogleAnalyticsTrackEvents()
{
TrackEventsForMinimumPageScroll();
}function TrackEventsForMinimumPageScroll()
{
$(window).scroll(function(){
var scrollPercent = GetScrollPercent();if(scrollPercent > 50)
{
if(IsDuplicateScrollEvent == 0)
{
IsDuplicateScrollEvent = 1;
// Set up event tracking that compliments your site’s logic: (“Category”, “Action”, “Label”, “Value”)TrackEvent(“Scroll Depth”, “Percentage”, “50%”);
}
}
});
}function GetScrollPercent()
{
var bottom = $(window).height() + $(window).scrollTop();
var height = $(document).height();return Math.round(100*bottom/height);
}function TrackEvent(Category, Action, Label)
{
pageTracker._trackEvent(Category, Action, Label);
}
/* ]]> */
</script>
Sample Screen Shot of GA Event Tracking Dashboard

 

  • Make sure your Traditional GA script is just above closing </body> tag, has pageTracker._trackPageview(); method listed and is updated with your GA website account credentials:

<script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
try{
var pageTracker = _gat._getTracker(“UA-XXXXXX-X”);
pageTracker._setDomainName(“yourwebsite.com”);
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}
</script>