[Javascript] 在点击表单提交后,在Google分析中跟踪事件


Answers

使用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

或者为您的<input type="submit">元素onclick一行:

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)

更新如果您使用定义了ga()函数的现代analytics.js代码,可以将其编写如下:

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

return !window.ga;
Question

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

相反,我宁愿在页面上用下面的jQuery代码来做一些事情:

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

我担心的问题是,我会错过一些正在跟踪的事件,因为在调用JavaScript之后,浏览器即将提交表单并转到另一个网页。 如果utm.gif跟踪图像未及时加载,我错过了事件:(。

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




当跟踪每个提交至关重要时,我通常会在后端设置一个包含所有必需数据的Cookie。 然后在GTM中设置一个规则,根据这个第一方cookie的存在发射标签。 该标签解析cookie所需的值并执行所需的任何操作并删除co​​okie。

一个更复杂的例子是购买追踪。 您想在用户进行购买时触发5个不同的标签。 竞争条件和立即重定向到一些欢迎页面使得很难依靠简单的“onSubmit”跟踪。 因此,我设置了一个包含所有与购买相关的数据的cookie,并且在用户最终在GTM上的任何页面上都会识别该cookie,启动将解析cookie的“入口点”标签,将所有值推送到dataLayer,移除cookie以及那么标签本身会将事件推送到dataLayer,从而触发需要购买数据的5个标签(已经在dataLayer中)。




当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();
}



这个问题现在已经过去几年了,似乎谷歌分析已经提供了一种方法来实现这一点,而不会出现上面所述的黑客行为。

谷歌分析文档

除了命令数组之外,您还可以将函数对象推送到_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();
        }
    );
});