You might also like my other Google Analytics plugin, Riveted.

Scroll Depth

A Google Analytics plugin for measuring page scrolling

Google Analytics Scroll Depth Tracking

Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one.

You can also track when specific elements on the page are scrolled into view. On a blog, for example, you could send a Scroll Depth event whenever the user reaches the end of a post.

The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager.

Download (1.8 kb) View on Github

The Data

Everything is sent to Google Analytics via Events. Under the Event Category "Scroll Depth" you'll see the 3 main event types: Percentage, Elements, and Pixel Depth.

Percentage events are fired at the 25%, 50%, 75%, and 100% scrolling points. There's also a Baseline event which fires as soon as the page loads.

The Elements events correspond to any DOM elements you may have specified in the Elements option.

Pixel Depth events (new in version 0.5) record the scroll distance in pixels, rounded down to the nearest 250px increment. While the percentage events provide a relative measure of scroll depth, pixel depth events provide an absolute measure. This can be useful for comparing across devices where the relative percentage heights vary greatly (e.g., desktop vs mobile).

Note that Pixel Depth events are only sent when Percentage or Elements tracking events are sent. For example, when the 50% scroll event is triggered, a pixel depth event will also be sent to record the current deepest scroll point in pixels.

There's one more type of event, which is the User Timing event. User Timing events are fired alongside the other events and their purpose is to record the amount of time between the page load and the scroll point. These events are found under Site Speed > User Timings.

For some tips on using scroll depth metrics, see this Medium post.

Setting it up

The two requirements are Google Analytics and jQuery (v1.7+). Load the plugin and initialize Scroll Depth as in the example below. Make sure to place the initialization code after your Google Analytics tracking snippet.

<script src="jquery.scrolldepth.min.js"></script>
<script>
$(function() {
  $.scrollDepth();
});
</script>

Plugin options

minHeight

This lets you disable scroll tracking for documents that don't meet a height requirement. "Only track scroll events for documents taller than 2000px." The default setting is 0 (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. Accepts jQuery selectors. The default setting is an empty array: [].

percentage

If you want to turn off scroll percentage tracking and track only the DOM elements you specify in the elements option, set this to false. The default setting is true.

userTiming

You can turn off User Timing events by setting this to false. The default setting is true.

pixelDepth

You can turn off Pixel Depth events by setting this to false. The default setting is true.

// Example with options
$.scrollDepth({
  minHeight: 2000,
  elements: ['#comments', 'footer'],
  percentage: false,
  userTiming: false,
  pixelDepth: false
});

Collection quotas

The current session limit for Google Analytics hits is 500 (review Google Analytics's Collection quotas for more details).

For reference, with the default use of the plugin, a pageview in which a user scrolls all the way to the bottom will trigger 13 events: 1 Baseline + 4 Percentage + 4 Pixel Depth + 4 User Timing. If you're concerned about exceeding the collection limit you can use the plugin options to reduce the types of events sent. (I'd start by disabling User Timing events.)

Google Tag Manager

If you'd like to integrate with Google Tag Manager, the dataLayer variable names are below. For step-by-step instructions on how to use the plugin with Google Tag Manager, check out this blog post by Andy Gibson.

  • Scroll Distance Event Name = ScrollDistance
  • Scroll Timing Event Name = ScrollTiming
  • Event Category = {{eventCategory}}
  • Event Action = {{eventAction}}
  • Event Label = {{eventLabel}}
  • Event Value = {{eventValue}}
  • Event Non-Interaction = {{eventNonInteraction}}

Browser Support

Tested in the latest versions of Chrome, Firefox, Safari, and Opera. Also works in IE 7-10. Also tested on iOS, Opera Mobile, and a few Android emulators.

Contact

@robflaherty parsnip.io

License

Licensed under the MIT license.

25%·
50%·
75%·
100%·