Ember and Google Analytics

I haven’t been able to find simple and complete instructions for integrating Google Analytics and EmberJS. In this article I will show you how to do that by hooking into the Router class. I assume that you are using the hashchange event for ember urls (your urls look like /#/my/url) which is the default setting.

All the articles I’ve read on this topic have ignored the fact that you don’t get a complete view of how users are navigating your site. They rely on the application controller’s currentPath attribute which doesn’t change when the model of an ObjectController is changed.

Let’s say that you have a blog application written in EmberJS and you want to track every article page view. We are also going to assume that your article route looks like “/article/:slug”. That means that you might have article urls like:

  • http://yoursite.com/#/article/getting-started-with-emberjs
  • http://yoursite.com/#/article/handlebars-templates-101

If you watch the application controller’s currentPath attribute for changes then you will notice that it will change to “article” once you visit the first link. If you then try to access the next article (via a sidebar link for example) the currentPath attribute will still be “article” even though we just navigated to a completely different article. As you can see, this is not very useful for Google Analytics as we would only record the first page view.

I’ve solved this by hooking into the didTransition method of the Router class. This method is triggered each time a transition is completed. Using that method we can track each page view just like we would if our blog application was a regular web site.

 1 Navigator.Router.reopen({ 
 2   /**
 3    * Tracks pageviews if google analytics is used
 4    */
 5   didTransition: function(infos) {
 6     this._super(infos);
 7     if (window._gaq === undefined) { return; }
 9     Ember.run.next(function(){
10       _gaq.push(['_trackPageview', window.location.hash.substr(1)]);
11     });
12   }
13 });

Add the above code to your application’s router.js file. You will need to load google analytics too, so insert the following snippet into your application layout:

 1 <script>
 2   var _gaq = _gaq || [];
 3   _gaq.push(['_setAccount', 'UA-XXXX']);
 5   (function() {
 6    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 7    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 8    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 9    })();
10 </script>

Change the account id and you are done. Notice that we are stripping the hash symbol from the window.location.hash attribute since GA ignores everything after the hash in urls.

You can test if this works using the GA realtime dashboard or you can use the Google Analytics Debugger plugin for Chrome.