使用新版gtag Google Analytics脚本，如何通过window.onunload事件结束会话？

嘿，这个需求其实挺常见的——默认情况下Google Analytics（GA4）的会话会在30分钟无用户活动后自动结束，或者等用户完全关闭浏览器。但如果想在用户关闭单个标签页、刷新页面或者跳转到其他站点时立刻手动结束当前会话，可以按照以下步骤实现：

核心思路 #

要手动结束GA会话，关键是给GA发送一个带有session_control: 'end'参数的事件。但需要注意：页面卸载（unload）事件中的异步请求很容易被浏览器中断，所以我们要用更可靠的navigator.sendBeacon API来确保请求能成功发送。

具体实现代码 #

首先确保你已经在页面中加载了新版gtag.js的基础代码（替换成你的GA测量ID）：

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX'); // 替换为你的GA4测量ID

然后添加页面卸载的监听逻辑：

window.addEventListener('unload', function() {
  // 先获取当前用户的client_id，GA需要用它识别对应的会话
  const clientId = gtag('get', 'G-XXXXXXXXX', 'client_id'); // 同样替换测量ID

  // 构造GA收集请求的参数
  const gaParams = new URLSearchParams({
    v: '1', // GA API版本，固定为1
    tid: 'G-XXXXXXXXX', // 你的GA4测量ID
    cid: clientId, // 用户唯一标识
    t: 'event', // 事件类型
    ec: 'session', // 事件类别
    ea: 'manual_end', // 事件动作
    sc: 'end' // 关键参数：标记会话结束
  });

  // 使用sendBeacon发送请求，浏览器会确保请求完成
  if (navigator.sendBeacon) {
    navigator.sendBeacon('https://www.google-analytics.com/collect', gaParams.toString());
  } else {
    // 兼容不支持sendBeacon的旧浏览器（同步XHR，不推荐但作为备选）
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://www.google-analytics.com/collect', false);
    xhr.send(gaParams.toString());
  }
});

关键注意事项 #

• 替换测量ID：把代码中所有G-XXXXXXXXX替换成你自己的GA4测量ID。
• sendBeacon的优势：这个API是专门为页面卸载场景设计的，浏览器会在后台异步发送请求，不会阻塞页面卸载，也不会被中断。普通的fetch或异步XHR在unload事件中大概率会被浏览器取消。
• 测试方法：要验证是否生效，可以打开浏览器开发者工具的「Network」面板，勾选「Preserve log」选项，然后关闭标签页/刷新页面，就能看到发送到https://www.google-analytics.com/collect的请求。
• GA4的会话逻辑：GA4中sc: 'end'参数依然有效，发送后会立即结束当前用户的会话，后续用户的互动会开启新会话。

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