Submit A Resource
Subscribe By Email (265+)
May 22, 2012
jQuery Scroll Depth - A jQuery Plugin To Track Page Scroll Depth
jQuery Scroll Depth is a jQuery plugin that tracks how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. The default behavior reports on the 25%, 50%, 75%, and 100% scroll marks. It also sends an initial "Baseline" event to use as a benchmark.
In addition to the percentage scroll marks 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.
Data is sent to Google Analytics so it's required that you have Google Analytics tracking implemented on your site.
Plugin optionsThe plugin offers a few 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.
Requirements: jQuery, Google Analytics Asynchronous Tracking Snippet
License: MIT License or GPL
Trending Posts On Functionn This Week
Other Interesting Resources:
- 20 Fresh, High-Quality Free WordPress Themes 2012
- 50 Fresh, High-Quality Free WordPress Themes 2012 - Edition #2
- The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts
- BLUR.JS - A JQUERY PLUGIN PRODUCING PSUEDO-TRANSPARENT BLURRED ELEMENTS
- Selene - A Stunning & Sleek jQuery UI Theme
- jQuery UI Bootstrap Theme - Bootstrap v2.X's Theme For jQuery UI
- JQuery (275)
- Libraries (132)
- CSS (115)
- frameworks (113)
- Tools (112)
- html (86)
- Github (79)
- html5 (72)
- Node.js (58)
- mobile (52)
- Responsive (49)
- CSS3 (47)
- page effects (45)
- Web Design (41)
- Bootstrap (35)
- twitter (31)
- image effets (22)
- MVC (18)
- generators (18)
- CoffeeScript (16)
- graphics (10)