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


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)

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

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

return !window.ga;
Question

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

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

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

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

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




好的,因为我们已经转向通用分析,我想用GTM和UA回答相同问题。

GTM

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

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

这是OP的最佳,最佳和最简单的方法。




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





Links