网站流量日志埋点收集—前端收集数据脚本|学习笔记

简介: 快速学习网站流量日志埋点收集—前端收集数据脚本

开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战(第一阶段)网站流量日志埋点收集—前端收集数据脚本】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址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  | | ‘ ‘;

}

上面这一段是一段可选择的逻辑,

image.png

如图在埋点代码的上方出现了一段数组,这个数组是一段二维或者多维的数组,数组是一个可选项,因为有它没它没有任何的意义,它重点是给我们后面匿名函数的代码。数组的本质是保证一些全局的配置,如果有业务需要就使用它,但是如果使用了在进行数据收集时需要解析出来,做一个匹配,重点它是一个多维数组。

接下来举个例子了解多维数组(数组下标从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 后面传递给后端

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
4天前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
16 2
前端上传文件前校验文件数据
|
25天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
114 0
|
23天前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
22 1
|
26天前
|
SQL 机器学习/深度学习 前端开发
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
|
30天前
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
28 1
|
1月前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
20 2
|
1月前
|
安全 Linux 调度
【后台开发】TinyWebser学习笔记(4)定时器、日志系统(单例模式)、封装互斥锁信号量
【后台开发】TinyWebser学习笔记(4)定时器、日志系统(单例模式)、封装互斥锁信号量
17 1
|
1月前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
60 0
|
1月前
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
|
1月前
|
移动开发 前端开发 JavaScript
前端vue3——html2canvas给网站截图生成宣传海报
前端vue3——html2canvas给网站截图生成宣传海报
35 0