From 863aef45fcc6d04eaf57c0f630dfe7b618c927ac Mon Sep 17 00:00:00 2001 From: Rob Flaherty Date: Sat, 1 Mar 2014 15:39:16 -0500 Subject: [PATCH] Stuff for v0.5 release --- jquery.scrolldepth.js | 2 +- jquery.scrolldepth.min.js | 4 ++-- readme.md | 49 +++++++-------------------------------- 3 files changed, 12 insertions(+), 43 deletions(-) diff --git a/jquery.scrolldepth.js b/jquery.scrolldepth.js index 0b25f5c..3cf27d0 100644 --- a/jquery.scrolldepth.js +++ b/jquery.scrolldepth.js @@ -1,6 +1,6 @@ /*! * @preserve - * jquery.scrolldepth.js | v0.4.1 + * jquery.scrolldepth.js | v0.5 * Copyright (c) 2014 Rob Flaherty (@robflaherty) * Licensed under the MIT and GPL licenses. */ diff --git a/jquery.scrolldepth.min.js b/jquery.scrolldepth.min.js index ac327a3..8dc93d8 100644 --- a/jquery.scrolldepth.min.js +++ b/jquery.scrolldepth.min.js @@ -1,7 +1,7 @@ /*! * @preserve - * jquery.scrolldepth.js | v0.4.1 + * jquery.scrolldepth.js | v0.5 * Copyright (c) 2014 Rob Flaherty (@robflaherty) * Licensed under the MIT and GPL licenses. */ -!function(a,b,c){"use strict";var e={elements:[],minHeight:0,percentage:!0,testing:!1},f=a(b),g=[];a.scrollDepth=function(d){function i(b,c,e){d.testing?a("#console").html(b+": "+c):"undefined"!=typeof dataLayer&&"function"==typeof dataLayer.push?(dataLayer.push({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:b,eventLabel:c,eventValue:1,eventNonInteraction:!0}),arguments.length>2&&dataLayer.push({event:"ScrollTiming",eventCategory:"Scroll Depth",eventAction:b,eventLabel:c,eventTiming:e})):("function"==typeof ga&&(ga("send","event","Scroll Depth",b,c,1,{nonInteraction:1}),arguments.length>2&&ga("send","timing","Scroll Depth",b,e,c)),"undefined"!=typeof _gaq&&"function"==typeof _gaq.push&&(_gaq.push(["_trackEvent","Scroll Depth",b,c,1,!0]),arguments.length>2&&_gaq.push(["_trackTiming","Scroll Depth",b,e,c,100])))}function j(a){return{"25%":parseInt(.25*a,10),"50%":parseInt(.5*a,10),"75%":parseInt(.75*a,10),"100%":a-1}}function k(b,c,d){a.each(b,function(b,e){-1===a.inArray(b,g)&&c>=e&&(i("Percentage",b,d),g.push(b))})}function l(b,c,d){a.each(b,function(b,e){-1===a.inArray(e,g)&&a(e).length&&c>=a(e).offset().top&&(i("Elements",e,d),g.push(e))})}function m(a,b){var c,d,e,f=null,g=0,h=function(){g=new Date,f=null,e=a.apply(c,d)};return function(){var i=new Date;g||(g=i);var j=b-(i-g);return c=this,d=arguments,0>=j?(clearTimeout(f),f=null,g=i,e=a.apply(c,d)):f||(f=setTimeout(h,j)),e}}var h=+new Date;d=a.extend({},e,d),a(c).height()=4+d.elements.length?(f.off("scroll.scrollDepth"),void 0):(d.elements&&l(d.elements,m,o),d.percentage&&k(n,m,o),void 0)},500)))}}(jQuery,window,document); \ No newline at end of file +!function(e,t,n){"use strict";var r,a,l,i={minHeight:0,elements:[],percentage:!0,userTiming:!0,pixelDepth:!0},o=e(t),c=[],u=0;e.scrollDepth=function(h){function p(e,t,n,i){l?(dataLayer.push({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:e,eventLabel:t,eventValue:1,eventNonInteraction:!0}),h.pixelDepth&&arguments.length>2&&n>u&&(u=n,dataLayer.push({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:"Pixel Depth",eventLabel:f(n),eventValue:1,eventNonInteraction:!0})),h.userTiming&&arguments.length>3&&dataLayer.push({event:"ScrollTiming",eventCategory:"Scroll Depth",eventAction:e,eventLabel:t,eventTiming:i})):(r&&(ga("send","event","Scroll Depth",e,t,1,{nonInteraction:1}),h.pixelDepth&&arguments.length>2&&n>u&&(u=n,ga("send","event","Scroll Depth","Pixel Depth",f(n),1,{nonInteraction:1})),h.userTiming&&arguments.length>3&&ga("send","timing","Scroll Depth",e,i,t)),a&&(_gaq.push(["_trackEvent","Scroll Depth",e,t,1,!0]),h.pixelDepth&&arguments.length>2&&n>u&&(u=n,_gaq.push(["_trackEvent","Scroll Depth","Pixel Depth",f(n),1,!0])),h.userTiming&&arguments.length>3&&_gaq.push(["_trackTiming","Scroll Depth",e,i,t,100])))}function g(e){return{"25%":parseInt(.25*e,10),"50%":parseInt(.5*e,10),"75%":parseInt(.75*e,10),"100%":e-5}}function s(t,n,r){e.each(t,function(t,a){-1===e.inArray(t,c)&&n>=a&&(p("Percentage",t,n,r),c.push(t))})}function v(t,n,r){e.each(t,function(t,a){-1===e.inArray(a,c)&&e(a).length&&n>=e(a).offset().top&&(p("Elements",a,n,r),c.push(a))})}function f(e){return(250*Math.floor(e/250)).toString()}function m(e,t){var n,r,a,l=null,i=0,o=function(){i=new Date,l=null,a=e.apply(n,r)};return function(){var c=new Date;i||(i=c);var u=t-(c-i);return n=this,r=arguments,0>=u?(clearTimeout(l),l=null,i=c,a=e.apply(n,r)):l||(l=setTimeout(o,u)),a}}var D=+new Date;h=e.extend({},i,h),e(n).height()=4+h.elements.length?void o.off("scroll.scrollDepth"):(h.elements&&v(h.elements,l,u),void(h.percentage&&s(i,l,u)))},500)))}}(jQuery,window,document); \ No newline at end of file diff --git a/readme.md b/readme.md index 4f4af91..b403daa 100644 --- a/readme.md +++ b/readme.md @@ -1,52 +1,21 @@ # Scroll Depth -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. +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. -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. +**[All information is available on the Project Page](http://projects.parsnip.io/scroll-depth/)** -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%.) +## Contributing +Bug reports and code contributions are welcome. Please see [contributing.md](https://github.com/robflaherty/jquery-scrolldepth/blob/master/contributing.md). -The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager. - -[View the Project Page](http://parsnip.io/scroll-depth/) - -[View the Blog Post](http://www.ravelrumba.com/blog/tracking-scroll-depth-jquery-google-analytics/) - -## Usage -```javascript -// Basic -$.scrollDepth(); - -// With some options -$.scrollDepth({ - minHeight: 2000, // Only track for documents taller than 2000px | Default: 0 - elements: ['#comments', 'footer'] // Track DOM elements | Default: [] - percentage: false, // Don't track depth percentage | Default: true -}); -``` - -## Google Tag Manager -If you want to integrate with GTM, here are the dataLayer variable names: - -* 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}} - -## Requirements -* Google Analytics -* jQuery 1.7+ - -## Browser Support -Tested in Chrome (18), Firefox (8), Safari (5), Opera (10), IE (7-10). Also tested on iOS, Opera Mobile, and a few Android emulators. +## Testing +There's a test HTML file that mocks the Google Analytics functions and writes the GA Event data to the console. ## Contact -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). +If you have any questions you can find me on Twitter at [@robflaherty](https://twitter.com/robflaherty). ## Changelog +0.5 (2/13/14): Added Pixel Depth option. Added option to turn off UserTiming. Removed test mode option. + 0.4.1 (2/13/14): Fixed GTM firing double events 0.4 (12/23/13): Added support for Google Tag Manager