网站流量日志分析 —数据采集—页面埋点 JavaScript 收集数据|学习笔记

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 快速学习网站流量日志分析—数据采集—页面埋点 JavaScript 收集数据

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

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


网站流量日志分析—数据采集—页面埋点 JavaScript 收集数据


内容简介

一、页面埋点 js 自定义收集

二、主流电商网站埋点收集

三、小结


一、页面埋点 js 自定义收集

如果要想更加精准的准确的知道用户在页面上的行为呢?

就需要通过某种技术手段来去捕捉用户在页面上的行为,那么,这时候我们自然想到在页面上最得天独厚的技术是我们的 JavaScript 技术,因为在我们现实当中很多内置的js事件。

可以想象到鼠标点击事件,鼠标悬屏事件,焦点离开事件等等,那么这个时候我们进行这一个技术就可以产生我们所谓的埋点收集。那么什么叫埋点呢?通俗的话概括来说,就是说在我们需要收集的页面上,我们预先的写上 js 代码,相当于绑定了事件,那么当用户的行为满足这个事件时,就会触发 js 的执行,从而进行相关数据的收集。

示例:

给 nginx.org 链接绑定一个点击事件,用户只要点击这个链接,这个事件就会触发,开始统计,点击一次,统计一次,这样就能精准的知道用户的行为。

image.png

埋点收集的核心概括为在页面预先加入 js 代码,触发用户的行为进行数据的收集。

自定义采集用户行为数据,通过在页面嵌入自定义的 javascript 代码来获取用户的访问行为(比如鼠标悬停的位置,点击的页面组件等),然后通过 ajax 请求到后台记录日志,这种方式所能采集的信息会更加全面。

在实际操作中,有以下几个方面的数据可以自定义的采集

系统特征:比如所采用的操作系统、浏览器、域名和访问速度等。

访问特征:包括点击的 URL.所点击的“页面标签<a>”及标签的属性等。

来源特征:包括来访 URL,来访 IP 等。

产品特征:包括所访问的产品编号、产品类别、产品颜色、产品价格、产品利润、产品数量和特价等级等。

以某电商网站为例,当用户点击相关产品页面时,其自定义采集系统就会收集相关的行为数据,发到后端的服务器,收集的数据日志格式如下。

image.png

埋点 javascript 收集总结:

目标:不以影响用户的正常浏览体验作为标准,数据采集分析锦上添花。

何为埋点:在待采集的页面上,预先置入一段 javascript 代码,当用户的某种行为满足 javascript 执行条件,触发javascript 的执行,在执行的过程中进行数据的采集工作。


二、主流电商网站埋点收集

我们正常的去访问网站非常的方便,那么这背后隐含出现什么呢?就是它到底有没有收集数据,对于我们用户来说,基本上是不知晓的。其实它在搜集,但是为什么看不到呢?大家想一下,我们搜集用户的行为数据的目的是为了什么,为了更好的去分析用户的行为,让他付费,那么你的搜集数据行为影响用户的正常购物流程体验,那么这时候是一种得不偿失的操作,不仅不能够让用户沉淀下来,反而用户离开,那这时候数据会丧失了我们整个项目分析的目标的一个本质,造成一个南辕北辙的结果。

所以我们要想去制定收集用户的源数据,一定不能够什么影响用户的正常购物流程体验。

京东:按 F12,打开开发模式,点击商品进入开发模式可以看到数据被收集。

点击一个商品产生了四个请求,其中三个图片和一段数据

image.png

标准 URL 协议的组成:

协议://主机:端口/资源路径?k1=v1&k2=v2 ,端口不写通常表示80端口,参数以 kv 形式存在。

image.png

如图,我们分析图片的请求,https 是请求的协议,mercury.jd.com 是主机,端口默认80, log.gif 是资源路径,请求图片后面的参数都是kv形式,下面用URL解码工具工具进行分析。

复制至工具解码后:

image.png

得出:

这些参数都是采集数据拼接的参数,其中很多指标是京东业务定义的,京东能明白定义。以上数据相比我们日志自带的功能,它能收集的数据行为更多。

我们发现我们去访问网站,它都是去请求图片,可知 http 协议是一个有来有回的协议,我们请求图片它则响应图片,想得知图片样式,可点击请求查看。

image.png

点击图片会发现图片很黑,并不是图片没有,而是图片很小,是1*1像素的图片,所以图片不是重点,请求图片的同时采集的数据才是重要的。

image.png

要想更加准确,精准的去收集用户在页面上的行为数据,必须通过使用前端技术 js 技术,在页面上埋点实现。


三、小结

1.埋点收集的好处是可以根据业务需求定制化收集的属性信息,在不影响用户浏览体验的情况下进行更多数据的收集。

2.在页面上预先置入一段 js 代码,当你的行为触发 js 代码执行时,js 就会开展数据的收集工作。

其中两个核心概念为预先埋入代码和行为触发,两者满足后相当于我们已在页面上埋入,只要用户点击就会触发,数据就会被收集。

用户的点击,悬停,双击都是在收集,不管怎么收集,只要我们写好事件,就可以收集各种我们所需要的数据。

以上就是我们的第二种方式通过页面埋点 js 代码来自定义收集我们的数据,这种方式也是从无到有的数据采集方式。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
11天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
46 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
15天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
33 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
129 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
存储 Oracle 关系型数据库
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
本文介绍了MySQL InnoDB存储引擎中的数据文件和重做日志文件。数据文件包括`.ibd`和`ibdata`文件,用于存放InnoDB数据和索引。重做日志文件(redo log)确保数据的可靠性和事务的持久性,其大小和路径可由相关参数配置。文章还提供了视频讲解和示例代码。
210 11
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
|
JavaScript 数据可视化 前端开发
《JavaScript数据可视化编程》——导读
在我们的日常生活中,数据的重要性与日俱增。尤其对于一些庞大的组织机构(诸如Facebook和Google这种体量的公司)来说,数据几乎是一切决策的核心。在地缘政治领域,正在前所未有地收集数据,以致爆出诸如美国国家安全局监控丑闻这样的事件,这从另一个侧面反映了我们正在经历一个宏观数据时代。
2845 0
|
JavaScript 前端开发 数据可视化

热门文章

最新文章