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标志启用。

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