0

我想跟踪每次访问者单击 AJAX 联系表单的提交按钮。我在 Google Analytics 中创建了一个事件，并计划在提交按钮代码中添加一些 javascript。

这是当前的提交按钮代码：

<button class="button" title="Send" type="submit"><span><span>Send</span></span></button>

这是我添加类别、操作等后代码的外观：

<button class="button" title="Send" type="submit" onClick="_gaq.push(['_trackEvent', 'Contact', 'Inquiry', 'Inquiry Form', 0, false]);"><span><span>Send</span></span></button>

这个对吗？有什么建议么？谢谢！

更新 - 这是我看到某种表单验证的 javascript。正如 Crayon Violent 所建议的那样，我想避免跟踪失败的表单提交。现在的问题是我应该在哪里添加 Google Analytics 代码，这样我才能只跟踪成功的表单提交？注意：为了保护网站所有者的隐私，我将域名/品牌替换为“XXXXXX”，您还会注意到这里提到了两种表格，一种是联系表格，另一种是求职者发送简历的表格。好吧，是的，我知道在同一页面上同时显示两个表单有点混乱，可能会使用户感到困惑，但这并不取决于我:(

<script type="text/javascript">
//<![CDATA[
var contactForm = new VarienForm('contactForm', true);
var contactFormCv = new VarienForm('contactFormCv', true);

jQuery(function(){

jQuery('#contactForm input, #contactForm textarea').each(function(){
jQuery(this).focus(function(){
jQuery(this).css({'background-position': '1000px 1000px'});
}).blur(function(){
if(jQuery(this).val() == ''){
jQuery(this).css({'background-position': '5px 9px'});
            }
});
});

jQuery('#contactForm').submit(function(){

jQuery('.form-column .message', form).remove();

var form = jQuery(this);
var message = jQuery('<div class="message"></div>');

jQuery('.form-column', form).append(message);

if(contactForm.validator.validate()){

jQuery(message).html('<img                  src="http://www.XXXXXX.com/skin/frontend/np/XXXXXX/images/XXXXXX/sending-contact.gif" />');

            var data = '';
            jQuery('input, select, textarea', this).each(function(){
                var name = jQuery(this).attr('name');
                var val = jQuery(this).val();

                data = data+name+'='+val+'&';

            });

            jQuery.ajax({
                type: "POST",
                url: jQuery(this).attr('action'),
                data: data,
                success: function(data){
                    if(data == 'true'){
                        jQuery('input, select, textarea', form).val('').css({'background-position': '5px 9px'});
                        jQuery(message).html('Mensaje enviado.');
                    }
                }
            });
        }
        return false;
    });

    var iframe = jQuery('<iframe></iframe>').attr({id: 'uploadcv', name: 'uploadcv', scrolling: 'none', frameborder: 0}).addClass('uploadcv').css({height: 0, width: 0, border: 0, display: 'none'});
    jQuery('#contactFormCv').attr({target: 'uploadcv'}).submit(function(){

        var form = jQuery(this);
        var message = jQuery('<div class="message"></div>');

        form.after().append(message);

        if(contactFormCv.validator.validate()){
            jQuery(message).html('<img src="http://www.XXXXXX.com/skin/frontend/np/XXXXXX/images/XXXXXX/sending-contact.gif" />');
            iframe.load(function(){
                jQuery('input, select', form).val('');
                jQuery(message).html('Mensaje enviado.');
            });
        }

    }).after().append(iframe);

});

//]]>

4

1 回答 1

3

假设您有基本的页面 GA 代码，它应该“工作”，但这里有一些关于您当前拥有它的行为的考虑......每次按下该按钮时，该代码都会触发。因此，如果您有表单验证（无论是服务器端还是客户端），并且访问者未能正确填写表单并收到错误消息......那么您只是跟踪了一个失败的表单提交。现在假设访问者再次尝试并再次失败。现在你有 2 次点击。第三次是一个魅力，他做对了，表格成功提交，你现在有 3 个点击出现在 GA 中，你不知道有多少点击成功与否。如果你不关心这个，那么你很高兴。

但作为最佳实践，大多数人实施跟踪以触发不同的值来细分成功或失败，或者仅跟踪成功的表单提交。因此，如果您在页面上进行了 javascript 表单验证以确保正确填写字段，那么在通过验证后，您确实应该将该 GA 代码放入您的验证代码中。或者，如果表单验证代码是服务器端的，则您应该输出代码并返回任何“谢谢”对话框。

编辑以响应您发布的代码：

如果没有完整的页面上下文或测试，就不可能 100%，但看起来你想把它放在这里：

success: function(data){
  if(data == 'true'){
    jQuery('input, select, textarea', form).val('').css({'background-position': '5px 9px'});
    jQuery(message).html('Mensaje enviado.');
    _gaq.push(['_trackEvent', 'Contact', 'Inquiry', 'Inquiry Form', 0, false]);
  }
}
于 2013-02-12T19:35:40.517 回答