前端埋点
前端数据埋点是在前端页面中通过代码的方式手机用户行为数据和页面性能的过程，通过在页面中插入指定的代码，实现实时监控用户在页面上的操作行为。
通常包括一下事件
- 定义事件: 定义需要手机的数据事件，如点击，浏览等
- 添加代码: 在网页或者应用程序中添加特定的代码，用于收集事件数据
- 发送数据: 将收集到的数据发送给服务器进行分析
- 分析数据: 将收集到的数据进行分析和挖掘，找出用户的行为规律和需求，为产品的改进和优化提供依据
埋点数据收集
手动收集
直接在点击事件的回调函数中收集我们需要上报的数据即可。
function clickHandler() {let params = {event: 'click',value: ''}
}
在项目中，使用封装好的工具方法，只需要调用方法并传递需要上报的数据参数即可。
通过元素添加属性上报
这种方法就是通过元素添加特定的属性，在全局添加点击事件，利用事件的点击，遍历找到触发该事件的元素，判断元素上是否有绑定相关的属性，有则取相关的值直接上报，没有则不上报。
function getClickTraceElement(target) {let ele = targetlet clickTraceAction = ele.getAttribute('click-trace-action')while(ele.tagName !== 'booy' & !clickTraceAction) {ele = ele.parentNodeclickTraceAction = 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 停留时间
用户行为数据： 用户的点击，滚动，输入等操作行为
错误数据: 代码中的错误信息，异常情况
用户属性数据: 用户年龄，性别，地域
设备信息: 用户设备类型，操作系统，浏览器等信息
使用时长数据: 用户使用产品的市场，频次等
搜索关键词数据: 用户在搜索框中输入的关键词信息
数据上报
- xhr接口
采用接口请求的方式，上传的是埋点数据，可能会产生跨域问题 - img标签(GIF上报）
将埋点数据伪装成图片url的请求方式，避免跨域问题，但浏览器对于url的上传会有限制，所以img的上报不适合大数据量上报的情况，同时会存在刷新或者打开页面的时候上报数据丢失
- 防止跨域
- 防止阻塞页面加载，影响用户体验，一般创建资源节点之后只有将对象注入到浏览器dom之后，浏览器才会发送实际资源请求，反复操作dom会引发性能问题，加载js css的资源会阻塞页面渲染，使用图片不会插入dom，没有阻塞问题，没有js的浏览器换进中也可以通过imd标签打点