jQuery Plugin To Tract Track Scroll Depth For Google Analytics - scrollDepth

scrollDepth is a lightweight yet very useful jQuery plugin for webpage UX / SEO that detect the distance (25%, 50%, 75%, and 100% scroll points) the user has scrolled and then send the data to Google Analytics via events ( or any analytics service that supports events).

Basic usage:

1. Load the minified version of jQuery scrollDepth plugin after JQuery library as this:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.scrolldepth.min.js"></script>

2. Initialize the plugin and we're ready to go.

jQuery.scrollDepth();

3. Default plugin options.

jQuery.scrollDepth({

  // disable scroll tracking when documents is smaller than:
  minHeight: 0,

  // an array of elements to record scroll events
  elements: [],

  // enable scroll percentage tracking
  percentage: true,

  // enable User Timing events
  userTiming: true,

  // enabled Pixel Depth events
  pixelDepth: true,

  // true: scroll events will not impact your bounce rate
  nonInteraction: true,

  // If you're using Universal Analytics and have changed the global object name from the default "ga". 
  gaGlobal: false,

  // By default, if Scroll Depth detects Google Tag Manager it assumes that you're using it for your GA implementation.
  // If you're using GTM but not using it for GA then you can set this option to true and Scroll Depth will ignore GTM
  gtmOverride: false,

  // custom tracker name.
  trackerName: false,

  // custom data layer name
  dataLayer: 'dataLayer'
  
});

4. API methods.

// reset
jQuery.scrollDepth.reset();

// add more elements
jQuery.scrollDepth.addElements(['aside', 'footer']);

// remode elements
jQuery.scrollDepth.removeElements(['#el']);

Changelog:

2020-07-04

• v1.2.0

2020-06-27

• v1.1

2018-06-06

• Added support for gtag.js

---

This awesome jQuery plugin is developed by robflaherty. For more Advanced Usages, please check the demo page or visit the official website.