Skip to content
aethemba edited this page Sep 24, 2014 · 2 revisions

Mixpanel

What is Mixpanel?

Mixpanel is a tracking tool to measure so-called 'events' in your application. Instead of measuring pageviews, Mixpanel tracks events that we specify. This could be the click of a button, the loading of a model, or the share of a Tweet.

The basic unit of measurement in Mixpanel is the "event". We specify events throughout are applications, its basically anything we want to measure. An event can have several properties attached. For example, user details, project name, or donation amount.

Implementation

Mixpanel offers its own JS library that we can use. This library is stored locally on our servers and is imported in the base.html file of Bluebottle. In the settings file we specify the Mixpanel API key.

To use Mixpanel we define a Tracker controller which is a wrapper around the Mixpanel library. The controller is intended to function as a single generic tracker. We use an Ember initializer to register the Tracker controller because it is not connected to a specific route. Instead, the tracker controller is added to each route and controller in the application. This makes the tracker available throughout the application.

See bb_mixpanel.js in common/static for the tracker and the initializer.

In addition, there is a TrackRouteActivate Mixin. This Mixin tracks routes on the "activate" hook. This is useful to monitor visits to specific routes. You can track a route by adding the mixin and settings a "trackEventName" property on the route.

Adding tracking calls

There are two ways to track events. First, you can call the tracker controller and track an event. In this case you get the tracker controller (on every controller and route) and call the trackEvent function. For example:

if this.get('tracker) { this.get('tracker').trackEvent("Event name", {property1: value1, property2: value2, etc}) }

The alternative is to specify an event name on the route in the trackEventName property. This functions more like a page view and gets called when the route gets activated. In this case, you cannot any addition properties to the event. For example:

App.YourRoute = Em.Route.extend(App.TrackRouteActivateMixin, { trackEventName: "My route event", });

In the above example, note the use of the Mixin.

Overview events

Below is an overview of the events we currently track in the 1%Club website. We specify the event name with optional properties. We also denote the code repository that the tracking code lives in.

  • Login (properties: "regular") - Bluebottle
  • Login (properties: "facebook") - 1%Club
  • Signup (properties: "regular") - Bluebottle
  • Signup (properties: "facebook") - 1%Club
  • New task (properties: "title") - Bluebottle
  • Successful task edit (properties: "title") - Bluebottle
  • Apply for task ("title") - Bluebottle
  • Start campaign (this is an event on the page load) - Bluebottle
  • Share on Facebook (properties: "project title") - Bluebottle
  • Share on Twitter (properties: "project title") - Bluebottle
  • Click Favourite Project (properties: "project title") - 1%Club
  • Support Campaign (properties: "project title") - 1%Club
  • Successful donation (properties: "amount") - 1%Club
  • New fundraiser (properties: "project title", "title") - 1%Club
  • Edit fundraiser (properties: "project title", "title") - 1%Club
  • Project detail (properties: "title") - Bluebottle
  • Task detail (properties: "title") - Bluebottle

Route events

  • Donation list - 1%Club
  • Payment details - 1%Club
  • Payment signup - 1%Club
  • Payment error - 1%Club
  • Successful Recurring Donation - 1%Club
  • My fundraisers - 1%Club
  • Homepage visit - 1%Club
  • Create campaign - goal - Bluebottle
  • Create campaign - pitch - Bluebottle
  • Create campaign - Budget - Bluebottle
  • Create campaign - Story - Bluebottle
  • Create campaign - Organisation - Bluebottle
  • Create campaign - Bank - Bluebottle
  • Create campaign - Review - Bluebottle
  • Create campaign - Submit - Bluebottle
  • View profile - Bluebottle
  • View settings - - Bluebottle
  • Browse projects - Bluebottle
  • My Campaigns - Bluebottle
  • Browse tasks - Bluebottle