杭州电商网站建设,网站服务器组建,做八年级题目的网站,关于做网站的什么是埋点
埋点是数据采集领域#xff08;尤其是用户行为数据采集领域#xff09;的术语#xff0c;指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。 我们可以知道埋点实际上是对特定事件或…什么是埋点
埋点是数据采集领域尤其是用户行为数据采集领域的术语指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。 我们可以知道埋点实际上是对特定事件或者行为的数据监控和上报常见的埋点上报方式有ajax、img、navigator.sendBeacon三种
1、基于ajax的埋点上报
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程所以我们可以和后端约定一个接口通过ajax去进行数据上报。
封装一个方法
function buryingPointAjax(data) {return new Promise((resolve, reject) {// 创建ajax请求const xhr new XMLHttpRequest();// 定义请求接口xhr.open(post, /buryingPoint, true);// 发送数据xhr.send(data);});
}
使用时直接调用即可
let info {}
buryingPointAjax(info) // 这样就成功上报了info的对象
缺点 一般而言埋点域名并不是当前域名因此请求会存在跨域风险且如果ajax配置不正确可能会浏览器拦截。因此使用ajax这类请求并不是万全之策。
2、通过一些支持跨域的标签去实现数据上报功能
我们可以通过一些支持跨域的标签去实现数据上报功能。 script link img就是我们上报数据的最好对象
script及link的缺陷 因为埋点涉及请求因此我们需要保证script和link标签的src可以正常请求。 如果需要请求script和link我们需要将标签挂载到页面上。
let a document.createElement(script)
a.src xxxx.js创建一个script标签未挂载到页面上不会发起请求
document.body.appendChild(a)当我们将这个标签挂载到页面上时发起了请求。
结论当我们使用script和link进行埋点上报时需要挂载到页面上而反复操作dom会造成页面性能受影响而且载入js/css资源还会阻塞页面渲染影响用户体验因此对于需要频繁上报的埋点而言script和link并不合适。
基于img做埋点上报 通常使用img标签去做埋点上报img标签加载并不需要挂载到页面上基于js去new image()设置其src之后就可以直接请求图片。
var imgnew Image();
img.srcxxx.png;控制台创建一个image标签可以看到即便未被挂载到页面上依旧发起了请求。
结论 因此当我们做埋点上报时使用img是一个不错的选择。 1、img兼容性好 2、无需挂载到页面上反复操作dom 3、img的加载不会阻塞html解析但img加载后并不渲染他需要等待Render Tree生成完后才和Render Tree一起渲染出来
注通常埋点上报会使用gif图合法的GIF只需要43个字节
3、基于Navigetor.sendBeacon的埋点上报
Navigator.sendBeacon是目前通用的埋点上报方案Navigator.aendBeacon方法接受两个参数第一个参数是目标服务器的URL第二个参数是所要发送的数据可选可以是任意类型字符串、表单对象、二进制对象等等。 navigator.sendBeacon() 方法可用于通过 HTTP POST将少量数据 异步传输到 Web 服务器。 **作用**主要用于将传统数据发送到Web服务器同时避免了用传统技术如XMLHttpRequest发送分析数据的一些问题。
**补充**sendBeacon 如果成功进入浏览器的发送队列后会返回true如果受到队列总数、数据大小的限制后会返回false。返回true后只是表示进入了发送队列浏览器会尽力保证发送成功但是否成功了不会有任何返回值。
优势 相较于img标签使用navigator.sendBeacon会更规范数据传输上可传输资源类型会更多。 对于ajax在页面卸载上报ajax有可能没上报完页面就卸载了导致请求中断因此ajax处理这种情况时必须作为同步操作。
sendBeacon是异步的不会影响当前页到下一个页面的跳转速度且不受区域限制。这个方法还是异步发出请求但是请求与当前页面脱离关联作为浏览器的任务因此可以保证数据会发出去不拖延卸载流程。
总结
前端埋点上报常使用ajaximgnavigator.sendBeacon。 不推荐使用ajax。 如果考虑兼容性的话img是不二之选。 目前最合适的方案是navigator.sendBeacon不仅是异步的而且不受区域限制而且作为浏览器的任务因此可以保证会把数据发出去不影响页面卸载。
常见埋点行为
1、点击触发埋点 绑定点击事件当点击目标元素时触发埋点上报。 2、页面停留时间上报埋点 路由文件中初始化一个startTime当页面离开时通过路由守卫计算停留时间。 3、错误监听埋点 通过监听函数去接收错误信息。 例如vue错误捕获、JS异常与静态资源加载异常、请求错误捕获 4、内容可见埋点 通过交叉观察器去监听当前元素是否出现在页面
