非单页应用中确保Google Analytics事件在页面跳转前发送的问题

这个问题太常见了——浏览器在跳转页面时会立刻终止当前页面的JS执行，GA的异步事件请求还没来得及发送就被掐断了。我给你几个经过验证的解决方案，按推荐程度排序：

1. 使用navigator.sendBeacon()（最推荐） #

这是现代浏览器专门为页面卸载场景提供的API，它会把请求交给浏览器后台处理，不需要等待响应，也不会阻塞页面跳转，完美适配你的需求。

示例代码：

document.querySelector('a.continue-link').addEventListener('click', function(e) {
  // 触发GA事件（新版gtag.js已内置sendBeacon支持）
  gtag('event', 'click', {
    'event_category': 'Navigation',
    'event_action': 'continue',
    'event_label': 'Continue to next page'
  });

  // 如果你用的是老版本analytics.js，可手动用sendBeacon发送
  // const payload = new FormData();
  // payload.append('v', '1');
  // payload.append('tid', 'UA-XXXXXXXXX-X');
  // payload.append('cid', ga.getAll()[0].get('clientId'));
  // payload.append('t', 'event');
  // payload.append('ec', 'Navigation');
  // payload.append('ea', 'continue');
  // payload.append('el', 'Continue to next page');
  // navigator.sendBeacon('https://www.google-analytics.com/collect', payload);
});

新版gtag.js已经内置了sendBeacon的适配逻辑，只要正常调用事件即可；老版本则需要手动组装请求发送。

2. 延迟页面跳转（兼容旧浏览器） #

如果需要兼容不支持sendBeacon的老浏览器（比如IE），可以通过阻止默认跳转，给GA留足发送时间后再手动跳转。

示例代码：

document.querySelector('a.continue-link').addEventListener('click', function(e) {
  // 先阻止默认跳转行为
  e.preventDefault();
  const targetUrl = this.href;

  // 触发GA事件，用回调确保发送完成后跳转
  gtag('event', 'click', {
    'event_category': 'Navigation',
    'event_action': 'continue',
    'event_label': 'Continue to next page',
    'event_callback': function() {
      window.location.href = targetUrl;
    }
  });

  // 兜底：防止GA加载失败导致用户无法跳转
  setTimeout(function() {
    window.location.href = targetUrl;
  }, 500);
});

event_callback是GA提供的专属回调，事件请求发送完成后会自动触发，比固定延迟更可靠；超时兜底则是为了避免极端情况影响用户体验。

3. 改用按钮触发跳转（适合关键转化点） #

如果这个“继续”操作是核心转化行为，你可以把<a>标签改成语义化的<button>，在点击事件里先完成GA上报，再手动跳转页面，彻底规避锚点跳转的问题。

示例代码：

<button class="continue-button">继续</button>

document.querySelector('.continue-button').addEventListener('click', function() {
  gtag('event', 'click', {
    'event_category': 'Navigation',
    'event_action': 'continue',
    'event_label': 'Continue to next page',
    'event_callback': function() {
      window.location.href = '/next-page';
    }
  });

  // 同样设置超时兜底
  setTimeout(function() {
    window.location.href = '/next-page';
  }, 500);
});

关键注意事项 #

• 绝对不要用同步XMLHttpRequest，它会阻塞页面跳转，严重影响用户体验。
• 测试时请模拟真实用户点击，不要用右键“在新标签页打开”，这种情况不会触发阻止默认行为的逻辑。
• 如果你用的是GA4，gtag('event')已经针对页面卸载场景做了优化，优先使用官方方法即可。

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