跟踪 MailChimp 嵌入式表单上的提交

Question

我正在尝试跟踪嵌入式 MailChimp 表单上的提交。问题是提交表单时没有触发表单提交事件。我认为这与用于验证输入的 JQuery 有关。这是表单的嵌入代码：

<!-- 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://carilionclinic.us16.list-manage.com/subscribe/post?u=#####;id=######" 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 to our mailing list</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-MMERGE1">first name </label>
    <input type="text" value="" name="MMERGE1" class="" id="mce-MMERGE1">
</div>
<div class="mc-field-group">
    <label for="mce-MMERGE2">last name </label>
    <input type="text" value="" name="MMERGE2" class="" id="mce-MMERGE2">
</div>
<div class="mc-field-group">
    <label for="mce-MMERGE3">postal code </label>
    <input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3">
</div>
<div class="mc-field-group">
    <label for="mce-MMERGE4">Salutation </label>
    <input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4">
</div>
<div class="mc-field-group">
    <label for="mce-MMERGE5">Organization </label>
    <input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5">
</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_137cf6679807eccaef7f6f9d1_ae2345011d" 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]='MMERGE1';ftypes[1]='text';fnames[2]='MMERGE2';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';fnames[4]='MMERGE4';ftypes[4]='text';fnames[5]='MMERGE5';ftypes[5]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

如果您检查 mc-validate.js，您会发现该表单使用了 JQuery Validation 插件。我相信这可能是问题所在？我总是可以跟踪提交按钮上的点击，但这肯定不如表单提交准确。我可以使用其他方法吗？

Answer 1

您可以像这样触发对您的谷歌分析或 GTM 函数的调用，

$('form#mc-embedded-subscribe-form').submit(function(e) {
   //Your event goes here ex. dataLayer.push({'event':'eventname'});
   return true;
});

这将触发跟踪表单提交的调用。在触发事件之前进行验证（如果需要）。

如果您需要在表单验证后才提交表单，则在提交函数中使用e.preventDefault(); 停止表单提交。

Answer 2

这个问题是，如果机器人或某人点击订阅按钮，但没有实际订阅，它仍然会触发您的事件。我最终做的是观察 Mailchimp 表单给出的成功响应，而不是像 here 那样做所有的验证工作。

  (function() {
    var eventName = 'DOMNodeInserted'; // Look for changes in the element
    var el = document.querySelector('#mce-success-response') || document;
    var useCapture = true;
    
    el.addEventListener(eventName, function( event ){
      window.dataLayer.push({
        "event" : "mailchimpSubmission" // push custom event to the data layer.
      })
    } , useCapture);
  })();