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