Piwik, how to track user scroll

How to track user scroll intercations on a webpage using Piwik

Abstract

Tracking how many users who go deep using scrolling in your web page is an important element for a good user tracking plan

If you would track the scrolling of a web page which is viewed by users, you are able to identify weaknesses in the user experience and/or in the user interface, you are also able to define some actions to get better experience and better results for your web marketing activities

Heatmaps?

Yes, you can use some "heatmap" tool to get similar analytic data but it would be better to have specific numerical data about scrolling directly in your Piwik (or GA) visit dataset.

You generally use heatmaps to identify more granular insights about page blocks and interaction. Scroll events are simple and "linear", you will be happy to get them into Piwik or GA.

Tracking with simple Javascript

Tracking with simple javascript code, using Piwik "Event Tracking" API is simple but requires tens lines of code to get working, in pseudocode this is what you need:

• Tracking window scroll events using jQuery or another helper library
• Check if the scroll percentage is in the range you need
• Get the Piwik Async tracker and call the PiwikTracker.trackEvent(cat, action, name, value) method to send the event to Piwik backend

It translates to this kind of code:

/*
    This code gets the asumption that you want to track
    25%, 50% and 75% scroll goal.
    This code is an adaptation of the Event Analytics
    scroll detection function.
*/

var tracker = Piwik.getAsyncTracker()
tracker.trackEvent(cat, action, name, value)

var scrollTop = $(document).height() - $(window).height();
var scrollOffset = 25;
var scrollTracking = {"25":false, "50":false, "75":false};

$( window ).scroll(function() {
  if( $(window).scrollTop() > scrollOffset ){
      if( $(window).scrollTop() > 3*(scrollTop/4) && scrollTracking['75'] == false ) {
          // Scrolled 75%
          scrollTracking['75'] = true;
          tracker.trackEvent("Window", "scroll", "scroll75", 75);
      } else if( $(window).scrollTop() > 2*(scrollTop/4) && scrollTracking['50'] == false ){
          // Scrolled 50%
          scrollTracking['50'] = true;
          tracker.trackEvent("Window", "scroll", "scroll50", 50);
      } else if( $(window).scrollTop() > (scrollTop/4) && scrollTracking['25'] == false ){
          // Scrolled 25%
          scrollTracking['25'] = true;
          tracker.trackEvent("Window", "scroll", "scroll25", 25);
      }
  }
});

Tracking using EventAnalytics

If you want a faster and easier way to start tracking your users scroll percentage, you can install EventAnalytics that supports automatic scroll tracking :).

Follow instructions on the official Event Analytics documentation - How to install.