2014-05-05 146 views
7

我試圖完成跟蹤用戶使用Google Analytics(analytics.js)離開頁面時發生的事件。雖然未知用戶將如何離開,但可能是因爲外部鏈接或關閉了標籤。所以我的想法是鉤住beforeunload或卸載事件,然後:谷歌分析,跟蹤頁面卸載事件

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

現在的問題是,將請求到服務器GA是同步或者我可以以某種方式強迫與hitCallback屬性,它的行爲?如果這是不可能的,我還能如何實現這一目標?最好不必爲用戶設置超時或固定的等待時間!

回答

5

該請求不會同步,GA跟蹤調用永遠不會。

確保呼叫完成的唯一方法是確保頁面保持打開時間足夠長 - 對於鏈接上的事件,您通常會使用可能與hitCallback結合的超時來執行此操作,如您所述。

當用戶關閉選項卡時,保持窗口打開的唯一方法是從beforeunload處理程序返回一個值,該值將提示「確認導航」警報。顯然,這對於跟蹤GA事件將是一個非常糟糕的解決方案。

4

有一種方法可以確保將請求發送給GA。 Simo Ahava寫了一篇非常好的博客文章 -
Leverage useBeacon And beforeunload In Google Analytics」。

利用輝煌的sendBeacon解決方案。下面是引用其中涉及這個問題的答案選擇:

用戶代理通常會忽略 卸載處理程序作出異步的XMLHttpRequest。爲了解決這個問題,分析和診斷代碼通常會在卸載之前在卸載或 中提交同步XMLHttpRequest以提交數據。同步 XMLHttpRequest強制用戶代理延遲卸載文檔 並使下一個導航看起來更慢。有沒有什麼 下一頁可以做到這一點,以避免這種感覺差的頁面加載 的表現。

還有其他技術用於確保提交數據。其中一個 這樣的技術是通過 延遲卸載以提交數據,在 卸載處理程序中創建Image元素並設置其src屬性。由於大多數用戶代理將延遲卸載以完成 掛起的映像加載,因此可以在卸載期間提交數據。 另一種技術是在 卸載處理程序中創建一個無操作循環幾秒鐘以延遲卸載並將數據提交給服務器。

這些技術不僅代表糟糕的編碼模式,而且它們中的一些不可靠,並且導致對下一個導航的負載性能感覺不佳。

1

您可以等待在頁面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; 
+1

除非我記錯了,這將永遠爲MAX_WAIT_MS繁忙的環路,因爲環路從來沒有割讓控制返回給瀏覽器,因此請求回調永遠不能執行,並_waitForFinalHit永遠不能被更新。我沒有意識到任何解決方法。 – tomconnors