GTM allows the dataLayer to be renamed to something else, to prevent conflicts with existing "dataLayer" objects.

Also, users might want to specify their own event and field names, instead of using the hard-coded ones in this plug-in.

(I've already created a branch for all of the above in my local repository and using it in some production instances, but can't push my branch to remote.)

How would this work in case of infinite scrolling? README doesn't say

Issue raised by @alexei:

"In my project, I have a responsive page with sections that are visible or hidden depending on the device i.e. certain sections are visible on mobile devices while remaining hidden on desktop computers. We don't serve different content to different devices. So I noticed that hidden elements do trigger events although they shouldn't. I do believe, for stats purposes, it is possible to segment GA reports however, again, omitting hidden elements seems like the best approach i.e. vs telling marketing folks how to read GA data."

I understand this use cause... but an element being hidden doesn't necessarily mean it's not a valid marker for firing a scroll event. Silently ignoring those elements might create more problems than it solves.

Interested to see if anyone else has any thoughts on it...

Does it make sense to change "Event Action" name from "Percentage" to "Elements" if options.percentage is false and options.elements has some data?

// Establish baseline (0% scroll)                                          
if (options.percentage) {                                                  
  sendEvent('Percentage', 'Baseline');                                     
} else if (options.elements) {                                             
  sendEvent('Elements', 'Baseline');                                       
}      

We have succesfully implemented this on a page, but see a couple of weird numeric labeled events in our reports; for instance: 3250, 3000, 11750 and 6250. Any ideas what might be causing this? Thanks in advance.

JS error if dataLayer.push() is called before GA converts dataLayer from an array to a function.

When installing WP-scroll Depth, the plugin "Master Slider" will not load: http://codecanyon.net/item/master-slider-wordpress-responsive-touch-slider/7467925

Not an issue but a query. It would be nice if you could include this in the documentation.

I am guessing these are async events on the browser. How do I know if this plugin is indeed sending data to Google analytics servers? Do I watch the XHR window in my firebug/developer tools?

Hello,

in GA shows only "to use this feature visit: EVENT-TRACKING.COM"

Where I did a mistake?

Thank you

Re: @justinph's blog comment:
http://www.ravelrumba.com/blog/tracking-scroll-depth-jquery-google-analytics/comment-page-1/#comment-2322

I like the idea of non-interaction by default. However in some cases if someone get's to the bottom of screen it means they may have read the entire article etc. Is there a way I could implement this and have 25% be non-interaction but everything over 25% (or whatever we decide) is an interaction?

I am thinking about bounce rate.

There's an issue with the nonInteraction flag on the newer “Universal” analytics: GA is expecting a boolean to be passed to the ga() function, but on line 89 a ternary statement is converting it to a number.

You can confirm this using the Google Analytics Debugger extension Google offers.

This is confusing because the official documentation for the events API has an example that uses 1 for the value, but it is incorrect. The field reference does, however, note that a boolean is expected.

As this is already handling classic and universal analytics, it seems straightforward to let it handle piwik tracking as well.

I've created a pull request for this if you think it's not out of scope. #46

Rob first of all this is a GREAT tool for novice small businesses seeking to understand their sites better. Especially when we use long converting pages.

We have an issue with another plug in which requires newer jQuery library and this line of code is causing the plug in to malfunction.

I have tried removing it since we are on a Wordpress site and a jQuery library newer than 1.7 is included with the core.

src='http://www.cleaningheroes.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.3'></script>

However this breaks the scroll depth event tracking.

Is there something that can be updated in the scrolldepth.js file to work with new jQuery libraries or am I overlooking something simple?

Thanks in advance

Site is www.cleaningheroes.com

what is pixel depth, percentage, and user timing?

Hi,

Just found this repo from GA blog post, the idea is really good, but when i look through the code, i saw that event is in jquery scroll namespace without any throttle function.

And when i tested the code, GA events are sent every time I scroll, which immediately reach the point "Exceeded maximum hit rate. Aborting hit. " if scrolling is fast.

There is documented performance issue with scrolling event, please check this post: http://ejohn.org/blog/learning-from-twitter/
The possible way to solve this (which i am using, and under test now) is copying one of the underscore JS throttle function, and wrap scroll inside it. Also there should be guard for multiple event firing on same percentage.

