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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 快速学习网站流量日志埋点收集—原理实现雏形—如何解决 js 和 html 页面耦合问题

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

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


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


内容简介

一、原理分析及示例

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

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


一、原理分析及示例

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

image.png

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

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

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

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

如图:

image.png

在 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,后面会进行累加就可知道点击几次。

所以在此页面上,埋点代码是谁呢?

image.png

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


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

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

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

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

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

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

image.png

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

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

所以解决方法为:

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

image.png

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

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

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
3月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3月前
|
移动开发 人工智能 前端开发
介绍一些免费 的 html 5模版网站 和配色 网站
介绍一些免费 的 html 5模版网站 和配色 网站
579 3
|
3月前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
3月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
4月前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
3月前
|
监控 网络协议 CDN
阿里云国际监控查询流量、用量查询流量与日志统计流量有差异?
阿里云国际监控查询流量、用量查询流量与日志统计流量有差异?
|
5月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
227 2
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
4月前
给头像加个口罩网站html源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
40 0
|
5月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
2月前
|
XML 安全 Java
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
本文介绍了Java日志框架的基本概念和使用方法,重点讨论了SLF4J、Log4j、Logback和Log4j2之间的关系及其性能对比。SLF4J作为一个日志抽象层,允许开发者使用统一的日志接口,而Log4j、Logback和Log4j2则是具体的日志实现框架。Log4j2在性能上优于Logback,推荐在新项目中使用。文章还详细说明了如何在Spring Boot项目中配置Log4j2和Logback,以及如何使用Lombok简化日志记录。最后,提供了一些日志配置的最佳实践,包括滚动日志、统一日志格式和提高日志性能的方法。
513 30
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板