网站流量日志埋点收集— 原理实现雏形—如何解决 js 和 html 页面耦合问题|学习笔记

开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第一阶段）：网站流量日志埋点收集—原理实现雏形—如何解决 js 和 html 页面耦合问题】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/693/detail/12170

网站流量日志埋点收集—原理实现雏形—如何解决 js 和 html 页面耦合问题

内容简介

一、原理分析及示例

二、理论分析存在的问题和解决方法

本节内容我们学习埋点采集我们用户的行为数据，通过讲义中的原理图和我们所画的雏形图去更好的理解其中的知识点和特性。

一、原理分析及示例

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

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

数据收集完成后，js 会请求一个后端的数据收集脚本(图中的 backend),这个脚本一般是一个伪装成图片的动态脚本程序，js_会将收集到的数据通过 http 参数的方式传递给后端脚本，后端脚本解析参数并按固定格式记录到访问。

示例：针对首页的 A 标签进行相关收集，该如何实现埋点？以及需要考虑哪些具体实际性能的问题。

一个 html 页面是各种标签的相关组成，它的根标签是 html，里面有 body 等。为了更方便我们，这时使用 Hbuilder 来做页面相关分析。

如图：

在 body 中写一个 a 标签，就是链接标签：<a id=“myid”></a>

再写a标签的跳转链接 <a id=“myid”href=”www.baidu.com“target=”_blank”></a> 打开一个新的标签页，接下来定义需求：对页面上的 a 标签被点击多少次进行统计。按照埋点代码来操作，需要在 Hbuilder 中写 script 标签：<script type=”text/javascript“>  ,接下来写伪代码,比如说要想统计 a 标签被统计多少次，我们首先需要选定a 标签给它绑定一个 click 事件: $(a).click({ (一旦用户点击标签，就将触发请求)，伪代码为：$.ajax(‘‘’localhost://collect?num=1’’)

所以一旦用户点击标签<a id=“myid”href=”www.baidu.com“target=”_blank”></a>，这个事件触发，触发后向后台发送请求，会向后台发送1，后面会进行累加就可知道点击几次。

所以在此页面上，埋点代码是谁呢？

这就是我们从理论层面来推导要想进行用户的行为数据收集，大概需要做的事情。

二、理论分析存在的问题和解决方法

理论层面推导起来简单，但我们知道一个项目要想能够上线运行，需要追求很多性能问题，接下来剖析当中两点值得考虑的问题。

我们现在的方式是把我们的 js 写死在页面中，即和 html 耦合在一起。那么如果我们下次不再收集 a 标签事件，我们收集其他标签事件，其他标签的点击数据，那这时候该如何操作？

所以问题1：采集数据的 js 和 html 页面写死在一起，耦合性太强，不利于后续的 js 维护。

针对这个问题，利用 src 属性引用 js 文件

我们需要把这段 js 逻辑踢出，让它成为js的文件（新建一个叫 javascript 的文件，名称为 collect.js 。）

如果需要再次使用可以通过 src 属性引入

同样这段代码还是我们的埋点代码，只不过埋点代码的逻辑未写死在页面上，而是写在 collect.js 文件中，后续需要修改只需要修改文件里的逻辑即可，这样避免页面和js耦合一起。

所以解决方法为：

把收集数据的 js 提取出来，变成一个单独的文件，通过 script 标签的 src 属性引入。但要注意我们的 script 标签功能不止这些，现在我们的 js 是在同一个项目的根目录下，但实际上 js 文件可以位于任何联网的机器上。

所谓的相对引入是我们的 js 文件位于项目的同一台机器上，指定路径就可以引入进来。

绝对引入指的是 js 文件可以位于任何联网的机器上，只要通过网络就可以拉进来，这样就解决了 js 和 html的问题。