JavaScript追踪统计用户数据

2019-04-15202次阅读javascript

网页中经常会遇到这样的需求,例如:点击链接或者用户正准备离开网页时,需要将这些信息发送给后端服务器做为统计分析。

常用方法有下面几种:

  • 同步XHR(XMLHttpRequest)
  • 异步xhr或fetch,带有延迟。
  • 反弹追踪。
  • Beacon API。
  • a标签上的ping属性。

前三个方法都会延缓网页卸载,严重影响用户体验。这里不做介绍,如有兴趣点击末尾参考链接查看。

Beacon API

为了解决网页卸载时,异步请求无法成功的问题,浏览器特别实现了一个 Beacon API,允许异步请求脱离当前主线程,放到浏览器进程里面发出,这样可以保证一定能发出。Beacon API请求使用HTTP POST方法,请求通常不需要响应。

window.addEventListener('unload', function (event) {
  navigator.sendBeacon('/log', 'foo=bar');
});

上面代码中,navigator.sendBeacon()方法可以保证,异步请求一定会发出。第一个参数是请求的网址,第二个参数是发送的数据。

Beacon API浏览器兼容


a标签的ping属性

HTML的<a>标签有一个ping属性,只要用户点击,就会向该属性指定的网址,发出一个 POST 请求。

<a href="https://baidu.com" ping="/log?foo=bar">
  click
</a>

上面代码中,用户点击跳转时,会向/log这个网址发一个 POST 请求。

ping属性浏览器兼容

Firefox浏览器默认情况下禁用ping属性。但可以通过browser.send_pings标志启用。

参考链接:如何用网页脚本追踪用户

 

上一篇: 前端必备!最全nginx技术分析(转载收藏)  下一篇: git强制覆盖本地代码  

JavaScript追踪统计用户数据相关文章