提交表单时使用 _trackEvent 进行 Google Analytics 事件跟踪答案

【问题标题】：Google Analytics Event tracking with _trackEvent when a form is submitted提交表单时使用 _trackEvent 进行 Google Analytics 事件跟踪
【发布时间】：2013-08-14 20:34:38
【问题描述】：

当用户单击我的注册表单上的提交按钮时，我正在尝试跟踪事件。

我的页面中有以下代码：

Google Analytics - 在我关闭 </head> 标签之前：

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-XX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

表单事件跟踪：

<input onclick="_gaq.push(['_trackEvent', 'Forms', 'Submit', 'mylist', , false]);" name="submit" id="af-submit-image-873297158" type="image" class="image img-responsive" style="background: none;" alt="Submit Form" src="img/orange_free_instant_access_button.png" tabindex="503">

每次我加载页面并单击表单时，该事件都会记录在 Analytics 的实时事件部分。这似乎工作正常，但是在过去 24 小时内共有一百多个已知注册到列表中，只有少数被记录。（总共 12 个，其中大部分是我自己提交的测试）。

我只能假设事件没有发送给 Google，但据我所知，代码看起来不错，而且我还可以看到使用 GA 调试插件通过控制台发送的事件。

我尝试通过 jQuery 调用触发事件，我尝试了各种事件，例如 onmousedown 和实际的表单提交事件，但没有。（我什至从 analytics.js 回滚到 ga.js，创建了一个全新的配置文件，因为我认为这可能是一个“测试版”问题。）

我确实怀疑该事件在页面更改位置之前没有及时触发，但是当我测试自己时，它每次都会触发。我试过 Chrome、FF 和 IE10。

在解决此问题的过程中，我在页面正文中附加了一个 onload 事件，我可以看到正在为此记录事件，即使是来自实时访问者。问题似乎集中在表单事件上。

【问题讨论】：

标签： javascript google-analytics dom-events event-tracking

【解决方案1】：

好吧，看来是时候为他人的利益回答我自己的问题了：

我进行了一些挖掘，这是由于在正确跟踪事件之前页面更改位置引起的。感谢 Joel Peterson 的一篇文章，我想出了这段代码：

jQuery(document).ready(function($){
    $('form').submit(function(event){
        //if analytics object exists
        if(window._gat){
            event.preventDefault();
            optinForm = this;
            _gaq.push(['_set','hitCallback', function(){
                                                optinForm.submit();
                                             }]);
            _gaq.push(['_trackEvent', 'Forms', 'Submit', 'hbsanewtraffic']);
        }
        //if no analytics object, service as normal
    });
});

它使用回调函数来确保先发送事件，然后提交我的表单。

【讨论】：

这不会导致循环吗？在回调中提交表单肯定会再次触发您的 $('form').submit 函数？
不，optinForm 哪个提交方法被称为引用 DOM 对象，而不是 jQuery 对象。

【解决方案2】：

替换_gaq.push(['_trackEvent', 'Forms', 'Submit', 'mylist', , false]);

下面有。

ga('send', 'event', 'category', 'action');

例子：

ga('send', 'event', 'Forms', 'Submit');

位置作为 onClick 属性的值。

【讨论】：