在表单提交上触发谷歌分析事件

时间:2013-10-21 15:02:24

标签: javascript jquery onclick google-analytics analytics

我正在尝试将分析事件跟踪添加到onclick事件中,以便在表单上提交输入。

我尝试了多个不同的示例,并引用了几个不同的SO帖子来达到这一点。我可以让onclick提交表单或触发跟踪事件,但不能同时触发。

第一个例子:(将表单+日志提交到控制台,但不会触发事件)

<!-- Analytics tracking code -->

<form action="test.php" id="form" method="post">

    <input type="text" name="name" id="name">

    <!-- Submits form + logs to console but doesn't fire event -->

    <input type="submit" name="submit" value="Submit" onclick="
        var _this = this; 
        _gaq.push(
            ['_trackEvent', 'Forms', 'Submit', 'Home Contact'], 
            function() {
                console.log('submitting'); 
                $(_this).parents('form').submit();
            }
        );
    ">

</form>

第二个例子:(将事件+日志触发到控制台但不提交表单)

<!-- Analytics tracking code -->

<form action="test.php" id="form" method="post">

    <input type="text" name="name" id="name">

    <!-- Fires event + logs to console but doesn't submit form -->

    <input type="submit" name="submit" value="Submit" onclick="
        var _this = this;
        _gaq.push(['_set','hitCallback',function(){
            console.log('submitting');
            $(_this).parents('form').submit();
        }]);
        _gaq.push(
            ['_trackEvent','My category','My action']
        );
        return !window._gaq;
    ">

</form>

我还发现,如果我将return false添加到第一个示例的onclick事件的末尾,它将触发分析事件跟踪但不提交表单。

2 个答案:

答案 0 :(得分:7)

(这确实需要成为常见问题解答...)

Google Analytics(分析)通过从分析服务器请求图像来记录数据,并将跟踪数据作为图像请求的参数。如果在_trackEvent_pageView之后立即在当前窗口中呈现新页面,则可以取消图像请求,并且不会记录任何数据。

通常的模式是在加载新页面或提交表单之前添加一小段延迟。

尝试

<input type="submit" name="submit" value="Submit" onclick="
  var _this = this; 
  _gaq.push(['_trackEvent', 'Forms', 'Submit', 'Home Contact']);
  setTimeout(function() {$(_this).parents('form').submit()}, 150);
  return false;"
>

我的偏好是绑定到表单本身的jQuery提交事件,比如

$('#form').submit(function(e){
  e.preventDefault();
  _gaq.push(['_trackEvent', 'Forms', 'Submit', 'Home Contact']);
  var form = this;
  setTimeout(function(){ form.submit()}, 150);
});

答案 1 :(得分:0)

可以使用新的analytics.js(通用分析)。

链接: