点击表单提交后,在Google Analytics中跟踪事件

Question

当有人填写表单并点击提交时,我需要跟踪Google Analytics中的事件.出现的结果页面是标准的仪表板类型页面,因此为了跟踪该页面上的事件,我必须在URL中传递事件,然后读取URL并输出谷歌分析事件跟踪javascript代码基于它.这是一个经常被加入书签的页面和重新加载,点击回来的页面等等.所以我真的不会在URL中传递跟踪事件并搞砸了分析.

相反,我更愿意在页面上使用以下形式执行以下jQuery代码:

$('#form_id').submit(function() {
  _gaq.push('_trackEvent', 'my category', 'my action');
});

我担心上面的问题是,我将错过一些被跟踪的事件,因为在调用javascript后,浏览器将立即提交表单并转到另一个网页.如果没有及时加载utm.gif跟踪图像,我会错过这个事件:(.

我的恐惧是否合理？我如何确保不会错过被跟踪的事件？

Answer 1

使用Google AnalyticshitCallback

您可以在跟踪器对象上指定自定义回调函数.

_gaq.push(['_set', 'hitCallback', function(){}]);

在"命中成功发送"后调用回调.

如果要跟踪提交按钮上的单击并在之后发送表单,则可以使用以下代码(使用jQuery)进行事件:

var _this = this; // The form input element that was just clicked
_gaq.push(['_set','hitCallback',function() {
    $(_this).parents('form').first().submit(); // Submit underlying form
}]);
_gaq.push(['_trackEvent', 'My category', 'My action']);
return !window._gat; // Ensure that the event is bubbled if GA is not loaded

或者作为元素的onclick一个衬垫<input type="submit">:

onclick="var _this=this;_gaq.push(['_set','hitCallback',function(){$(_this).parents('form').first().submit();}]);_gaq.push(['_trackEvent','My category','My action']);return !window._gat;"

它跟踪事件的作用是什么My category/My action,使用jQuery查找刚刚推送的提交按钮的底层表单元素,然后提交整个表单.

请参阅:Google Analytics(分析) - 向Google Analytics发送数据 - 点击回拨(感谢supervacuo)

更新 如果您使用现代analytics.js代码并定义了ga()函数,则可以按如下方式编写:

var _this = this;
ga('send', 'event', 'My category', 'My action', {
    'hitCallback': function() {
        $(_this).parents('form').first().submit();
    }
});

return !window.ga;

Answer 2

只有两种方法可以确保100%所有形式的提交(在启用JS并且不阻止GA的用户中)如下:

• 您可以进行AJAX提交,然后不必担心页面更改,因此全世界都有GA处理和您的新页面加载以代替旧页面.
• 您可以强制表单在新窗口中打开其操作,从而使主页上的所有后台进程都工作,并防止您担心的竞争条件.

这样做的原因是Google Analytics没有回调函数,因此您无法确定是否正在捕获所有提交,即使您放置了10秒的延迟.

或者,您可以将GET值传递给提交的页面,并在该页面上设置值的检查.如果设置了,则可以发送trackEvent调用.

Answer 3

对于那些处理谷歌分析普及并使用hitCallback(验证后但在提交表单之前跟踪事件)的人,请记住google-analytics.js可能会被阻止,但ga函数仍将被定义,所以提交不会发生.

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
  }
})
return !window.ga;

可以通过验证进行修复,检查是否加载了ga

ga('send', 'pageview', event, {
  'hitCallback': function() {
    _this.submit();
   }
})
return !(ga.hasOwnProperty('loaded') && ga.loaded === true)

Answer 4

这个问题现在已经有几年了,似乎谷歌分析提供了一种方法,可以在没有上面给出的黑客的情况下实现这一目标.

来自谷歌分析文档:

除了命令数组,您还可以将函数对象推送到_gaq队列.这些函数可以包含任意JavaScript和类似命令数组,它们按照它们被推送到_gaq的顺序执行.

您可以将此命令与多命令推送相结合,以确保它们按顺序添加(并保存呼叫).

$('input[type="submit"]').click(function(e) {
    // Prevent the form being submitted just yet
    e.preventDefault();

    // Keep a reference to this dom element for the callback
    var _this = this;

    _gaq.push(
        // Queue the tracking event
        ['_trackEvent', 'Your event', 'Your action'],
        // Queue the callback function immediately after.
        // This will execute in order.
        function() {
            // Submit the parent form
            $(_this).parents('form').submit();
        }
    );
});

Answer 5

如果你对100%的准确度不太感兴趣,你可以坚持一秒钟的延迟.

$('#form_id').submit(function(e) {
  var form = this;
  e.preventDefault(); // disable the default submit action

  _gaq.push('_trackEvent', 'my category', 'my action');

  $(':input', this).attr('disabled', true); // disable all elements in the form, to avoid multiple clicks

  setTimeout(function() { // after 1 second, submit the form
    form.submit();
  }, 1000);
});

Answer 6

虽然hitCallback解决方案很好,但我更喜欢设置cookie并从下一页触发事件.通过这种方式,GA中的失败不会阻止我的网站:

// Function to set the event to be tracked:
function setDelayedEvent(category, action, label, value) {
  document.cookie='ev='+escape(category)+'!'+escape(action)+'!'+escape(label)+'!'+value
      +'; path=/; expires='+new Date(new Date().getTime()+60000).toUTCString();
}

// Code run in every page, in case the previous page left an event to be tracked:
var formErrorCount= formErrorCount || 0;
var ev= document.cookie.match('(?:;\\s*|^)ev=([^!]*)!([^!]*)!([^!]+)!([^!]+)(?:;|\s*$)');
if (ev && ev.length>2) {
  _gaq.push(['_trackEvent', unescape(ev[1]), unescape(ev[2]),
     unescape(ev[3]), parseInt(ev[4])]);
  document.cookie='ev=; path=/; expires='+new Date(new Date().getTime()-1000).toUTCString();
}