网站行为统计的基本原理

网站行为统计

最近做了一个营销类的需求，在sdk加入统计的代码，统计用户在网站上的行为（PV，UV，IP等），虽然技术上并没有用到什么可圈可点的技术，但是对于分析实现方面还是有些点值得记录一下的。

实现原理

对比几家卖的好或者卖的不好的流量分析类的产品，百度统计，谷歌统计等，实现方式都是千篇一律的：

前端客户端负责采集数据，打包整理好待发送的数据
在合适的时机将数据发送给服务器
服务器将接受到的数据清洗，整理
在后台系统中已报表图形的方式呈现出来

实现方式

实现方式主要在于如何最方便的把数据送到服务器这一阶段。目前公认成熟的方案就是通过请求服务器上的一张1x1大小的gif图片的方式请数据发送出去，这就是标题中提到的值得注意或者了解的一些点，例如百度统计gif请求的抓包：

可以看出就是将数据组装好以后，已请求参数的形式请求服务器上的hm.gif图片。

为什么要请求gif图片

因为统计的需求就是单方面的将数据发送出去，不需要任何数据的回复，而且统计的sdk绝大部分都是放在第三方的客户的域下的，这就不得不需要解决跨域的问题，然而http对于image类型的文件是没有任何跨域问题的，所以请求一张image图片的方式简直完美适用于这种场景。至于为什么用gif类型的，当然是因为几种类型的图片文件，（png，jpg，gif等）gif最小了。

至于如何区分是不是独立的访客，第一次请求gif文件的时候，会在客户端写入一份cookie，以后每次请求都会携带这个cookie的值，服务器在清洗数据的时候就可以区分具体访客了。

现在再来分析下百度统计的实现方式，会在页面进入和页面离开的时候分别去请求一下hm.gif这个文件，并携带和服务器端约定好的参数。

实现代码

实现代码也很简单，就是生成一个图片，然后将请求的参数拼好指定给src属性就可以了。

var loadImage = function(attrs, fn){
    fn = fn || function(){};
    var img = new Image();
    img.onerror = function(){ console.log('faild to load qa.gif'); };
    img.onload = function(){ fn(); };
    img.src = attrs;
    img.width = 1;
    img.height = 1;
    return img;
}

可能的坑

onbeforeunload事件里不能确保异步请求到达

在web端实现页面进入和离开的分别请求一次gif的时候，很自然的用了onload和onbeforeunload事件，由于之前实现需求定的技术方案比较依赖于离开时请求gif的成功发送（即onbeforeunload事件中异步请求的成功发送，虽然在chrome中用抓包的方式测试大多数请求都是能到达服务器的），但是调研过一些资料，是否能发送到服务器和浏览器，当时网络情况都会有关系，还是不能确保数据必达。

注：原理上在onbeforeunload中采用同步请求是可以确保请求必达的，但是千万别用（除非真的真的需要），javaScript同步请求绝对很坑。

移动端没有onbeforeunload事件

如果网页涉及到mobile web页面的统计，onbeforeunload事件在移动端是无效的，推荐使用pageshow和pagehide事件。

网站行为统计的基本原理

网站行为统计

相关概念（PV，UV，IP）

PV（访问量）

UV（独立访客）

IP（独立IP）