统计请求数据

用好前端数据统计

发扬学以致用的精神，本周刁爽分享给大家的是，前端技术在数据统计场景下的应用。...

如今，网站数据统计作为用户信息采集、网站质量提升、市场动向把握的基础，越来越被企业所重视，它也是大数据时代的基石。目前主流的数据收集方式是利用前端技术实现，随着前端技术日新月异的发展，统计方式、方法也在不断的发展。今天我们来说说如何用好前端数据统计。

首先，要有明确的数据统计目标，前端数据统计更贴近于用户的特性，使它在追踪用户行为，把握用户兴趣、爱好方面有较强的优势。

另外作为网站呈现给用户的内容是否有吸引力，效果如何也是前端数据统计的重要目标。那么我认为主要有两点：

1. 用户行为统计

2. 网站性能统计

明确目标后我们开始具体实现。

第一步，设计数据采集的信息点。针对用户，用户所在的地域，访问时间、停留时长和用户的访问路径，针对网站性能，浏览器环境、页面打开时长和报错信息等，在这个信息点整理的过程中需要契合统计的需求。将采集的信息整理出来后定义键值对，书写文档，便于维护。

信息点分为三大类：

A . 用户信息，包括用户ID，地域，时间，时长，动作（点击、访问、拖动）；

B . 网页信息，包括Url，域名，referrer ，页面尺寸；

C . 环境信息，包括浏览器类型，设备信息等。

第二步，加入统计点。一般是将信息点以网络请求的形式记录到web日志中。现在很多网站都采用CDN网络加速网站访问，提升性能，这样，日志文件就要从CDN服务商处获取，利用CDN的特点，可以在用户分布，网站加速效果方面提供更好的支持。统计点一般用js脚本实现，嵌入在页面中，采集时发起网络请求。对于统计模块需要做到功能独立，引用方便。网站自身定义统计模块的好处是信息有效性高，有针对性，也更安全，但是这样需要对网站前端做相应的改造和开发，这样统计模块的灵活性很重要，Google，百度的引入式统计加载方式仍然是统计模块引入的主流方式。这一点在实现上最优的解决方案应该是动态页面在服务层加入公共引用，静态页面加入到公共js文件中。

第三步，统计请求。后台服务多种多样，这里以nginx服务为例，在统计请求接收上，采用两种模式。

1. Get请求，利用nginx服务器设置返回一个1X1的gif图片，从而在日志上记录统计数据，这种请求的优势在于不受域名影响，可以在各个平台引用，当然前端在做请求时也要创建图片引用。同时还要考虑统计请求的时效性，因为在页面跳转时，统计点有可能丢失，这就需要做延迟或阻塞进程的操作，保证统计准确。

2. navigator.sendBeacon方法发起请求，这是一个实验中的方法，可以用来从用户代理服务器异步的发送小的HTTP数据，它能够保证即使网页被关闭，依然可以将统计调用正常发送出去，保证了统计数据的准确性。缺点是有的浏览器还不能支持这个方法，但它的应用是必然趋势；另外它必须是Post请求，在没有服务响应时报405错误，而对于一般统计来说再安装服务，配置服务响应，是完全没必要的，nginx在这方面也可以做出一个处理，那就是：

让服务器忽略405错误，这样在前端就不会报错了，但同样风险也并存，所以应该保证统计服务器的纯粹性。

原始日志要尽量多的保留信息，分析和处理可以在数据获取后再整合，利用分析工具处理。前端数据统计最重要的一点就是保证统计信息的内容和准确性。