Last Updated: February 25, 2016
·
635
· klclee

Emberjs and Mixpanel Route visits

This is useful for tracking 'page views' when using emberjs and mixpanel. I guess the same theory will apply to people using KISS metrics too.

First the mixpanel mixin:

//in ember-cli 'mixins/mixpanel.js
//assuming you have mixpanel already imported into your Brocfile
export default Ember.Mixin.create({
   beforeModel: function(transition) {
      this._super(transition);
      return mixpanel.track("visit" , {pageName: transition.targetName});
  }
});

Then reopen Ember.Route I done it in router.js


import MixpaneMixin from 'app/mixins/mixpanel';
Em.Route.reopen(MixpaneMixin);

Done! If you have a route call login for example in mixpanel you will see visit login

3 Responses
Add your response

Thanks for the post but one thing is that it ended up sending multiple events for nested routes. I ended up using this initializer

export function initialize(container) {
var router = container.lookup('router:main');
router.on('didTransition', function() {
var page = this.get('url');
if (!page) {
var loc = window.location;
page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search;
}

mixpanel.track("visit", {pageName: page});

});
}

export default {
name: 'mixpanel',
initialize: initialize
};

over 1 year ago ·

How do you make code look good on coderwall? :/

over 1 year ago ·

yea is 4 indent.. good point re that problem in mp i wrote a ember-cli addon should fixed that very similar to yours just not as a initalizer.

https://github.com/klclee/ember-cli-mp

over 1 year ago ·