网页用户行为的埋点设计

用户在访问网页时，每打开一次网页至关因而浏览器向网站后端的服务器发送一次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）被请求后会被执行，这个脚本通常要作以下几件事：

 

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

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

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

 

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

 

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

 

后端脚本执行阶段

 

后端脚本通常要完成如下几件事情：

 

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

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

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

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

五、在响应头中经过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/