Safari中异步追踪像素请求被取消问题求助

问题根源 #

Safari的**智能跟踪预防（ITP）**机制，以及页面卸载阶段的网络请求限制，会主动取消未完成的后台请求——尤其是重定向这类会立即卸载当前页面的操作，导致追踪像素还没完成加载就被终止。

可行解决方案 #

• 使用navigator.sendBeacon()替代图片像素
  这是最可靠的方案，sendBeacon是浏览器专门为页面卸载时的后台数据上报设计的API，它会异步发送请求且不会阻塞页面卸载，Safari对它的支持完善。
  示例代码：

  const trackingUrl = 'https://your-tracking-domain.com/pixel?params=xxx';
  navigator.sendBeacon(trackingUrl);
  // 执行重定向
  window.location.href = 'https://target-page.com';
  

  若追踪服务仅支持GET请求，直接传递URL即可；如需自定义请求头，可结合Blob处理参数。

• 使用fetch的keepalive选项
  习惯用fetch的话，开启keepalive参数也能让请求在页面卸载后继续完成，效果和sendBeacon类似。
  示例代码：

  fetch('https://your-tracking-domain.com/pixel?params=xxx', {
    method: 'GET',
    keepalive: true
  }).then(() => {
    window.location.href = 'https://target-page.com';
  });
  

• 应急方案：给重定向加微小延迟
  用setTimeout给重定向加几毫秒延迟，让像素有足够时间完成请求，但这种方法不稳定（Safari的限制可能随时调整），且延迟过长会影响用户体验，仅作应急使用。
  示例代码：

  const img = new Image();
  img.src = 'https://your-tracking-domain.com/pixel?params=xxx';
  setTimeout(() => {
    window.location.href = 'https://target-page.com';
  }, 100);
  

注意事项 #

• 不要依赖img.onload事件触发重定向，Safari在页面卸载时可能不会触发该事件，反而导致重定向延迟或失败。
• 确保追踪URL的域名未被Safari的ITP标记为跟踪器，否则即使使用上述方法也可能被拦截。

内容的提问来源于stack exchange，提问作者kartik gavara