使用 jQuery 进行表单提交的 Google Analytics 事件跟踪 [英] Using jQuery for Google Analytics event tracking of Form Submits

问题描述

我目前正在使用 Google Analytics(分析)事件跟踪，可以看到一些插件随处可见，但我想看看我是否可以将一些非常通用且易于使用的东西放在一起.

Im currently playing around with Google Analytics event tracking and can see a few plugins floating around, but im trying to see if i can put something together that would be very generic and simple to use.

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

我想如果我的页面上有一些简单的代码片段，我可以通过这种方式跟踪表单何时提交，并通过利用表单名称和表单 ID，我可以看到它们何时被提交.

I figure if i have a few of these simple snippets of code lingering around on my page this way i can track when a form is submitted and by leveraging form names and form id's i can see when they are submitted.

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

I figure i can probably use this simple method to track link clicks etc but was just wondering whether anyone has done anything like this before and would have any suggestions as to whether this is a reliable method for tracking events with Google Analytics.

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

The reason why im looking at doing it like this is because I will have everything generated dynamically on the site and the majority of tags will have id's associated to them, so this way i wont need to add them directly into the html by using the onclick event handlers and stuff like that.

感谢您的建议

推荐答案

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

You can do it this way but you will have to delay the form submit in order to leave time for the trackEvent to proceed. Or else the form will be submitted right away, preventing the trackEvent from completing and being sent out. The same applies for tracking clicks.

这应该有效:

<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% 以上.(考虑到高延迟蜂窝网络，我增加了延迟.

NB: While this guarantees that your form will be submitted, it does not guarantee that the submit event will be tracked 100% of the time. But the 200ms 350ms should be good enough to get over 90% properly tracked. ( I bumped the delay with considerations for high latency cellular networks).

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

In this particular example of a form onsubmit on a low-latency connection. The most a full Google Ad tracker script can make is 4 requests, each in the 30-40 ms range (below the 350ms delay indicated). And technically, you only have to account for the latency of the first request being sent to reach Google, for the event to be saved in Google Analytics.

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

The only other way to insure 100% that the event got tracked, is to use the Hit Callback as described at: https://stackoverflow.com/a/12461558/1647538 However, the caveat of the Hit Callback is that it could prevent the form from being submitted, thus the Hit Callback method is not really advisable here.

这篇关于使用 jQuery 进行表单提交的 Google Analytics 事件跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！