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

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.


3. Default plugin options.

  // 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
// add more elements
jQuery.scrollDepth.addElements(['aside', 'footer']);
// remode elements



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

  • Publication date: 06.06.2018
  • Source