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

时间:2013-10-19 01:23:10

标签: jquery google-analytics

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

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

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

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

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

感谢任何建议

1 个答案:

答案 0 :(得分:4)

您可以这样做,但是您必须延迟表单提交,以便为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广告跟踪器脚本可以提供4个请求,每个请求的范围为30-40毫秒(低于指示的350毫秒延迟)。从技术上讲,您只需考虑发送到Google的第一个请求的延迟,以便将事件保存在Google Analytics中。 Network tab in Chromium developer tools

确保100%跟踪事件的唯一另一种方法是使用Hit Callback,如下所述:https://stackoverflow.com/a/12461558/1647538 但是,Hit Callback的警告是它可以阻止提交表单,因此Hit Callback方法在这里并不可行。