开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第一阶段）：网站流量日志埋点收集—前端收集数据脚本】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/693/detail/12176
网站流量日志埋点收集—前端收集数据脚本
内容简介
一、前端数据收集脚本
二、小结
我们知道，当 js 代码被埋点代码引入页面后就需要开始收集数据，之后还需要把数据拼接成图片的形式再往后指定端服务器发送。
一、前端数据收集脚本
首先我们可以看出它整个一段代码是我们上节课所学的 js 匿名函数自调用，发现当它被引入页面后，它也会自己调用自己并且只调用一次，保证这一段代码一定能够执行并且指执行一次。
代码为：
(function () {
var params = { };
//Document对象数据
if (doqcument) {
params. domain = document. domain | | ’ ‘;
params. url = document. URL | | ’ ‘;
params. title = document. title | | ’ ‘; 。
params. referrer = document. referrer | | ’ ‘;
}
//Window对象数据
if (window && window. screen) {
params. sh = window. screen. height | | 0;
params.sw = window. screen. width | | 0;
params. cd = window. screen. colorDepth | | 0;
}
//navigator对象数据
if (navigator) {
params. lang = navigator. Language | | ‘ ‘;
}
//解析_ maq配置.
if( mag) {
for(var i in mag) {
switch( maq[i] [0]) {
case’_setAccount' :中
params. account =_ maq[i][1];
break;
default:
break;
}
//拼接参数串
var. args =’ ’;
for(var i in params) {
){
if(args !=’ ‘) {
args += '&';
}
args += i + '=' + encodeURIComponent (params[i] );
}
//通过Image对象请求后端脚本
var img = new Image(1， 1);
img. src ='http://xxx.xxxx.xxxxx/log.gif?+args;
})()；
代码分析：
首先当它调用自己执行时创建了一个对象叫做 params，然后去解析一些相关属性，我们知道在我们页面中有常见的内置对象如 document，window 和 navigator 等
首先是 document：如果 document 存在，就需要把 document 的 domain 属性复制给对象 params 的 domain，这其中有一个语法：| | ‘ ‘，叫做 and 或者与，也就是说如果属性 document. domain 存在，就把整个属性复制给对象，如果不存在就复制给空，相当于这里做了一个判断的逻辑。在这里我们首先通过内置的 document 文档对象收集到页面的 domain 属性，url 属性，title 属性和 referrer 属性，把这四个属性作为我们对象的属性保存在 params对象中。
其次是 window：window 也是页面内置对象，通过它我们可以获取浏览器的高，宽和颜色的深度，也做了判断，如果没有就默认为0。
最后是 navigator：用来获取浏览器的版本语言。
通过以上我们发现我们 js 通过浏览器页面内置的三个对象收集到八个属性信息，分别为 domain，url，title，referrer，浏览器的高，宽和颜色的深度，浏览器的版本语言。
接下来分析解析的数组：
我们首先回到之前的页面埋点代码，params. lang = navigator. Language | | ‘ ‘;
}
上面这一段是一段可选择的逻辑，
如图在埋点代码的上方出现了一段数组，这个数组是一段二维或者多维的数组，数组是一个可选项，因为有它没它没有任何的意义，它重点是给我们后面匿名函数的代码。数组的本质是保证一些全局的配置，如果有业务需要就使用它，但是如果使用了在进行数据收集时需要解析出来，做一个匹配，重点它是一个多维数组。
接下来举个例子了解多维数组(数组下标从0开始)：
先创建数组 Val a=[allen,18,Beijing]
要想获取18，就需要 a[1]=18
但是这个数组如果是多维数组，这时候就需要注意
比如：
val b=[[name,allen],[age,18],
[city,Beijing,shanghai,Hangzhou]
这时候获取1：b[1],1代表它里面的第二个元素，但是它里面的每个元素还是数组，所以获取它还应该 b[1][1]=18。
最后一步是我们去便利这个对象数组然后把它的每个属性拼接成我们的 url 格式。在我们的页面中，url参数不是随便写的，是k1=v1然后&拼接。
var. args =’ ’;
for(var i in params) {
){
if(args !=’ ‘) {
args += '&';
}
args += i + '=' + encodeURIComponent (params[i] );
}
这里通过创建 arges 的字符串，然后把里面的每个属性拿出来拼接上&，然后进行一个编码，这样就把我们收集的数据拼接成了一个参数的字符串。
接下来就是
var img = new Image(1， 1);
img. src ='http://xxx.xxxx.xxxxx/log.gif?+args;
})()；
在页面上 new 一个 image 标签（1*1），它的src属性指向了我们后端的服务器http：//xxx.xxxx.xxxxx资源叫log.gif?，args 就是刚刚拼接的字符串。
以上就完成了我们前端收集数据的一个逻辑。
二、小结
我们主要是通过内置的对象去解析页面相关的属性信息，并且把这些参数拼接成 url 格式发送至后台。
前端收集数据 js
依然是一个匿名函数自调用的格式保证被引入到页面上之后自己可以调用自己执行且执行一次
1.通过页面内置的对象获取一些属性信息
2.通过解析全局数据获取一些信息
3.把收集的属性信息按照 url 格式进行拼接并且进行 url 编码
4.页面创建一个图片 标签把标签的 src 属性指向后端收集数据的服务器
5.把收集数据拼接的参数放置请求图片的 url 后面传递给后端
