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;