添加Google Analytics跟踪 编辑页面

英文原文：http://emberjs.com/guides/cookbook/helpers_and_components/adding_google_analytics_tracking

问题

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

解决方案

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html lang="en">
<head>
  <title>My Ember Site</title>
  <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-Y']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

  </script>
</head>
<body>

</body>
</html>

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

1
2
3
4
5
6
7
8

App.Router.reopen({
  notifyGoogleAnalytics: function() {
    return ga('send', 'pageview', {
        'page': this.get('url'),
        'title': this.get('url')
      });
  }.on('didTransition')
});

讨论

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

示例

JS Bin