Will keep you guys posted if you think it is an improvement.

/Weizhen

This probably means a third mode of tracking, where GA events are fired every X pixels or every X seconds.

$ bower -v
1.3.12

$ bower info scroll-depth
bower not-cached    git://github.com/robflaherty/jquery-scrolldepth.git#*
bower resolve       git://github.com/robflaherty/jquery-scrolldepth.git#*
bower download      https://github.com/robflaherty/jquery-scrolldepth/archive/0.4.1.tar.gz
bower extract       scroll-depth#* archive.tar.gz
bower invalid-meta  scroll-depth is missing "main" entry in bower.json
bower invalid-meta  scroll-depth is missing "ignore" entry in bower.json
bower resolved      git://github.com/robflaherty/jquery-scrolldepth.git#0.4.1

{
  name: 'scroll-depth',
  homepage: 'https://github.com/robflaherty/jquery-scrolldepth',
  version: '0.4.1'
}

Available versions:
  - 0.4.1
  - 0.1.2
  - 0.1.1

Version 0.7 is not listed as an available version. It might be due to the fact that 0.7 does not follow semantic versioning

I implemented the script by adding the code (after tracker initialization) to the Google Analyticator WordPress-Plugin (https://wordpress.org/plugins/google-analyticator/). Unfortunately, the script is not sending any events. Please help :-(.

1) Set different (optional) non-interaction values for "baseline" and subsequent "scroll" events

It makes total sense to set the first "baseline" event non-interaction value to "true" - Otherwise pages would have a bounce rate of zero all the time..

But, some site owners may perceive subsequent scroll activity differently and want the visitor action to count (e.g. set non-interaction value to "false" for scrolling)

Having this ability to set different values for each type of event would be a great additional feature.

2) Set an event when a visitor start scrolling .scroll()

In some cases a visitor might not make it to the 25% page view but, the intention to read below the fold is an important distinction to make.

Consider for example a mobile browser viewing a long page on a poorly optimised site. The long page length (although relative), requires much more scrolling action before the visitor hits the 25% threshold. If they give up mid-way, should their initial effort to read be acknowledged?

3) Set an event when a visitor reaches the end of a content area

Sites with long comments sections (e.g. Blogs) mean that the probability of a visitor reaching 100% or the bottom of the page is minimal. However, it may be wrong to assume that didn't "consume" 100% of the content and leave satisfied.

For these use cases, adding a additional event like "End of Content" of "Content Read" might be valuable.

There is a separate project with some of these features available on Justin Cutroni's Site

4) Warn readers about the 500 hits limit per session in Google Analytics

With some high volume / traffic sites, using the scroll tracking might be problematic. GA enforces a limit of 500 "hits" per session (visit) which could impact data quality when exceeded.

In a simple scenario where a visitor lands on a page and scrolls to the end bottom (without clicking on any content) there would be 11 hits.

1 hit = Page View Image Request
2 hit = Event Baseline
3 hit = Event User Timing
4 hit = Event 25%
5 hit = Event User Timing
6 hit = Event 50%
7 hit = Event User Timing
8 hit = Event 75%
9 hit = Event User Timing
10 hit = Event 100%
11 hit = Event User Timing

Add in other tracking events like video content or link clicks and the total per visit soon racks up.

It might be worth adding a note about this into the article just to let people know.

Perhaps it should be noted that jQuery 1.7+ is required. The on method didn't appear until then.

My layout is using a fixed sidebar that requires the main content to be inside a scrolling div, so scroll events bound to the window never fire. What would you think about adding an option to specify the container that actually does the scrolling?

• non-interaction option #28
• Angular/single page app support #24 (Bumping to next iteration)
• Add Bower #35
• Change baseline category for element-only tracking #34

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#renaming

This fixes the problem people have reported when using Yoast's plugin.

From @alexei:
#25 (comment)
#25 (comment)
#25 (comment)

Need to think about this one some more

I needed to modify the eventCategory so I added that to options. I also did not need the baseline event so I added that to options as well. Would you like a pull request?

Since you have two tagged releases, Bower chooses to checkout v0.1.2 instead of the most resent v0.4.1. So, either remove your git release tags or add new ones as you update this project.

Thanks!

