写点什么

数据采集之 js 自定义采集

发布于: 2021 年 05 月 12 日
数据采集之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 文件的原因。

发布于: 2021 年 05 月 12 日阅读数: 18
用户头像

还未添加个人签名 2021.03.07 加入

还未添加个人简介

评论

发布
暂无评论
数据采集之js自定义采集