使用 jQuery 进行表单提交的 Google Analytics 事件跟踪

Question

我目前正在使用 Google Analytics 事件跟踪，可以看到一些插件浮动，但我想看看我是否可以将一些非常通用且易于使用的东西放在一起。

<script>
$("form").submit(function(){
    _gaq.push(['_trackEvent', $(this).attr('name'), 'Form Submission', 'The-form-name',, false]);
});
</script>

我想如果我有一些简单的 sn-ps 代码在我的页面上徘徊，这样我就可以跟踪表单何时提交，并通过利用表单名称和表单 ID 来查看它们何时提交。

我想我可能可以使用这种简单的方法来跟踪链接点击等，但只是想知道是否有人以前做过类似的事情，并且对于这是否是使用 Google Analytics 跟踪事件的可靠方法有任何建议。

我之所以这么看，是因为我将在网站上动态生成所有内容，并且大多数标签都会与它们相关联，所以这样我就不需要将它们直接添加到 html 中使用 onclick 事件处理程序和类似的东西。

感谢您的建议

Answer 1

您可以这样做，但您必须延迟表单提交，以便为 trackEvent 留出时间继续进行。否则表单将立即提交，从而阻止 trackEvent 完成并发送出去。这同样适用于跟踪点击次数。

这应该可行：

<script>
$("form").submit(function(e){
    e.preventDefault();//prevent the form from being submitted
    _gaq.push(['_trackEvent', $(this).attr('name'), 'Form Submission', 'The-form-name',, false]);
    $(this).off('submit');//prevent 'this' jquery submit event recursion
    setTimeout(function(){//delay the form submit
        e.currentTarget.submit();//submit form after the track event had time to complete
    }, 350);//350 ms
});
</script>

注意：虽然这可以保证您的表单将被提交，但并不能保证提交事件将被 100% 跟踪。但是 200ms 350ms 应该足以让超过 90% 的正确跟踪。 （编辑：我在考虑高延迟蜂窝网络时增加了延迟）。

在这个低延迟连接上的表单onsubmit 的特定示例中。完整的 Google Ad 跟踪器脚本最多可以发出 4 个请求，每个请求在 30-40 毫秒范围内（低于所示的 350 毫秒延迟）。从技术上讲，您只需考虑发送到 Google 的第一个请求的延迟，以便将事件保存在 Google Analytics 中。

确保 100% 跟踪事件的唯一其他方法是使用 Hit Callback，如下所述：https://stackoverflow.com/a/12461558/1647538 但是，Hit Callback 的警告是它可能会阻止表单被提交，因此这里不建议使用 Hit Callback 方法。