Question

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

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

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

Answer 1

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

确保调用完成的唯一方法是确保页面保持打开足够长的时间 - 对于链接上的事件，通常可以执行此操作，并且可能与hitCallback结合使用，如上所述。

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

Answer 2

有一种方法可以确保将请求发送给GA。 Simo Ahava撰写了一篇非常好的博文，题为“＆＃34; Leverage useBeacon And beforeunload In Google Analytics＆＃34;。

利用辉煌的sendBeacon解决方案。这里的引用解决了这个问题的选定答案：

用户代理通常会忽略在其中创建的异步XMLHttpRequests   卸载处理程序。解决这个问题，分析和诊断   代码通常会在卸载时生成同步XMLHttpRequest   beforeunload处理程序提交数据。同步   XMLHttpRequest强制用户代理延迟卸载文档，   并使下一个导航看起来更慢。空无一物   下一页可以做到避免这种不良页面加载的感觉   性能

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

这些技术不仅代表了糟糕的编码模式，还有一些   它们不可靠，也导致页面不良的感觉   加载下一个导航的性能。

Answer 3

您可以在页面onunload中等待点击发送到Google Analytics，但它确实需要繁忙的循环。在我的情况下，这并没有延迟用户导航，因为该页面是一个专门用于webapp的弹出窗口。我更关注与普通网页导航一起进行此操作。在忙碌的循环中提交代码之后，我不得不采取2次淋浴来解决污物问题。

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;

Answer 4

设置transport to beacon, with ga：

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

或transport_type to beacon, with 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将可能会切换为使用“信标”作为浏览器的默认机制支持它。

Google Analytics，跟踪页面卸载事件

4 个答案: