html5统计数据上报API:SendBeacon
16lz
2021-01-22
公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv、uv、页面留存率、访问设备等信息。与之相关的就是客户端的数据采集,然后上报的服务端。为了保证数据的准确性,就需要保证数据上报不会有差错。
常见方案缺陷
数据发回服务器的常见做法是,将收集好的用户数据,放在unload事件里面,用 AJAX 请求发回服务器。但是这种方法有个弊端,因为AJAX通常应用的场景是异步发送请求,在 unload 事件中,使用 XHR 异步发送数据。这种做法有可能导致服务端未收到数据,浏览器就已经断开连接,数据就会丢失。虽然AJAX支持同步请求,但这种做法会阻塞页面的跳转,影响用户体验。
解决方案
Beacon API 的出现就是为了解决这个问题的。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。
使用方法
使用方式也很简单:navigator.sendBeacon(url, data)
- url参数表明 data 将要被发送到的网络地址。
- data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据
- return: 当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。
例如:
window.addEventListener('unload', logData, false); function logData() { navigator.sendBeacon("/log", analyticsData); }
兼容性
beacon api 的兼容性如下:
在不支持的浏览器中,可以使用以下 fallback 代码解决浏览器不支持 Beancon API 的问题(仅实现了 GET 方法)。
function sendBeacon (url) { if (typeof navigator !== 'undefined' && navigator.sendBeacon) { return navigator.sendBeacon(url); } try { var req = new window.XMLHttpRequest(); req.open('GET', url, false); req.send(); } catch (e) { // Fix IE9 cross-site error var img = new window.Image(); img.src = url; } }
更多相关文章
- ajax提交含有html数据时的处理方法
- 上传文件,那么form中用来接收文件的数据成员是什么类型?
- 用于检查用户名可用性的Javascript帖子无效
- 服务器数据库系列 - 日志系列 - Nginx日志
- 指导我优化我的PHP代码,用数组中的空数据填充缺失值
- thinkPHP的数据添加、修改、删除
- 在MySQL数据库中搜索与多个Tag记录相关/包含的书签
- 使用jquery和php手动在数据库中增加一个字段[复制]
- 如何使用ajax向php发送与每个按钮相关的数据?