Git提交规范

网站上线以后，不论是为了优化网站结构和体验还是基于运营对用户行为进行分析，都需要对网站流量数据做相关的统计。目前成熟且大规模使用的方案有，百度统计以及Google Analytics，基于政策考虑谷歌目前的整套方案并不推荐在国内站点使用，而百度如果不付费则存在各种限制，因此自己写一套方案是推荐的。

在对网站页面统计做了技术调研后，发现统计主要有两种方式，侵入式与非侵入式，前者将统计写成一个功能模块，会提高现有代码模块间耦合，而后者通过解析文件内容来进行打点，不需要修改更改之前的代码，但是在实现具体事件监听时实现更加困难。

前端打点优缺点

• 优点

1. 各种交互行为数据均能采集，全面
2. 更为准确，页面用户打开后没加载执行完，不算PV、UV但是后台会计入
3. 规避部分爬虫影响

• 缺点

1. 数据易丢失
2. 日志数据更为完整
3. 请求还未发送完成时关掉页面，可能导致请求被 cancel 掉，这对一些用户黏性不是很强，跳出率很高的网站而言是另一个差异来源

基本数据统计

对PV、UV、IP等数据进行统计，实际上是根据路由变化进行的统计，为了之后更方便的统计跳出率的数据可能需要做如下数据统计：

// 页面载入,放入页面顶部
(function(){
  ajax('yourinfo')
})()

// 路由更改时
window.addEventListener('popstate', function (event) {
  ajax('yourinfo')
});

// 离开页面，需设置同步，否则请求会被cancel
window.addEventListener('unload', function (event) {
  ajax('yourinfo')
  // var now = +new Date;
  // while(new Date - now >= 10) {} // 阻塞 10ms

  // (new Image).src = 'http://example.com/s.gif';
});

基本统计字段：

名称	途径	备注
访问时间	web server	后台/数据库
IP	web server	后台/nginx
域名	javascript	document.location.hostname
URL	javascript	document.URL
分辨率	javascript	window.screen.height & width
Referrer	javascript	document.referrer
浏览客户端	web server	js或后台
客户端语言	javascript	navigator.language
路由链	javascript
访问标记	javascript

特殊事件监听

对特殊事件监听方面，对于单页面应用而言，去解析文件然后去监听可能并不容易实现，但是侵入式的实现很方便。

1. 侵入式
   由插件定义一个数据收集对象，并暴露一个数据传输的接口，简单而言就是：

function yourNeedListenEvent () {
  analytics.ajax('youinfo')
}

1. 非侵入式
   需要具体到路由（参考可视化埋点），根据具体路由对元素或事件进行监听,需要对统计代码本身进行修改，如果不能实现可视化自动生成埋点代码，代码量较大：

// 路由更改时
window.addEventListener('popstate', function () {
  needListenEle.addEventListener('event', yourFunction(){})
  // 当离开路由时，需要解绑，防止内存泄露
  needListenEle.removeEventListener('event', yourFunction(){})
});

后台数据收集

现在ELK + Redis的开源实时日志分析平台已经很成熟了，由ElasticSearch提供收集接口，Logstash收集数据，Kibana做基本的前端展示即可。数据库做定时的数据处理，生成在线人数等等数据，并配合echarts等图表插件做特定的展示。

后端应对日志进行切分，特殊行为日志应与普通日志分成两张表记录，字段差别很大。

其他

1. 数据发送
   <img src='/log_xxx.gif?k=v'> 或者 发送 ajax 请求的方式来发送日志请求。

2. 页面跳转时，数据请求cancel
   beacon-api

3. 数据处理准确性
   数据处理准确性

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jjworking@qq.com