GA virtual page scroll tracking
Update: If you are not sure if the script is not caching events, the search has not gone well so far.
I am using the script below to track virtual page views in GA, the site has a very long page where we track this. The problem I'm running into is that as soon as the user scrolls to the bottom, it doesn't register as a new pageview if they scroll through the backups (which makes it at most 1 views per page). Any help with this would be greatly appreciated. I am using jQuery and the script below is submitting / tracking.
This script, in addition to the Universal Analytics code, is implemented immediately before the tag. The first code below is the regular Google Analytics code that is required to run the debugger correctly because this is where the account is defined. The second script is the one I'm having a problem with.
Normal UA script (found in headers):
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-123456-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
Script for scrolling virtual page views:
<script language="javascript">
// Predefined variable
Frequency = 10;
//Tracking and Sending
_frequency = Frequency;
_repetition = 100 / Frequency;
var _scrollMatrix = new Array();
for (ix = 0; ix < _repetition; ix++) {
_scrollMatrix[ix] = [_frequency, 'false'];
_frequency = Frequency + _frequency;
}
$(document).scroll(function (e) {
for (iz = 0; iz < _scrollMatrix.length; iz++) {
if (($(window).scrollTop() + $(window).height() >= $(document).height()
* _scrollMatrix[iz][0] / 100) && (_scrollMatrix[iz][1]== 'false')) {
_scrollMatrix[iz][1] = 'true';
ga('send', 'pageview', _scrollMatrix[iz][0]+'%' );
}
}
});
</script>
source to share
You script create an array of arrays with thresholds from 10 to 100 as an index as defined by the variable "repentance" (that doesn't mean you think it means, you mean "repetition", unless you're really sorry about writing of this script). One of the values for each element if your array array is boolean "false".
This boolean is evaluated in a loop inside the document.scroll function. If false, the page is viewed and the variable is set to true. What happens in this bit:
if (($(window).scrollTop() + $(window).height() >= $(document).height()
* _scrollMatrix[iz][0] / 100) && (_scrollMatrix[iz][1]== 'false')) {
_scrollMatrix[iz][1] = 'true';
This means that the next time around the boolean value for _scrollMatrix[iz][1]
will be "true" and the if branch will no longer be executed.
If you want to run the Google Analytics code, regardless of whether you can remove the boolean and the part where it was evaluated. So your script will look like this:
<script language="javascript">
// Predefined variable
Frequency = 10;
//Tracking and Sending
_frequency = Frequency;
_repentance = 100 / Frequency;
var _scrollMatrix = new Array();
for (ix = 0; ix < _repentance; ix++) {
_scrollMatrix[ix] = [_frequency];
_frequency = Frequency + _frequency;
}
$(document).scroll(function (e) {
for (iz = 0; iz < _scrollMatrix.length; iz++) {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * _scrollMatrix[iz][0] / 100) ) {
ga('send', 'pageview', _scrollMatrix[iz][0]+'%' );
}
}
});
</script>
While you are saying that the tracking script is, I must point out that the resulting GA code is actually wrong. Your tracking requests are as follows:
ga("send", "pageview", "10%")
ga("send", "pageview", "20%")
...
You can't just put a bare percentage as an argument to this function and hope it gets written somewhere ( Edit ), my bad one. Of course the third parameter works like a virtual pagename, so the bit is fine if you want the percentage to be like the pagename).
Since your script loops on each scroll event, it actually sends dozens of ga calls, and the percentages calculated are not relative to the user's actual scroll position (it just sends all values from 10-100% for each scroll event). Plus the loop on every scroll event makes it terribly expensive in terms of browser resources. And of course you have views per second quota and views per session, and your script will hit those quotas quickly.
I would frankly recommend dropping your script and using one of the existing tested solutions. The jQuery scrollDepth plugin is pretty nice and you should be able to adapt it to your needs (easier than rewriting your own).
source to share