基于google-analytics的angular网站运营分析方法

序

当前雨点儿网社区的活跃度的评估来源：

1. 注册用户数。

2. aliyun OSS上对静态资源的请求数，PV/UV分析；aliyun ECS的流量统计。

缺陷：

1. 统计粒度太粗，无法对网站的运营进行有效。

2. 分析数据需要等到第二天才能查看，延迟较大。

因此需要考虑增加google analytics等工具来强化网站运营分析。google analytics能够提供的功能：

1、实时访问统计。

2、用户网站行为分析，即每个页面/路由的访问率。

3、区域分析，终端分析等等。

利用以上数据，可以很好的指导网站的开发运营。比如：

1. 新功能上线后，可以分析这个功能所在路由的访问率。由此来验证该功能是否被用户接受。

2. 通过分析访问设备中移动设备所占比例来决定是否投入更多的经历到移动端开发中。

3. 分析用户来源，验证推广渠道是否有效。

4. 分析用户的年龄、性别，验证当前网站内容是否能够吸引目标用户。
   ....

实现方法

类似下面这段代码大家一定在很多网站都有看到，这个就是用来向google服务器提网站浏览数据的脚本。

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

</script>

那么如何为自己的网站添加google的分析服务呢？

添加google analytics服务

1.翻墙&google账号

这个必须有。
有一点需要说明：

我朝局域网不影响google的网站统计功能，即可以正常统计墙内用户的访问记录。
但是，访问google analytics的admin，必须翻墙。

2.使用google analytics

2.1.注册

注册网址

2.2.选择website，填写必要的信息

2.3.完成后你将获得一个TrackID，以及对应的google analytics脚本，拷贝该脚本到你的需要跟踪的页面中即可。

3.测试验证

访问你的网站，查看google实时统计结果
注意：如果不生效，请清空浏览器缓存后再次访问

angular框架如何统计

雨点儿网使用了angularjs框架，是一个单页应用，因此我们需要通过路由来区分不同的页面。这里我们使用angulartics-google-analytics组件来实现这个功能。

angulartics-google-analytics是一个基于angulartics的谷歌分析组件。
angulartics是专供angular应用使用的分析组件，支持多个第三方分析平台（包括百度，参考）

使用angulartics-google-analytics

1.安装

bower install angulartics-google-analytics

2.加入到angular app中

angular.module('myApp', [
  'angulartics', 
  'angulartics.google.analytics'
]);

3.拷贝google analytics脚本到index.html中，并按照如下注释修改

<script>
      ...
      ga('create', 'UA-XXXXXXXX-X', 'auto'); // 如果在本地测试，把'auto'换成'none'
      //ga('send', 'pageview');  // 删除这一行
</script>

4.测试

访问你的网站，查看google实时统计结果
注意：如果不生效，请清空浏览器缓存后再次访问。

以上。
任何建议，欢迎提到我们的项目议题中