Ember.js and Google Analytics

Question

I wanted to get a definitive answer on here for later reference now that we have a stable Ember RC. A combination of the top 2 search results for emberjs google analytics reveals that this is a good way to do track route changes:

App.ApplicationController = Ember.Controller.extend
  routeChanged: ( ->
    return unless window._gaq
    Em.run.next ->
      page = if window.location.hash.length > 0 then window.location.hash.substring(1) else window.location.pathname
      _gaq.push(['_trackPage', page])
  ).observes('currentPath')

but then I also see results for using Event Tracking for single page web applications.

I haven't tested the code above yet, it takes a few hours to propagate changes to the GA dashboard. Update: This doesn't show up under the Content category on my Google Analytics dashboard. Neither under "Pages" or "Events".

If anyone has advice or if there's something I'm missing somewhere let me know. I can also PR a guide for the website based on the answers here.

Answer 1

Alex DiLiberto gave a really nice talk about a robust & scalable way of adding Google Analytics to an ember app in his EmberConf 2014 talk here. - Slides - GitHub

App.ApplicationRoute = Ember.Route.extend({
   actions: {
     didTransition: function() {
       Ember.run.once(this, function() {
         ga('send', 'pageview', this.router.get('url'));
       });
     }
   }
});

The talk was aiming to be independent of which analytics library was used.

There is also now an official Ember Cookbook on implementing Google Analytics here.

Answer 2

I would use _trackPageview for things that have routable URLs and _trackEvent for things that don't.

In the Event Tracking link when they refer to "Embedded AJAX page elements". They're not meaning SPA's, but rather those cases when the URL stays the same, but some event that you wish to track happens within the page (in the case via AJAX).

There may be other cases where it makes sense to use _trackEvent, but for route transitions I'd use _trackPageview.

Answer 3

Using routeChanged() is not a good way to track dynamic segments such as /category/food /category/something since it's going to be fired only once. I wrote an article about this here: http://www.randomshouting.com/2013/05/04/Ember-and-Google-Analytics.html. I also consulted with the guys behind Ember and confirmed that this is indeed the proper way to track url changes for Google Analytics.