Question

我希望每次访问者点击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);

});

//]] GT;

Answer 1

假设您有基本的页面上的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]);
  }
}

这是在Google Analytics中跟踪AJAX表单提交的正确代码吗？

1 个答案: