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用于表单提交等基本功能时，处理命中无法发送的情况非常重要。您可以使用setTimeout，其超时由成功的hitCallback调用清除。

Answer 2

正如菲利普所说，您可能需要等待事件发布到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);
        });
    });

});

按钮

2 个答案: