前端埋点，有哪些上报的方法？

王铁柱666

于 2024-10-08 10:10:26 发布

阅读量134

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/2401_87873725/article/details/142752821

版权

前端埋点上报的方法主要有以下几种：

图片请求（Image Beacon）：
- 原理：通过创建一个Image对象，将要上报的数据作为URL参数拼接到一个1x1像素的透明图片URL中，然后发送一个GET请求来触发上报。
- 优点：兼容性好，可以跨域上报，且请求不会阻塞页面加载和关闭。
- 缺点：只能发送GET请求，无法获取响应结果，且不适合上报大量数据。
XMLHttpRequest或Fetch API：
- 原理：使用XMLHttpRequest或Fetch API发送异步请求来上报数据，可以选择使用GET或POST方法，并将数据作为请求体或URL参数发送。
- 优点：可以发送异步请求，支持GET和POST等多种HTTP方法，且可以获取响应结果并进行进一步处理。
- 缺点：需要手动处理请求和响应的逻辑，且可能需要处理跨域请求的问题（如设置CORS）。
Navigator.sendBeacon()：
- 原理：Navigator.sendBeacon()方法允许在页面卸载时异步发送数据，通常用于在页面关闭时进行最后的数据上报。
- 优点：在页面卸载时可靠地发送数据，不会阻塞页面关闭，且支持在后台发送数据。
- 缺点：只能发送POST请求，无法获取响应结果。
WebSocket