数据采集之 js 自定义采集

1． 原理分析

首先，用户的行为会触发浏览器对被统计页面的一个 http 请求，比如打开某网页。当网页被打开，页面中的埋点 javascript 代码会被执行。

埋点是指：在网页中预先加入小段 javascript 代码，这个代码片段一般会动态创建一个 script 标签，并将 src 属性指向一个单独的 js 文件，此时这个单独的 js 文件（图中绿色节点）会被浏览器请求到并执行，这个 js 往往就是真正的数据收集脚本。

数据收集完成后，js 会请求一个后端的数据收集脚本（图中的 backend），这个脚本一般是一个伪装成图片的动态脚本程序，js 会将收集到的数据通过 http 参数的方式传递给后端脚本，后端脚本解析参数并按固定格式记录到访问日志，同时可能会在 http 响应中给客户端种植一些用于追踪的 cookie。

2． 设计实现

2.1． 确定收集信息

2.2． 确定埋点代码

埋点，是网站分析的一种常用的数据采集方法。核心就是在需要进行数据采集的关键点植入统计代码，进行数据的采集。比如以谷歌分析原型来说，需要在页面中插入一段它提供的 javascript 片段，这个片段往往被称为埋点代码。

<script type="text/javascript">  var _maq = _maq || [];  _maq.push(['_setAccount', 'UA-XXXXX-X']);  (function() {    var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;    ma.src = 'xxxxx/ma.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);  })();</script>

其中_maq 是全局数组，用于放置各种配置，其中每一条配置的格式为：

_maq.push(['Action','param1', 'param2', ...]);

_maq 的机制不是重点，重点是后面匿名函数的代码，这段代码的主要目的就是引入一个外部的 js 文件（ma.js），方式是通过 document.createElement 方法创建一个 script 并根据协议（http 或 https）将 src 指向对应的 ma.js，最后将这个元素插入页面的 dom 树上。

注意 ma.async = true 的意思是异步调用外部 js 文件，即不阻塞浏览器的解析，待外部 js 下载完成后异步执行。这个属性是 HTML5 新引入的。

扩展知识：js 自调用匿名函数

格式： (function(){})();

第一对括号向脚本返回未命名的函数；后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。

自调用匿名函数的好处是，避免重名，自调用匿名函数只会在运行时执行一次，一般用于初始化。

2.3． 前端数据收集脚本

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

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

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

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

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

这里唯一的问题是步骤 4，javascript 请求后端脚本常用的方法是 ajax，但是 ajax 是不能跨域请求的。一种通用的方法是 js 脚本创建一个 Image 对象，将 Image 对象的 src 属性指向后端脚本并携带参数，此时即实现了跨域请求后端。这也是后端脚本为什么通常伪装成 gif 文件的原因。