0

我正在尝试使用 Google Analytics 跟踪提交按钮。但问题是提交太快，所以 GA 不跟踪事件。

完成这项工作的正确方法是什么？我正在使用 JSF 2。

$("#frmButtons\\:btnExportWord").click(function () {
    _gaq.push(['_trackEvent', 'Decode', 'Decode copying', 'Export to Word']);
});

我尝试了 GA 的hitcallback功能，但没有成功。我认为这个功能没有很好的记录。

编辑：

我意识到hitcallback函数不是我需要的，一旦按钮将文件发送给用户下载，所以，不要发生导航。

4

3 回答 3

1

您可以连接到表单的提交侦听器，阻止默认提交事件，触发 Google Analytics 代码，然后手动提交表单，如下所示：

$('#formID').submit(function(e){
    var self = this;

    e.preventDefault(); // Prevent Default Submit Event

    _gaq.push(['_trackEvent', 'Decode', 'Decode copying', 'Export to Word']);

    self.submit(); // Manually Trigger Submit
});

这是一个 JSFiddle示例。

我希望这有帮助！

更新

如果您的表单有多个按钮并且您只想跟踪特定的按钮，请考虑将一个类应用于您希望跟踪的按钮，然后在提交时检查它，如下所示：

HTML：

<form id="theForm" action="#" method="post">
    <input type="text" />
    <input type="submit" value="Track Submit" class="track" />
    <input type="submit" value="Submit" />
</form>

JS：

// Identify Clicked Submit Button
$('#theForm input[type=submit]').on('click', function(){
    // Reset Previous Data
    $('#theForm input[type=submit]').data('clicked', 'false');

    // Set Button as Clicked
    $(this).data('clicked', 'true');
});

// Hook into Form Submit
$('#theForm').submit(function(e){
    var self = this;

    // Prevent Default Submit
    e.preventDefault();

    // Track ONLY if Clicked Button has Class of 'track'
    $('input[type=submit]', this).each(function(){
        if ($(this).data('clicked') == 'true' && $(this).hasClass('track') === true){
            alert('TRACK DATA');
        }
    });

    // Manually Submit Form
    self.submit();
});

在这里更新了小提琴。

于 2013-07-23T03:07:19.710 回答
1

通常，在_gaq填充数组并将信标发送给 Google 之前，页面可能会发生变化。为了解决这个问题，您还可以考虑使用 JavaScript 超时，如下例所示：

setTimeout(function() {                                                                         
// track now after 1000 ms
_gaq.push();                                                                                                                        
}, 1000);
于 2013-07-23T15:56:44.287 回答
0

合并@dSquared 和@crmpicco 的先前答案，我使用以下方法完成了这项工作：

$("#frmButtons\\:btnExportWord").click(function (e) {
  //track the event
  _gaq.push(['_trackEvent', 'Decode', 'Decode copying', 'Export to Word']);

  var button = $(this);
  //create a delay and call the same click
  if (button.data('tracked') != 'true') {
      e.preventDefault(); //consume event if not tracked yet
      setTimeout( function(){
          button.data('tracked', 'true'); 
          button.click(); //call again the submit
      }, 300);//enough time to track the event
  } else {
      //reset the flag
      button.data('tracked', 'false');
      //let form being submited once the event is already tracked
  }
});

我真的不喜欢这个解决方案，一旦我需要消费事件，然后递归调用它，但我不是 JS 专家，我还没有找到在任何浏览器中工作的另一个解决方案。JSF 生成了一些代码，再次调用事件是在服务器端获取它的简单方法。

谢谢各位帮忙！

于 2013-07-24T01:36:05.100 回答