robflaherty / scroll-depth Goto Github PK
View Code? Open in Web Editor NEWGoogle Analytics plugin to track visitor scroll depth
Home Page: https://scrolldepth.parsnip.io/
License: Other
Google Analytics plugin to track visitor scroll depth
Home Page: https://scrolldepth.parsnip.io/
License: Other
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".
This probably means a third mode of tracking, where GA events are fired every X pixels or every X seconds.
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?
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.
How would this work in case of infinite scrolling? README doesn't say
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
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.)
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!
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.
JS error if dataLayer.push()
is called before GA converts dataLayer
from an array to a function.
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
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 :-(.
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:
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!
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'});
});
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?
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...
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>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
Perhaps it should be noted that jQuery 1.7+ is required. The on method didn't appear until then.
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.
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?
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
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.
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:
here is my track code.. <script type="text/javascript" src="/_layouts/15/BrabantWater.Internet/js/jquery.scrolldepth.js"></script> <script> $(window).bind("load", function () { jQuery(function () { jQuery.scrollDepth(); }); }); </script>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.
When installing WP-scroll Depth, the plugin "Master Slider" will not load: http://codecanyon.net/item/master-slider-wordpress-responsive-touch-slider/7467925
From @alexei:
#25 (comment)
#25 (comment)
#25 (comment)
Need to think about this one some more
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
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');
}
Hello,
in GA shows only "to use this feature visit: EVENT-TRACKING.COM"
Where I did a mistake?
Thank you
what is pixel depth, percentage, and user timing?
jshint is throwing up all sorts of errors. Everything seems to work fine until I run it through grunt.
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.
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
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?
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.
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
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
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.
$ 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
https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#renaming
This fixes the problem people have reported when using Yoast's plugin.
Not a big deal but it might be helpful for some people
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.