Trouble implementing ember-cli-mixpanel

Question

I'm a backend dev trying to wrap my head around the brave new world of javascript MVC frontends. I'm building a simple Ember-cli application (v1.12 for the moment) and I'm trying to integrate mixpanel via the ember-cli-mixpanel addon (v0.0.3).

I've installed it via ember install ember-cli-mixpanel, so I've got it in my node_modules directory and correctly referenced in my packages.json.

The docs are a little sparse for a newb, but I read this:

There is one manual step, which includes our wrapper in your Router. Just extend your Router with tracking_mixin.js.

to mean that I need to have this line in my app's router.js:

import TrackingMixin from './mixin/tracking_mixin';

However, when the app goes to load, this is thrown in my console:

Uncaught TypeError: this.trackRouteChange is not a function

trackRouteChange is a stock pageview event tracker being called from the mixin, so I think that means that it's loaded properly... but I'm not sure about that.

I do have my environment.js properly set up with the mixpanel config stuff in there:

mixpanel: {

enabled: true,

LOG_EVENT_TRACKING: true,

token: 'supersecrettokenhere',

disable_auto_tracking: false

},

Any insight would be greatly appreciated. I'm sure it's something simple but after banging on this for a while now, I think I'm just hitting a block.

Answer 1

You have imported the mixin but need to pass it in to the router in order for the mixin's functions and properties to be included in the router object. You can pass in the mixin as shown here:

import TrackingMixin from './mixin/tracking_mixin';

var Router = Ember.Router.extend(TrackingMixin, {
  // TrackingMixin's functions and properties will now be mixed in to Router.
});