摘要：
那么在一个企业中，我们要如何去了解用户呢？最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。而如何去实现这一操作，这就涉及到我们前端的埋点了。
所谓’埋点’是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。
我们可以知道埋点是实际上是对特定事件或者行为的数据监控和上报，常见的埋点上报方式有下面介绍下这三种埋点上报方式
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。
一般而言，埋点域名并不是当前域名，因此请求会存在跨域风险，且如果ajax配置不正确可能会浏览器拦截。因此使用ajax这类请求并不是万全之策。
通常使用img标签去做埋点上报，img标签加载并不需要挂载到页面上，基于js去new image()，设置其src之后就可以直接请求图片
因此当我们做埋点上报时，使用img是一个不错的选择。
img兼容性好无需挂载到页面上，反复操作dom
img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来
Navigator.sendBeacon是目前通用的埋点上报方案，Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。
navigator.sendBeacon() 方法可用于通过 HTTP POST[1] 将少量数据 异步[2] 传输到 Web 服务器。
它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest[3]）发送分析数据的一些问题。
相较于img标签，使用navigator.sendBeacon会更规范，数据传输上可传输资源类型会更多。
对于ajax在页面卸载时上报，ajax有可能没上报完，页面就卸载了导致请求中断，因此ajax处理这种情况时必须作为同步操作.
前端埋点上报常使用ajax，img，navigator.sendBeacon。
不推荐使用ajax。
如果考虑兼容性的话，img是不二之选。
目前最合适的方案是navigator.sendBeacon，不仅是异步的，而且不受同域限制，而且作为浏览器的任务，因此可以保证会把数据发出去，不影响页面卸载。
行为
绑定点击事件，当点击目标元素时，触发埋点上报。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/67657.html