Mixpanel with EmberJS

Question

Note: I began writing this question, and in writing it up ended up solving the problem. I'll leave it here and hopefully it will help someone else.

I've been pounding my head against the wall with this for a while now and keep getting inconsistent results.

Attempt 1 (from here)

App.ApplicationController = Ember.Controller.extend({ 
    routeChanged: function (){
        mixpanel.track("pageview", {"url": window.location.href });
    }.observes('currentPath')
});

I had to deviate from the example since mixpanel.track_pageview() is deprecated. This resulted in incorrect location logging since I can't find a way to get what the new hash path will be once the transition rewrites the URL, and the URL hasn't been updated at this point.

Attempt 2

$(window).on('hashchange', function(){
    mixpanel.track("pageview", {"url": window.location.href });
});

This works when the URL hash changes, but now I don't get any tracking when the site is first loaded.

Answer 1

Track routing changes for a service like Mixpanel or Google Analytics with EmberJS reopen the router and overwrite the didTransition method call the mixpanel/analytics api inside the next Ember run loop.

Ember.Router.reopen({
  didTransition: function(paths){
    this._super(paths);
    Ember.run.next(function(){
      path = window.location.href;
      mixpanel.track("pageview", {"url": path });
    });
  }
});

Here is a jsbin

Answer 2

Final Solution

$(window).on('hashchange', function(){
    mixpanel.track("pageview", {"url": window.location.href });
});

Ember.Application.initializer({
    initialize: function(container, application) {
        mixpanel.track("pageview", {"url": window.location.href });
    }
});

Now I get initial page loads tracked as well as transitions within the application.