Google Analytics，跟踪页面卸载事件

Question

当用户使用 Google Analytics (analytics.js) 离开页面时，我试图完成对事件的跟踪。 虽然不知道用户将如何离开，但可能是因为外部链接或只是关闭了选项卡。 所以我的想法是挂钩 beforeunload 或 unload 事件，然后：

window.addEventListener("beforeunload", function() {
    ga('send', 'event', 'some', 'other', 'data');
});

现在我的问题是，对 GA 服务器的请求是同步的还是我可以以某种方式使用hitCallback属性强制这种行为？ 如果这是不可能的，我还能如何实现这一目标？ 最好无需为用户设置超时或固定等待时间！

Answer 1

有一种方法可以确保将请求发送到 GA。 Simo Ahava 写了一篇非常好的博客文章，标题为——
“ 利用 useBeacon 和 beforeunload 在 Google Analytics 中”。

利用出色的sendBeacon解决方案。 这是引用此问题的选定答案的引文：

用户代理通常会忽略在卸载处理程序中生成的异步 XMLHttpRequest。 为了解决这个问题，分析和诊断代码通常会在 unload 或 beforeunload 处理程序中生成一个同步的 XMLHttpRequest 来提交数据。 同步 XMLHttpRequest 强制用户代理延迟卸载文档，并使下一个导航看起来更慢。 下一页无法避免这种页面加载性能不佳的感觉。

还有其他技术可用于确保提交数据。 其中一种技术是通过创建 Image 元素并在卸载处理程序中设置其 src 属性来延迟卸载以提交数据。 由于大多数用户代理会延迟卸载以完成挂起的图像加载，因此可以在卸载期间提交数据。 另一种技术是在卸载处理程序中创建一个持续几秒钟的无操作循环，以延迟卸载并将数据提交到服务器。

这些技术不仅代表糟糕的编码模式，其中一些技术也不可靠，还会导致下一次导航的页面加载性能不佳。

Answer 2

请求不会同步，GA 跟踪调用永远不会同步。

确保调用完成的唯一方法是确保页面保持打开的时间足够长 - 对于链接上的事件，您通常会使用超时来执行此操作，这可能与您提到的 hitCallback 结合使用。

当用户关闭选项卡时保持窗口打开的唯一方法是从您的 beforeunload 处理程序返回一个值，这将提示“确认导航”警报。 显然，仅仅为了跟踪 GA 事件，这将是一个非常糟糕的解决方案。

Answer 3

使用ga将transport设置为beacon ：

window.addEventListener("beforeunload", function() {
    ga('send', 'event', 'page_unload', 'bye bye', {transport: 'beacon'});
});

或transport_type到beacon ，使用gtag ：

window.addEventListener("beforeunload", function() {
  gtag('event', 'page_unload', {
    'event_category': 'my cat',
    'event_label': 'my label',
    'transport_type': 'beacon'  // <--- important part here
  });
});

无论如何，信标应该成为默认的传输模式。 截至2020-09 年：

目前，如果传输机制设置为“信标”，gtag.js 仅使用 navigator.sendBeacon。 但是，在未来，gtag.js 可能会在支持它的浏览器中切换到使用“信标”作为默认机制。

Answer 4

正如 tomconnors 所指出的，这不起作用。 我留下答案是为了帮助警告任何考虑这样做的人。 信标传输可能是要走的路，但在最初的答案时并没有得到广泛支持。

您可以在onunload页面中等待将onunload发送到 Google Analytics，但这确实需要一个繁忙的循环。 就我而言，这并没有延迟用户导航，因为该页面是专用于 web 应用程序的弹出窗口。 我会更关心在普通网页导航中执行此操作。 尽管如此，在使用繁忙的循环提交代码后，我不得不洗两次澡才能清除污垢。

var MAX_WAIT_MS = 1000;
var _waitForFinalHit = false;

function recordFinalHit() {
    _waitForFinalHit = true;

    ga('send', 'event', 'some', 'other', 'data', {
        'hitCallback': function() {
            _waitForFinalHit = false;
        }
    });
}

function waitForFinalHit() {
    var waitStart = new Date().getTime();
    while (_waitForFinalHit
        && (new Date().getTime() - waitStart < MAX_WAIT_MS)) { }
}

function myOnUnload() {
    recordFinalHit();
    // Do your other final stuff here...
    waitForFinalHit();
}

window.onunload = myOnUnload;