|
1 | 1 | # Scroll Depth
|
2 |
| -Scroll Depth is a Google Analytics plugin that tracks how far users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll marks, sending a Google Analytics Event at each one. |
| 2 | +Scroll Depth is a Google Analytics plugin that tracks how far users are scrolling. The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager. |
3 | 3 |
|
4 |
| -In addition to the percentage scroll marks, you can record when specific elements on the page are scrolled into view. For example, on a blog, you could send a Scroll Depth event whenever the user reaches the end of a post. |
| 4 | +**[All information is available on the Project Page](http://projects.parsnip.io/scroll-depth/)** |
5 | 5 |
|
6 |
| -Timing data for each scroll event is reported to Google Analytics via the [User Timing API](https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingTiming). You can find this data in Google Analytics at Content > Site Speed > User Timings. This will give you data about how many seconds it takes users to reach each scroll point. (Note: Averages can be misleading. Make sure to dig through the GA UI to dig up more meaningful data. You may also want to [increase the sample rate](https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiBasicConfiguration#_gat.GA_Tracker_._setSiteSpeedSampleRate) from the default 5% to 100%.) |
| 6 | +## Contributing |
| 7 | +Bug reports and code contributions are welcome. Please see [contributing.md](https://github.com/robflaherty/jquery-scrolldepth/blob/master/contributing.md). |
7 | 8 |
|
8 |
| -The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager. |
9 |
| - |
10 |
| -[View the Project Page](http://parsnip.io/scroll-depth/) |
11 |
| - |
12 |
| -[View the Blog Post](http://www.ravelrumba.com/blog/tracking-scroll-depth-jquery-google-analytics/) |
13 |
| - |
14 |
| -## Usage |
15 |
| -```javascript |
16 |
| -// Basic |
17 |
| -$.scrollDepth(); |
18 |
| - |
19 |
| -// With some options |
20 |
| -$.scrollDepth({ |
21 |
| - minHeight: 2000, // Only track for documents taller than 2000px | Default: 0 |
22 |
| - elements: ['#comments', 'footer'] // Track DOM elements | Default: [] |
23 |
| - percentage: false, // Don't track depth percentage | Default: true |
24 |
| -}); |
25 |
| -``` |
26 |
| - |
27 |
| -## Google Tag Manager |
28 |
| -If you want to integrate with GTM, here are the dataLayer variable names: |
29 |
| - |
30 |
| -* Scroll Distance Event Name = ScrollDistance |
31 |
| -* Scroll Timing Event Name = ScrollTiming |
32 |
| -* Event Category = {{eventCategory}} |
33 |
| -* Event Action = {{eventAction}} |
34 |
| -* Event Label = {{eventLabel}} |
35 |
| -* Event Value = {{eventValue}} |
36 |
| -* Event Non-Interaction = {{eventNonInteraction}} |
37 |
| - |
38 |
| -## Requirements |
39 |
| -* Google Analytics |
40 |
| -* jQuery 1.7+ |
41 |
| - |
42 |
| -## Browser Support |
43 |
| -Tested in Chrome (18), Firefox (8), Safari (5), Opera (10), IE (7-10). Also tested on iOS, Opera Mobile, and a few Android emulators. |
| 9 | +## Testing |
| 10 | +There's a test HTML file that mocks the Google Analytics functions and writes the GA Event data to the console. |
44 | 11 |
|
45 | 12 | ## Contact
|
46 |
| -If you have any questions please leave a comment on the [associated blog post](http://www.ravelrumba.com/blog/tracking-scroll-depth-jquery-google-analytics/) or find me on Twitter at [@robflaherty](https://twitter.com/robflaherty). |
| 13 | +If you have any questions you can find me on Twitter at [@robflaherty](https://twitter.com/robflaherty). |
47 | 14 |
|
48 | 15 | ## Changelog
|
49 | 16 |
|
| 17 | +0.5 (2/13/14): Added Pixel Depth option. Added option to turn off UserTiming. Removed test mode option. |
| 18 | + |
50 | 19 | 0.4.1 (2/13/14): Fixed GTM firing double events
|
51 | 20 |
|
52 | 21 | 0.4 (12/23/13): Added support for Google Tag Manager
|
|
0 commit comments