在 Mailchimp Embedded Form 上使用 GTM 跟踪经过验证的提交

Question

我正在使用 GTM 来跟踪对嵌入式 Mailchimp 表单的提交。相关帖子在这里：Tracking submissions on MailChimp embedded form

根据原始帖子的答案，我可以使用此代码来跟踪表单提交。

$('form#mc-embedded-subscribe-form').submit(function(e) {
   dataLayer.push({'event':'formSubmit'});
   return true;
});

但是现在，提交按钮的所有点击都被作为表单提交进行跟踪，即使表单没有提交也是如此。答案包括添加e.preventDefault(); 以防止跟踪虚假表单提交的提示。有人可以告诉我需要在哪里添加 preventDefault()，或者如果有其他方法，我可以如何防止跟踪错误的表单提交。

我已尝试在代码中的多个位置插入 preventDefault()，但都没有得到想要的结果。

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
    <label for="mce-LNAME">Last Name </label>
    <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c46d540e26068777472a049e9_3aa4dd9218" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';...fnames[13]='PAGEURL';ftypes[13]='text';}(jQuery));var $mcj = jQuery.noConflict(true);$('form#mc-embedded-subscribe-form').submit(function(e){dataLayer.push({'event':'formSubmit'});return true;});</script>
<!--End mc_embed_signup-->

Answer 1

e.preventDefault() 函数只是阻止表单提交，它不做任何检查验证，并且在它之后没有任何东西，什么都不会发生。

提到的e.preventDefault() 解决方案可帮助您阻止触发器运行，然后允许您在 Google 跟踪代码管理器中实际触发事件之前验证表单输入。

输入的验证取决于表单中需要哪些输入，因此这必须根据您创建的每个表单而有所不同。但是您可以使用一个通用函数来检查所有具有“必需”类的输入，如下所示：

// Get all required inputs
var requiredFields = document.querySelectorAll('input.required');

// Create function to validate inputs
function validateInputs(callback){

  // Set formstatus to valid
  var formOkay = true;

  // Check each field
  requiredFields.forEach(i => {

    // Check error state
    if ((i.value == "") || ((i.type === 'checkbox') && (i.checked == false))) {
      // Form was invalid
      console.log('Form was invalid');
      formOkay = false;
    }
  })
  
  // Return formStatus;
  callback(formOK ? true : false);
}

现在您可以在发送 Google 跟踪代码管理器触发器之前使用此函数验证表单，如下所示：

document.getElementById('mc-embedded-subscribe-form').addEventListener('submit', e => {
  e.preventDefault();
  validateInputs( res => {
    // check res
    if (res == true){
      dataLayer.push({'event':'formSubmit'});
    }
  })
})

注意： 此解决方案将检查表单输入是否有效，而不是用户是否实际订阅了列表。最好的方法是使用 ajax 订阅用户，然后在回调返回成功状态时触发 GTM-tag。

Answer 2

我使用了一个变异观察者来监听 div 的变化以及成功消息，然后可以将一个事件推送到 dataLayer

// The element with success message
const successElement = document.getElementById('mce-success-response');

if(successElement){                   
    const mutationConfig = { attributes: true };

    const callback = function(mutationsList, observer) {
        for(const mutation of mutationsList) {
            if (mutation.type === 'attributes' 
                && mutation.attributeName == 'style'
                && successElement.style.display === '') {
                    window.dataLayer.push({
                    "event" : "my-super-hot-lead" 
                    })
            }
        }
    };

    const observer = new MutationObserver(callback);
    observer.observe(successElement, mutationConfig);
}