前端埋点学习

news2024/11/25 8:01:59

前端埋点

前端数据埋点是在前端页面中通过代码的方式手机用户行为数据和页面性能的过程，通过在页面中插入指定的代码，实现实时监控用户在页面上的操作行为。
通常包括一下事件

定义事件: 定义需要手机的数据事件，如点击，浏览等
添加代码: 在网页或者应用程序中添加特定的代码，用于收集事件数据
发送数据: 将收集到的数据发送给服务器进行分析
分析数据: 将收集到的数据进行分析和挖掘，找出用户的行为规律和需求，为产品的改进和优化提供依据

埋点数据收集

手动收集

直接在点击事件的回调函数中收集我们需要上报的数据即可。

function clickHandler() {
	let params = {
		event: 'click',
		value: ''
	}
}

在项目中，使用封装好的工具方法，只需要调用方法并传递需要上报的数据参数即可。

通过元素添加属性上报

这种方法就是通过元素添加特定的属性，在全局添加点击事件，利用事件的点击，遍历找到触发该事件的元素，判断元素上是否有绑定相关的属性，有则取相关的值直接上报，没有则不上报。

function getClickTraceElement(target) {
	let ele = target
	let clickTraceAction = ele.getAttribute('click-trace-action')
	while(ele.tagName !== 'booy' & !clickTraceAction) {
		ele = ele.parentNode
		clickTraceAction = ele.getAttribute('click-trace-action')
	}
	return ele.tagName !== 'body' ? ele : null
}
document.body.addEventListener('click', (event) => {
	let ele = getClickTraceElement(event.target) 
	if(ele) {
		let traceAction = ele.getAttribute('click-trace-action')
		let traceParams = ele.getAttribute('click-trace-params') || {}
		if(typeof traceParams === 'string') {
		traceParams = JSON.parse(traceParams)
		}
		let params = {
			event: traceAction,
			ecommerce: traceParams
		}
		axios.post(url,params)
	}
}, false)

<div 
	onClick = {handleFullScreen} 
	data-click-trace-action = {'click-fullscreen'}
	data-click-trace-params = {JSON.stringify({value: 'fullscreen'})}
>
</div>

常见的监控

数据监控(主要关注用户在网站或者应用中的行为和交互)

pv: 页面浏览量
uv: 访问某个站点或者点击某条欣慰的不同ip地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问页面
用户在响应的页面中的触发行为

性能监控

不同用户，不同机型和不同系统下的首屏加载事件
白屏时间
http请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间

异常监控

javasript的异常监控
样式丢失的异常监控

性能数据

在这里插入图片描述

埋点的分类

展现埋点
在产品的特定位置设置，记录用户是否看到展现了该位置的特定内容或者元素的埋点。
曝光埋点
记录用户是否看到特定内容或者元素的埋点，更加侧重于记录用户看到的内容或者元素是否被充分的曝光
交互埋点
在产品的特定位置设置的，用于记录用户与该位置的特定内容或者元素进行交互(点击，填写，分享)

常见的埋点方案

代码埋点，如上
可视化买带你，通过一个可视化的界面来完成，用户可以在界面上选择要跟踪的事件和页面，然后系统会自动生成相应的跟踪代码，用户只需要将其添加到网页中去。
无痕埋点【自动埋点】: 在网页中自动采集所有用户的行为数据，然后发送给后端服务器来进行分析，不需要手动添加跟踪代码，可以大幅度的降低开发成本，但是会采集到大量的冗余数据。
通过sdk将程序中的数据尽可能多的采集，存储下来，方便后续使用。采集的是全量数据，产品的迭代过程中是不需要关注埋点逻辑的，不会出现漏埋，误埋等现象。

埋点数据收集

页面浏览数据: uv pv 停留时间
用户行为数据：用户的点击，滚动，输入等操作行为
错误数据: 代码中的错误信息，异常情况
用户属性数据: 用户年龄，性别，地域
设备信息: 用户设备类型，操作系统，浏览器等信息
使用时长数据: 用户使用产品的市场，频次等
搜索关键词数据: 用户在搜索框中输入的关键词信息