埋点 sendBeacon

July 26, 20211分钟阅读

背景

埋点分析通常使用图片或者 xhr, 但在一些特定条件下有可能无法正常发出请求,例如埋点记录页面关闭。sendBeacon 就用于这种特定的场景使用

使用方法

navigator.sendBeacon(url)
navigator.sendBeacon(url, data)

其中 url就是请求地址,data可以是任意有效的 Post 数据类型。 与 xhr 不同,不会产生跨域问题。

常用方法: 在离开/隐藏页面发起埋点

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData)
  }
})

ie11 不支持 Beacon API

Reference

未经许可, 不可转载