Problem

问题

You want to add analytics to your Ember application.

希望可以分析Ember应用的使用情况。

Solution

解决方案

Subscribe to the didTransition event inside your application router.

通过在应用的路由中订阅didTransition事件来实现。

In the following examples we’re using Google Analytics but it could be any other analytics product. Add google analytic’s base code to the html file that renders your ember app.

系列中使用Google Analytics来展示如何实现对应用的分析，当然也可以使用其他的分析产品。将Google Analytics的基础代码添加到渲染Ember应用的HTML文件中。

  1. <html lang="en">
  2. <head>
  3.   <title>My Ember Site</title>
  4.   <script type="text/javascript">
  6.     var _gaq = _gaq || [];
  7.     _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  9.     (function() {
  10.       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  11.       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  12.       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  13.     })();
  15.   </script>
  16. </head>
  17. <body>
  19. </body>
  20. </html>

Then reopen the application router and add this function. It will be called when didTransition is fired by the router.

然后重新打开应用的路由并添加下面的函数。该函数在路由触发didTransition时会被调用。

  1. App.Router.reopen({
  2.   notifyGoogleAnalytics: function() {
  3.     return ga('send', 'pageview', {
  4.         'page': this.get('url'),
  5.         'title': this.get('url')
  6.       });
  7.   }.on('didTransition')
  8. });

Discussion

讨论

The didTransition event is responsible for notifying listeners of any URL changes, in this example we are getting the path after the hash in the url so we can notify Google Analytics about moving between areas of the site.

didTransition事件负责将URL改变的事件通知监听器，在本例中，通过获得URL#之后的路径，来将应用状态改变通知Google Analytics。

Example

示例

JS Bin