在Mailinkp嵌入表单上使用GTM跟踪已验证的提交

Tracking validated submissions using GTM on Mailchimp Embedded Form(在Mailinkp嵌入表单上使用GTM跟踪已验证的提交)

问题描述

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

根据最初的帖子答案，我能够使用此代码跟踪表单提交。

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

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

我已尝试在代码中的多个位置插入PrevenentDefault()，但未获得所需结果。

<!-- 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-->

推荐答案

我使用突变观察器侦听带有成功消息的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);
}

这篇关于在Mailinkp嵌入表单上使用GTM跟踪已验证的提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！