单击表单提交后在谷歌分析中跟踪事件

Question

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

相反，我更愿意使用表单在页面上执行以下 jQuery 代码：

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

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

我的恐惧有道理吗？如何确保不会错过正在跟踪的事件？

Answer 1

使用Google Analytics hitCallback

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

_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

或者作为onclickone 衬里为您的<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 - Sending Data to Google Analytics - Hit Callback（感谢 supervacuo）

更新 如果您使用定义了 ga() 函数的现代 analytics.js 代码，则可以编写如下：

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

return !window.ga;

Answer 2

只有 2 种方法可以 100% 确保所有表单提交（在启用 JS 且不阻止 GA 的用户中）如下：

• 您可以进行 AJAX 提交，然后不必担心页面更改，因此您可以在世界上所有时间让 GA 处理并加载您的新页面来代替旧页面。
• 您可以强制表单在新窗口中打开其操作，从而使主页上的所有后台进程保持工作状态，并防止您担心的竞争状况。

原因是 Google Analytics（分析）没有回调函数，因此即使延迟 10 秒，您也无法确定自己是否捕获了所有的提交.

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

Answer 3

对于那些处理 google analytics 通用并使用 hitCallback（f.x. 在验证后但在提交表单之前跟踪事件）做一些技巧的人，请记住 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

这个问题已经有几年的历史了，谷歌分析似乎提供了一种方法来做到这一点，而无需上面给出的黑客攻击。

来自google analytics docs：

除了命令数组，您还可以将函数对象推送到 _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% 的准确度，您可以坚持 1 秒的延迟。

$('#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();
}

Answer 7

这是您在gtag.js 中执行事件回调的方式，以确保在您更改页面 URL 之前发送 Google Analytics（分析）数据：

gtag('event', 'view_promotion', { myParameter: myValue, event_callback: function () {
    console.log('Done!');
    // Now submit form or change location.href
} });

来源：https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

Answer 8

好的，既然我们已经转向通用分析，我想使用 GTM 和 UA 来回答同样的问题。

---

GTM：

使用 GTM 在点击表单提交后在谷歌分析中跟踪事件相当容易。

• 在 GTM 中创建一个 UA 标签并将类型设置为event。
• 填写您想要的事件操作、类别和标签
• 创建表单提交类型的触发器。
• 设置更多条件来定位您想要的按钮

这是 OP 的最佳、最佳且易于使用的方法。

Answer 9

当跟踪每个提交至关重要时，我通常会在后端设置一个包含所有必需数据的 cookie。然后在 GTM 中设置一条规则，以根据此第一方 cookie 的存在触发标签。该标签会解析 cookie 以获得所需的值，并对它们执行任何需要的操作并删除 cookie。

一个更复杂的例子是购买跟踪。 您想在用户执行购买时触发 5 个不同的标签。竞争条件和立即重定向到一些欢迎页面使得依赖简单的“onSubmit”跟踪变得困难。所以我设置了一个包含所有购买相关数据的cookie，并且在用户最终在GTM上的任何页面上都会识别cookie，触发一个“入口点”标签，它将解析cookie，将所有值推送到dataLayer，删除cookie并然后标签本身会将事件推送到dataLayer，从而触发需要购买数据的5个标签（已经在dataLayer中）。