AngularJS UI Router的pv统计

作者 FarLee 2016年8月10日 17:31:54   ‖浏览(5,662)

由于 AngularJS 其实是一个单页面应用, 因此通过AngularJS 做的h5 或wap应用, 是无法统计到AngularJS 的路由页面切换的.

好在google analytic, 百度统计, cnzz 等都提供了类似虚拟pv的js api接口. 在路由切换时调用这些page view事件接口就可以了.

以GA为例,

第一步在入口页(index.html) 的head里加入通用的非阻塞统计代码:

<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’);
</script>

第二步在Angular应用的run函数中初始化账户信息, 并在路由变化的$stateChangeSuccess 事件中发送page view接口.
function run($rootScope, $location, $window) {
     $window.ga(‘create’, ‘UA-XXXXXXXX-X’, ‘auto’);
     $rootScope.$on(‘$stateChangeSuccess’, function (event) {
          $window.ga(‘send’, ‘pageview’, $location.path());
     });
}
 cnzz(友盟+) 的虚拟pv api也类似:
<script>
//声明_czc对象:
var _czc = _czc || [];
//绑定siteid,请用您的siteid替换下方”XXXXXXXX”部分, 该页面只有一个账号可以省略这行;
_czc.push([“_setAccount”, “XXXXXXXX”]);
</script>
 run函数中:
_czc.push([ “_trackPageview”,content_url,referer_url]);
content_url 当前页面
referer_url 来源地址
 百度统计也有虚拟PV跟踪接口, 具体请看:
http://tongji.baidu.cn/open/api/more?p=guide_trackPageview

来说兩句