点击表单提交后，在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 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

或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 - Sending Data to Google Analytics - Hit Callback（感谢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

对于那些经常使用google analytics并使用hitCallback进行处理的人（在验证之后但在提交表单之前跟踪fx跟踪事件）请记住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中执行事件回调的方式，以确保在您更改网页网址之前发送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以获取所需的值并执行它们所需的任何操作并删除co​​okie。

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