How does this plugin work with pages who load on the fly? Just like the facebooktimeline?
And what about full javascript pages which load content over ajax. For example:

When the page loads the page 250px in height, but when the AJAX content is loaded the content suddenly will become 3500px in height. On which height does the plugin work? The static content or the dynamic content. Or do you need to initialize the plugin when the content is loaded?
If so, maybe you can set a div listner. When the content is being changed the plugin reinitializes itself, so the new (100%) height is "reset".

Some of our page lengths vary due to comments.
It would be nice to be able to define the end of the actual content on the page.

   var defaults = {
       minHeight: 0,
       elements: [],
       percentage: true,
       userTiming: true,
       pixelDepth: true,
       bottomElement: ''
   };

...

var docHeight = $(document).height(),
    winHeight = window.innerHeight ? window.innerHeight : $window.height(),
    scrollDistance = $window.scrollTop() + winHeight;

        if (options.bottomElement) {
            docHeight = $(options.bottomElement).offset().top;
  }
    // Recalculate percentage marks
  var marks = calculateMarks(docHeight),

Then pass the option through:

$(function() {
    $.scrollDepth({bottomElement:'#bottomElement'});
});

I am using your script to monitor the scroll behavior of the visitors. It is a great script. I installed to our SharePoint 2013 site. I load first the track code (InPage Analyse is enabled in the track code). After the track code I do the registration of your js file. As last but not least I run the function "scrollDepth" after the page is loaded. Something like this:

When I scroll and go to GA I see only the baseline is pushed. When I debug I see it go to my breakpoints after each scroll move. What can I do to find the issue ?

This seems like a reasonable option.

Please get the latest version 0.5 on CDN.

http://cdnjs.com/libraries/jquery-scrolldepth/ has only up to 0.4, for example.

Then include this CDN link in your README.md

Hello Guys,
i installed your plugin and i wondered, if i'm the only person, who has a one page website because this feature is missing totaly.

If a user of my website clicks on a link in the top navigation, the content scrolls down to the section he choosed. So now, if i have a page which looks like this:

• Home
• Concept
• About
• Foo
• Bar

And the user chooses the content Foo, the page scrolls automatically through Home, Concept, and About and all three events for the view get triggerd and send to google.

Why isn't there a counter which is configurable via the Admin Control-Panel in which i can define the time, the element has to be inside the view and after the time is over, the event gets triggerd?

That would help me a lot!

Having a strange issue where nothing is happening!

Executing jQuery.scrollDepth(); in console returns undefined

Not sure what should be happening, so its difficult to debug.

URL: https://getartichoke.com/

jshint is throwing up all sorts of errors. Everything seems to work fine until I run it through grunt.

The website says that this works:

$(function() {
$.scrollDepth();
});

But it doesn't. The HTML example works fine (i.e not wrapped in jquery function). but this has no effect at all.

Thanks for a handy plugin, though. I was expecting to write this myself, but this is all I need!

Cheers

Can't reopen the old issue (#67), so I'm opening a new one:

I need a slightly more detailed guide on how to enable this script in wordpress. I spent several days trying to figure this out using google and haven't gotten any closer.

I don't know the answer to this question and I'm looking for feedback from the community. When we talk about measuring "scroll depth" (i.e., the distance a user has scrolled on a page) is it the actual scrolling behavior we're interested in? Or is the scrolling activity just an indicator for how much of the page's content has been viewed?

I believe it's the latter but I'm wondering what others think.

It matters when deciding how to handle "short" pages that can't be scrolled. If the goal is tracking content visibility then the 100% event should fire even if the user hasn't scrolled. If the goal is tracking scrolling, then obviously it shouldn't.

Thoughts?

Update: I also posted this as a poll question here: http://gopollgo.com/is-scroll-depth-a-metric-for-tracking-scroll-activity-or-content-visibility

Hello. I'm using AngularJS page routing (Multiple Views). Since i don't refresh the entire webpage your code will unbind scroll event, eventually.

// If all marks already hit, unbind scroll event
      if (cache.length >= 4 + options.elements.length) {
        $window.off('scroll.scrollDepth');
        return;
      }

I wish I could "reload" the scrolldepth when the View is changed. I'm asking for some advise to find the best option. Thank you

Not a big deal but it might be helpful for some people