用户在访问网页时，每打开一次网页相当于是浏览器向网站后端的服务器发送一次http请求。借助chrome浏览器，我们能看到每个请求的header，其中包含了Cookie/Referer/User-agent等，还有用户的IP地址。后台的日志收集系统会记录这些请求日志，根据这些日志我们已经能够简单地统计出一个用户在网站的访问路径了。

 

对于个人站点，收集这些信息一般也够用，能够满足站长对流量来源、流量大小的基本分析。但是，对于大型电商、社交、新闻等类别网站，他们往往会需要更详细的用户行为和用户浏览状态，比如用户在页面的停留时间，用户在多个tab之间的切换等等行为记录。

 

后来，Google在其产品谷歌分析（Google Analytics）中创新性的引入了可定制的数据收集脚本，用户通过谷歌分析定义好的可扩展接口，只需编写少量的javascript代码就可以实现自定义事件和自定义指标的跟踪和分析。目前百度统计、搜狗分析等产品均照搬了谷歌分析的模式。

 

后者相比于前者，使用了Ajax和JavaScript的技术，使得收集的数据更全面、更容易。

 

基本流程

当用户从浏览器打开（点击）一个页面时，浏览器首先会发出一个http的请求，服务器端返回HTML内容，其中夹杂着一段js代码。这个代码片段一般会动态创建一个script标签，并将src指向一个单独的js文件，此时这个单独的js文件（图1中绿色节点）会被浏览器请求到并执行，这个js往往就是真正的数据收集脚本。数据收集完成后，js会请求一个后端的数据收集脚本（图1中的backend）。，js会将收集到的数据通过http参数的方式传递给后端脚本，后端脚本解析参数并按固定格式记录到访问日志，同时可能会在http响应中给客户端种植一些用于追踪的cookie。

 

埋设js代码

 

谷歌分析（GA）在页面中的埋点js代码片段是ga.js，它用来记录用户与网站的交互行为，其具体的用法可以在这里找到。目前，谷歌已经推荐开发者用新的版本，analytics.js。

 

首先，要在被分析页面HTML的header部分，加入上面这段代码。' _setAccount'设置了该页面的一个ID，这个ID是注册GA时分配的。' _trackPageview'则向GA的服务器发送一条跟踪记录。

 

接下去的这个函数，它创建了一段script，并将其src指向了ga.js，然后将这个元素加入到页面的dom树上。

 

异步收集数据

 

上面代码中的'_gaq'的对象是数据收集的关键。它是一个FIFO结构的队列，将需要记录的用户交互行为用'_gaq.push'的方法添加进队列。

比如，要记录用户点击某个按钮的行为，可以这样添加。

 

数据收集脚本（ga.js）被请求后会被执行，这个脚本一般要做如下几件事：

 

1、通过浏览器内置javascript对象收集信息，如页面title（通过document.title）、referrer（上一跳url，通过document.referrer）、用户显示器分辨率（通过windows.screen）、cookie信息（通过document.cookie）等等一些信息。

2、解析_gaq收集配置信息。这里面可能会包括用户自定义的事件跟踪、业务数据（如电子商务网站的商品编号等）等。

3、将上面两步收集的数据按预定义格式解析并拼接。

 

4、请求一个后端脚本，将信息放在http request参数中携带给后端脚本。

 

这里唯一的问题是步骤4，javascript请求后端脚本常用的方法是ajax，但是ajax是不能跨域请求的。这里ga.js在被统计网站的域内执行，而后端脚本在另外的域（GA的后端统计脚本是http://www.google-analytics.com/__utm.gif），ajax行不通。一种通用的方法是js脚本创建一个Image对象，将Image对象的src属性指向后端脚本并携带参数，此时即实现了跨域请求后端。这也是后端脚本为什么通常伪装成gif文件的原因。

 

后端脚本执行阶段

 

后端脚本一般要完成以下几件事情：

 

1、解析http请求参数的到信息。

2、从服务器（WebServer）中获取一些客户端无法获取的信息，如访客ip等。

3、将信息按格式写入log。

4、生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif。

5、在响应头中通过Set-cookie设置一些需要的cookie信息。

 

之所以要设置cookie是因为如果要跟踪唯一访客，通常做法是如果在请求时发现客户端没有指定的跟踪cookie，则根据规则生成一个全局唯一的cookie并种植给用户，否则Set-cookie中放置获取到的跟踪cookie以保持同一用户cookie不变。

 

 

 

 

参考

网站统计中的数据收集原理及实现：http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html

GA的开发者文档：https://developers.google.com/analytics/devguides/collection/gajs/