按钮上的谷歌分析事件跟踪

Google Analytics Event Tracking on Button

本文关键字：事件 跟踪 谷歌 按钮      更新时间：2023-09-26

我试图在登录页上使用Google Analytics事件跟踪。我把代码放在页面的两个地方，附在两个元素上，跟踪这些元素上的点击情况。

在一个弹出的灯箱视频中，跟踪效果非常好。它在GA中立即开始。

然而，对于页面上的另一个位置(更重要的一个(，我似乎无法在GA中找到它。代码以完全相同的方式实现，并且在Chrome中使用谷歌分析调试器，两者似乎在点击时都会发出完全相同的信息。

在一个实例中，代码位于元素中的另一个中。

我在下面附上了两段代码。

任何帮助都将不胜感激。

工作代码：

<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>

正如Philip所提到的，你可能需要等待事件进入Google Analytics(如果你在Chrome网络选项卡中保留日志，你应该会看到它失败(。使用hitCallback(如果谷歌端出现错误/延迟，可能会导致链接无法工作(的另一种选择是使用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);
        });
    });
});

最有可能发生的情况是，<button>示例正在提交一个表单，该表单告诉浏览器导航到一个新页面，因此正在卸载现有页面。通常，一旦页面开始卸载，浏览器就会停止执行JavaScript，因此ga('send', ...)单击处理程序永远不会完成。

解决方案是截获submit事件，进行ga('send', ...)调用，然后在发送调用的hitCallback中重新触发提交。

更新：在将hitCallback用于表单提交等基本功能时，重要的是要处理命中发送失败的情况。您可以对setTimeout执行此操作，其超时将被成功的hitCallback调用清除。

相关文章：