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

You can trigger a call to your google analytics or GTM function like this,

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

This will trigger a call to track form submissions. Do validations(if required) before triggering the event.

If you need to submit form only if the form is validated, then stop the form submission using e.preventDefault(); inside submit function.

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

跟踪MailChimp嵌入表单上的提交

2 个答案: