网站流量日志埋点收集 --方案一-基本功能数据采集实现|学习笔记

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 快速学习网站流量日志埋点收集--方案一-基本功能数据采集实现

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

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


网站流量日志埋点收集--方案一-基本功能数据采集实现


内容简介

一、基本功能实现

二、相关演示操作

接下来我们学习自定义埋点采集数据的具体实现。首先学习我们的方案一:基本功能的实现,也就是说我们之前所梳理的这一套逻辑,到底能不能落实到我们的现实层面当中。


一、基本功能实现

打开参考资料软件下的网站流量日志自定义采集服务,里面打开参考文档里的采集方案一,这里我们简单模拟了首页进行数据收集,结合我们之前所讲理论打开查看是否有不同之处。

首先打开 index.html 页面,内容不多,但重点是写入了埋点代码(图中灰色部分),埋点代码中主要是匿名函数自调用的逻辑,只要用户打开页面,匿名函数就会自调用并且执行一次。在执行过程中创建 script 标签,把我们收集数据的js拉取到页面上开始执行。

image.png

接下来看 ma.js,这个 js 是真正用于收集数据的 js。只不过没有把它写死在页面上,而是把它提取出变成单独的文件。整体(function() 一个小括号里面定义一个没有名字的函数是匿名函数,第二个小括号表示对前面的函数立即调用自己一次,相当于匿名函数调用,再通过解析内置对象属性拼接成参数发往后端。

第三块是 nginx.conf,就是 nginx 配置文件,当中重点是 server 中 location 模块。这里定义了两个 location,一个是 location/log.gif,和前面图片发送的资源可以对应,里面生成了 cookie,生成了图片,并且把我们的参数内部跳转给 location/i-log,所以另一个是 location/i-log。

在这里我们还定义了自己的格式,叫做 user_log_format,这里我们格式是以||来分隔数据。

以上就是整个方案一的三个文件,当中的重点是一定要确定资源的路径位于哪台机器上。


二、相关演示操作

首先第一个页面首页,它去拉载我们采集数据js可以位于任何一台机器上,下面为了方便放置在 node-3。

image.png

通过敲写 ifconfig 得知 node-3的 IP 是192.168.227.153

image.png

这时候产生问题:我们知道在我们使用 tomcat 时,我们的静态资源,项目等都是放在 web app 路径下,但这时我们不是使用 tomcat,而是使用 apache server 服务器,或 nginx,那它的静态资源放在哪?

如果是 apache server,它的路径是绝对路径,在/var/www/html,如果是 nginx,它的路径不是绝对路径,放在安装包的根目录下 html。

接下来进行相关操作:首先把首页放在第一台服务器上,打开服务器,连接 node-1,cd 到 var/www/html 中,将首页推拽上传上去,上传后用 service(service httpd start) 命令启动 apache 服务器。因为没有配置域名,所以可以通过访问 IP 形式。

image.png

启动成功后,打开浏览器访问192.168.227.151,结果如下图

image.png

此时按下 F12查看知,现在静态资源是不存在的,重新浏览后刷新,majs 是不存在的,但并不影响我们页面的执行,原因就在于我们是异部加载。

image.png

接下来查看后端:把 ma.js 放在指定服务器上,让它可以响应,根据刚才部署方案,我们的 ma.js 必须放在153机器的根目录下。所以来到 node-3中,我们的静态资源路径是在我们根目录下 html 中,因此我们 cd 至 html 中。

image.png

接下来打开 ma.js 查看 ip 是否正确,是用户接收服务器的 ip,因为发送的数据是发往这台机器。

改好 IP 确认无误后拖至机器中上传,上传后需要对 nginx 的配置文件进行修改,cd 至 conf 中,可以通过把之前的配置文件删除,然后配置新的 nginx 文件给它上传,所以选中 nginx.conf 进行上传。

image.png

上传之后进行 nginx 的启动,启动命令为 sbin/nginx =c conf/nginx.conf,就完成 nginx 的启动。

image.png

是否启动成功可以通过 ps -ef | grep nginx 查找

image.png

上图可知启动成功

接下来模拟我们之前所讲理论步骤能不能满足于埋点收集。首先打开日志文件追踪一下:

tail =f logs/user_defined.log,打开后再返回页面查看当用户访问页面到底能不能进行收集数据。

由此可知进行了数据收集。我们按下 F12分析数据如何来的,当用户一旦请求页面,埋点代码就会开始执行,然后把收集数据的 js 拉至页面上就会进行数据收集然后发送给后端。

表述是否正确,可以刷新页面后,发现有三个请求,第一个是 document,请求页面,第二个请求是 script 脚本,第三个请求 log.gif 图片,所以是正确的。

以上就是我们埋点收集用户数据的一套理论。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
2月前
|
Rust 前端开发 JavaScript
Tauri 开发实践 — Tauri 日志记录功能开发
本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录,并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件,可以轻松实现多平台日志记录,包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后,日志记录功能将显著提升开发体验和程序稳定性。
119 1
Tauri 开发实践 — Tauri 日志记录功能开发
|
4月前
|
存储 监控 Serverless
阿里泛日志设计与实践问题之Grafana Loki在日志查询方案中存在哪些设计限制,如何解决
阿里泛日志设计与实践问题之Grafana Loki在日志查询方案中存在哪些设计限制,如何解决
|
2月前
|
PyTorch 算法框架/工具
Pytorch学习笔记(七):F.softmax()和F.log_softmax函数详解
本文介绍了PyTorch中的F.softmax()和F.log_softmax()函数的语法、参数和使用示例,解释了它们在进行归一化处理时的作用和区别。
499 1
Pytorch学习笔记(七):F.softmax()和F.log_softmax函数详解
|
1月前
|
消息中间件 存储 监控
微服务日志监控的挑战及应对方案
【10月更文挑战第23天】微服务化带来模块独立与快速扩展,但也使得日志监控复杂。日志作用包括业务记录、异常追踪和性能定位。
|
3月前
|
Kubernetes API Docker
跟着iLogtail学习容器运行时与K8s下日志采集方案
iLogtail 作为开源可观测数据采集器,对 Kubernetes 环境下日志采集有着非常好的支持,本文跟随 iLogtail 的脚步,了解容器运行时与 K8s 下日志数据采集原理。
|
2月前
|
数据可视化
Tensorboard可视化学习笔记(一):如何可视化通过网页查看log日志
关于如何使用TensorBoard进行数据可视化的教程,包括TensorBoard的安装、配置环境变量、将数据写入TensorBoard、启动TensorBoard以及如何通过网页查看日志文件。
272 0
|
4月前
|
jenkins 持续交付
jenkins学习笔记之三:使用jenkins共享库实现日志格式化输出
jenkins学习笔记之三:使用jenkins共享库实现日志格式化输出
jenkins学习笔记之三:使用jenkins共享库实现日志格式化输出
|
2月前
|
监控 网络协议 CDN
阿里云国际监控查询流量、用量查询流量与日志统计流量有差异?
阿里云国际监控查询流量、用量查询流量与日志统计流量有差异?
|
3月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
182 9
|
4月前
|
存储 监控 Serverless
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决