按鈕上的Google Analytics（分析）事件跟蹤

Question

我正在嘗試在目標網頁上使用Google Analytics（分析）事件跟蹤。 我將代碼放在頁面上的兩個位置，並附加到兩個元素，以跟蹤這些元素的點擊。

在一個地方-彈出的燈箱視頻-跟蹤效果很好。 它會立即在GA中獲取。

但是，與頁面上的另一個位置（更重要的一個）一樣，我似乎無法在GA中找到它。 該代碼以完全相同的方式實現，並且使用Chrome中的Google Analytics（分析）調試器，兩者似乎都在點擊時觸發了完全相同的信息。

在一個實例中，代碼位於元素中，而另一個位於元素中。

我已在下面附加了兩個代碼段。

任何幫助將不勝感激。

工作代碼：

 <a class="button" href="http://player.vimeo.com/video/134791294?autoplay=1" target="_blank" id="fancybox-video2" data-fancybox-type="iframe" class="fancybox.iframe" onclick="ga('send','event','played-video','clicked-play','button');">Watch the video</a> 

不正確的代碼：

 <button type="submit" onclick="ga('send','event','Signed-Up','clicked-button','Free-Trial-14-Days');">Get Started</button> 

Answer 1

最有可能發生的是<button>示例正在提交一個表單，該表單告訴瀏覽器導航到新頁面，因此要卸載現有頁面。 通常，一旦頁面開始卸載，瀏覽器就會停止執行JavaScript，因此您的ga('send', ...)單擊處理程序永遠不會完成。

這個問題的解決是攔截submit事件，使ga('send', ...)調用，然后重新觸發在發送調用的提交hitCallback 。

更新：將hitCallback用於基本功能（例如表單提交）時，重要的是要處理hitCallback發送失敗的情況。 您可以使用setTimeout進行此操作，通過成功的hitCallback調用可以清除其超時。

Answer 2

正如Philip提到的那樣，您可能需要等待事件觸發到Google Analytics（分析）中（如果您將日志保留在Chrome的“網絡”標簽中，應該會失敗）。 作為使用hitCallback的替代方法（如果Google端出現錯誤/延遲，這可能導致您的鏈接不起作用）是使用setTimeout。

簡單的jQuery示例

$(document).ready(function() {

    // Note: be more specific!
    $("button").each(function() {
        var href = $(this).attr("href");
        var target = $(this).attr("target");

        $(this).click(function(e) { 
            e.preventDefault(); 
            ga('send','event','Signed-Up','clicked-button','Free-Trial-14-Days');
            setTimeout(function() { // Wait 300ms for tag to send to GA
                window.open(href,(!target?"_self":target)); 
            },300);
        });
    });

});