jQuery Scroll Depth

This is a jQuery plugin that tracks how far down the page a user has scrolled and records the data in Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll points. It also sends an initial "Baseline" event to use as a benchmark.

In addition to the percentage scroll points you can trigger events based on specific DOM elements. For example you can tell the plugin to report whenever the article comments div is scrolled into view, or whenever the footer is reached.

The plugin also tracks timing data for each scroll event and records the times in Google Analytics via the User Timing API. You can find this data in Google Analytics at Content > Site Speed > User Timings. (Note: It's a good idea to increase the Site Speed sample rate from the default 5% to 100%.)

Data is sent to Google Analytics so it's required that you have Google Analytics tracking implemented on your site.

Setting it up

It's easy to set up. First, make sure you're using the Google Analytics asynchronous tracking code (this is required; the plugin will not work with the old version of the tracking code). Then include jQuery (1.7+) and the plugin. After that you just have to initialize the plugin. It looks like this:

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

The code should be placed after your Google Analytics snippet and preferably at the bottom of the page, just before the closing body tag. (Note: If you’ve put the code at the bottom of the page, wrapping the plugin initialization in jQuery’s document ready event is not necessary.)

Plugin options

• minHeight: This lets you enable scroll tracking based on a minimum document height. "Only track scroll events for documents taller than 2000px." The default setting is 0 (i.e., all pages are tracked).
• elements: This lets you record scroll events for specific elements on the page. "Track when the footer is scrolled into view." You can specify multiple elements but each should be a unique element. In other words you should specify IDs or singular HTML elements, not classes with multiple instances. The default setting is an empty array: [].
• percentage: If you want to turn off the default scroll percentage tracking and only track certain DOM elements, set this to false. The default setting is true.

// Example with some options
$.scrollDepth({
  minHeight: 2000, // Only track for documents taller than 2000px
  elements: ['#comments', 'footer'] // Track DOM elements
  percentage: false, // Don't track depth percentage
});

Google Analytics Events and Bounce Rate

By default, Google Analytics Events impact your bounce rate because Google Analytics defines a bounce as visit with one interaction. The event is viewed as a second interaction and so a single-pageview visit is not considered a bounce. If you've used GA events in the past you may have seen your bounce rate plummet (although pageview-based bounce rate could still be viewed by looking at the percentage of single-page visits).

Last October Google Analytics added an opt_noninteraction option to turn off this behavior (thanks to @justinph for the heads-up). The 0.1.1 release of this plugin now uses this option which means your bounce rate won't be affected. If you downloaded the first release and care about the displayed bounce rate, make sure to update to the latest version.

Requirements

• Google Analytics asynchronous tracking snippet
• jQuery version 1.7+

Browser Support

Tested in Chrome (18), Firefox (8), Safari (5), Opera (10), IE (7-10). Also tested on iOS, Opera Mobile, and a few Android emulators.

Contact

If you have any questions please leave a comment on the associated blog post or find me on Twitter at @robflaherty. If you want to get into the nerdier stuff, you know where to go.

License

Licensed under the MIT and GPL licenses.