。

对于了解用户的行为、分析用户的需求有很大的帮助#xff0c;想实现这种需求可以通过前端埋点的方式。

埋点方式#xff1a;

想要了解用户在系统中所做的操作从而得出用户在本系统中最常用的模块、在系统中停留的时间。

对于了解用户的行为、分析用户的需求有很大的帮助想实现这种需求可以通过前端埋点的方式。

埋点方式

“埋点”是一种在应用程序或网站中插入代码的方式用于收集用户行为或特定事件(点击事件、浏览时间、搜索事件等)的信息。

它是用于分析和监控用户行为、应用性能和其他指标的一种方法。

为了收集关键的数据和指标以便帮助了解用户的行为、改进用户的体验、·优化应用性能、支持业务决策

(1)用户行为类型例如页面浏览量、点击事件、表单提交、购买行为等

(2)应用性能数据例如页面加载时间、API调用延迟、错误日志等

(1)手动埋点开发人员在代码中显示的插入埋点代码通常使用Javascript或其他编程语言实现。

比较常用的方法

某些标准事件或用户行为数据

(3)可视化埋点使用可视化工具在页面上直接选择元素或交互并配置要捕获的事件

5.常用埋点方法实例

因为埋点实际上是对关键节点的数据进行上报和服务端交互的一个过程所以我们可以和后端约定一个接口通过ajax进行数据上报。

代码如下

一般而言埋点域名并不是当前域名因此请求会存在跨域风险且如何ajax配置不正确可能会被浏览器拦截。

因此使用ajax请求并不是万全之策

数据上报前端主要是负责将数据传递到后端并不过分强调前后端交互因此可以通过一些支持跨域的标签去实现数据上报功能。

script、link、img就是我们上报的数据最好对象推荐使用img标签去实现。

如果需要请求script和link,我们需要将标签挂载到页面上会反复操作dom造成页面性能受影响而且载入js/css资源还会阻塞页面渲染影响用户体验所以选择使用script和link进行埋点的话要慎重考虑。

而img标签并不需要挂载到页面上基于js去new

代码如下:

img.srchttps://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/MaskGroup.13dfc4f1.png可以看到即使未被挂载到页面上依旧发起了请求

创建script标签

https://lf-headquarters-speed.yhgfb-cn-static.com/obj/rc-client-security/web/stable/1.0.0.28/bdms.js创建一个script标签未挂载到页面上并不会发起请求

将标签挂载到页面上

document.body.appendChild(a)这个时候就可以看到发起请求了

Navigator.sendBeacon是目前通用的埋点上报方案。

Navigator.sendBeacon方法接受两个参数第一个参数是目标服务器的URL第二个参数是所要发送的数据(可选)可以是任意类型(字符串、表单对象、二进制对象等等)。

navigator.sendBeacon()方法可用于通过HTTP

POST将少量数据异步传输到Web服务器。

它主要用于将统计数据发送到Web服务器同时避免了用传统技术(XMLHttpRequest)发送分析数据的一些问题。

注sendBeacon如果成功进入浏览器的发送队列后会返回true;如果受到队列总数、数据大小的限制后会返回false。

返回ture后只是表示进入了发送队列浏览器会尽力保证发送成功但是否成功不会再有任何返回值。

相较于img标签使用navigator.sendBeacon会更规范数据传输上可传输资源类型会更多。

对于ajax在页面卸载时上报ajax有可能没上报完页面就卸载了导致请求中断因此ajax处理这种情况时必须作为同步操作。

sendBeacon是异步的不会影响当前页到下一个页面的跳转速度且不受同域限制。

这个方法还是异步发出请求但是请求和当前页面脱离关联作为浏览器的任务因此可以保证会把数据发出去不拖延卸载流程。

1.img兼容性好

3.img的加载不会阻塞html的解析但img加载后并不渲染它需要等待Render

Tree生成完之后才和Render

路由文件中初始化一个startTime,当页面离开时通过路由守卫计算停留时间

let

startTime)navigator.sendBeacon(url,

{time:

axios.interceptors.response.use((response)

{if(response.code

Promise.reject(response)}},(error)

{//

返回错误逻辑navigator.sendBeacon(url,

{error:

document.getElementById(target)

监听目标元素

observer.observe(target)其他更详细埋点内容可参考https://mp.weixin.qq.com/s/lQos8C9y_6-ZT886k3aR9g