Skip to main content
 首页 » 编程设计

jquery之在提交表单之前无法使用 Google Analytics 事件跟踪功能

2025年05月04日90unruledboy

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

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

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

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

编辑:

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

请您参考如下方法:

您可以连接到表单的提交监听器,阻止默认提交事件,触发 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 Example .

我希望这有帮助!

更新

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

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

更新 fiddle here .