A Meteor package for MixPanel

MixPanel is great. Its ‘actions over pageviews’ philosophy is particularly well suited to Meteor apps where a single page can easily be the entire app.

I’ve recently integrated MixPanel on two projects: Bitwala – a site for paying bills with bitcoin and Flight Noodle – a multistop trip planner.

With these two integrations, I figured I needed:

  • MixPanel on the client (tracking clicks etc.)
  • … and on the server (e.g. for callbacks of successful payments)
  • The project token stored in the settings.json
  • Easy user tracking

We came up with a package that fulfils the above needs: Meteor Mixpanel

MixPanel Tips

This code is not included in the package, but you might find it useful.

Tracking pageviews

Even though MixPanel brands itself on being better than pageviews, it still might be useful to track them.

Router.configure({
  onRun: function() {
    var name = this.route.getName();
    return mixpanel.track("Page View", {
      url: window.location.pathname
    });
  }
});

Easy event tracking in the markup

You can create an event that will track simple events based on an element’s property.

Template.masterLayout.events({
  'click [data-event]': function(e, t) {
    var eventName;
    eventName = $(e.currentTarget).attr('data-event');
    return mixpanel.track(eventName);
  }
});