Tracking Scrolling Virtual Page Views in GA

Question

Update: Looking into making sure script does not cache events, search has not gone well at all so far.

I am using the script below to track virtual page views in GA, the site has a very long homepage we are tracking this on. The problem I am having is that once the user scrolls down to a lower section, it does not register as a new page view if they scroll back up (making it a maximum of 1 view per page). Any help with this would be greatly appreciated. I am using jQuery and the script below does send/track.

This script is in addition to the Universal Analytics code being implemented just before the tag. The first code below is the normal Analytics code, which is needed to run the debugger properly because that is where the account is define. The second script is the one that I am having the issue with.

Normal UA script (located in the head tags):

<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>

Answer 1

You script creates an array of arrays with threshold values ranging from 10 to 100 as index, as determined by the "repentance" variable (this does not mean what you think it means; you mean "repetitions", unless you are really sorry for writing this script). One of the values for each element if your array of the array is a boolean "false".

This boolean value is evaluated in the loop inside the document.scroll function. If the value is "false" the pageview is executed, and the variable is set to "true". Happens in this bit:

if (($(window).scrollTop() + $(window).height() >=      $(document).height() 
* _scrollMatrix[iz][0] / 100)  && (_scrollMatrix[iz][1]== 'false')) {
            _scrollMatrix[iz][1] = 'true';

That means the next time around the boolean for _scrollMatrix[iz][1] is "true" and the if branch is no longer executed.

If you want to fire the Google Analytics code regardless you can remove the boolean value and the part where it's evaluated. So your script would 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 say that the script is tracking I have to point out that the resulting GA code is actually wrong. Your tracking calls look like this:

ga("send", "pageview", "10%")
ga("send", "pageview", "20%")
...

You cannot simply put in the naked percentage as an argument to that function and hope that it gets recorded somewhere (Edit oops, my bad. Of course the third parameter works as virtual pagename, so that bit is alright if you want the percentage as pagename).

Since your script executes the loop on every scroll event it actually sends dozens of ga calls, and the computed percentages do not relate to the actual scroll position of the user (it simply sends all values from 10-100% for each scroll event). Plus looping on every scroll event makes this horribly expensive in terms of browser ressources. And of course you have a quota of hits per second and hits per sessions, and your script will hit those quotas pretty quickly.

I would frankly recommend that you abandon your script and use one of the existing tested solutions. The jQuery scrollDepth plugin is quite nice and you should be able to adapt it to your needs (more easily than rewriting your own).