那么在一个企业中，我们要如何去了解用户呢？
最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。
而如何去实现这一操作，这就涉及到我们前端的埋点了。
埋点方式
在聊如何进行埋点前，我们先介绍下什么是埋点？
基于此我们可以知道埋点是实际上是对特定事件或者行为的数据监控和上报，
介绍
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。
代码实现
我们可以封装一个方法，代码如下：
使用时，直接调用即可
缺点
一般而言，埋点域名并不是当前域名，因此请求会存在跨域风险，且如果ajax配置不正确可能会浏览器拦截。因此使用ajax这类请求并不是万全之策。
先说结论，这里推荐使用img标签去实现。
script及link的缺陷
验证缺陷
不妨验证下，我们在管理台中加入以下代码：
创建一个script标签，未挂载中页面上，并不会发起请求
讯享网
书接上文，当我们将这个标签挂载中页面上时：
这时发起了请求
结论
，因此对于需要频繁上报的埋点而言，script和link并不合适。
基于img做埋点上报
通常使用img标签去做埋点上报，
验证img优势
控制台去创建一个image标签，如下：
可以看到即便未被挂载到页面上依旧发起了请求。
结论
因此当我们做埋点上报时，使用img是一个不错的选择。
- img兼容性好
- 无需挂载到页面上，反复操作dom
- img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来
注：通常埋点上报会使用gif图，合法的 GIF 只需要 43 个字节
Navigator.sendBeacon是目前通用的埋点上报方案，
介绍
方法可用于通过 HTTP POST[2] 将少量数据 异步[3] 传输到 Web 服务器。
作用
它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：`XMLHttpRequest`[4]）发送分析数据的一些问题。
补充
sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。返回ture后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，不会再有任何返回值。
例子
以掘金为例：
这里发了一个post请求，将小量的数据发到服务端，用于统计数据
优势
相较于img标签，使用navigator.sendBeacon会更规范，数据传输上可传输资源类型会更多。
对于ajax在页面卸载时上报，ajax有可能没上报完，页面就卸载了导致请求中断，因此ajax处理这种情况时必须作为同步操作.
前端埋点上报常使用ajax，img，navigator.sendBeacon。
不推荐使用ajax。
如果考虑兼容性的话，img是不二之选。
目前最合适的方案是navigator.sendBeacon，不仅是异步的，而且不受同域限制，而且作为浏览器的任务，因此可以保证会把数据发出去，不影响页面卸载。
绑定点击事件，当点击目标元素时，触发埋点上报。
路由文件中，初始化一个startTime，当页面离开时通过路由守卫计算停留时间。
通过监听函数去接收错误信息。
vue错误捕获
JS异常与静态资源加载异常
请求错误捕获
通过交叉观察器去监听当前元素是否出现在页面
作者：彩虹修狗
链接：https://juejin.cn/post/
来源：稀土掘金
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/200197.html