edgy circle

Mixpanel Scroll Tracker

Mixpanel is a great analytics service which helps you understand what your customers are doing. It goes beyond the bread and butter visitor and page view tracking you probably know from Google Analytics or Piwik. With Mixpanel you basically track events - things your customers do - and lear how they use your software.

The Mixpanel JavaScript library makes it very easy to get started and track various events. Recently we needed an easy way to track scroll events. Our latest project Zeichenfabrik, where you can attend various fine arts courses, and our very own website are single page scroll websites.

In order to know how far visitors scroll and which parts of the page they actually see we needed to track scroll events. We do this the following way:

A website consist of several sections like "Services", "About Us" and "Contact Form". Whenever a visitor reaches such a section we want to know it. To accomplish this we define a marker for every section, a marker consists of a position and value. The position is the pixel distance to the top of the page, the value is simply the identifier of the section. To tie this into Mixpanel we define the event we want to track and for what attribute the value should be set.

With the setup below, following Mixpanel call would happen when a visitor reaches the "About Us" section:

mixpanel.track("Scrolled to", { section: "About Us" });

You can grab the CoffeeScript source code or the minified JavaScript from GitHub.

Zurück zum Blog