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

The Big Questions

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

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

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:

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

• 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

Moving Forward:

 

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