Support » Plugin: MailChimp for WordPress » Unable to track form Signup and Success

  • Resolved david44pixel

    (@david44pixel)


    Hi.

    I am using MailChimp for WP to create a form on my website:

    https://44reports.com/

    It works great and I am able to collect signups.

    My problem is that I would like to track form successes and/or signups.
    I am able to track form errors and starts following the documentation from these articles:
    https://kb.mc4wp.com/javascript-form-events/
    https://kb.mc4wp.com/form-events-google-analytics-tracking/

    However no event seems to fire on a success.

    This is my form code:

    <h2>
      Bliv alfa-tester
    </h2> 	
    	<div class="input-icon-wrapper">
          <div class="input-icon">
            <i class="fa fa-user" aria-hidden="true"></i>
          </div>
          <input type="text" name="NAME" placeholder="navn" required>
          <!--<span class="help-tip">Vi vil gerne lære dig at kende.</span>-->
    	</div>
    
    	<div class="input-icon-wrapper">
          <div class="input-icon">
            <i class="fa fa-envelope" aria-hidden="true"></i>
          </div>
          <input type="email" name="EMAIL" placeholder="e-mail" required />
          <!--<span class="help-tip">Vi vil gerne lære dig at kende.</span>-->
    	</div>
    
    	<div class="input-icon-wrapper">
          <div class="input-icon">
            <i class="fa fa-building" aria-hidden="true"></i>
          </div>
          <input type="text" name="WEBSITE" placeholder="website" required>
          <!--<span class="help-tip">Vi vil gerne lære dig at kende.</span>-->
    	</div>
    
    	<div class="input-submit-wrapper">
          <div class="input-submit-icon">
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
          <input class="main-cta button-cta" type="submit" value="Bliv alfa-tester nu" />
    	</div>
    
    <script type="text/javascript">
    mc4wp.forms.on('success', function(form) {
    	dataLayer.push({'event': 'form-success',
                       'eventLabel': 'frontpage-hero-form'
                       });
    });
    mc4wp.forms.on('started', function(form) {
      	dataLayer.push({'event': 'form-started',
                       'eventLabel': 'frontpage-hero-form'
                       });
    });
    mc4wp.forms.on('error', function(form) {
    	dataLayer.push({'event': 'form-submit-error',
                       'eventLabel': 'frontpage-hero-form'
                       });
    });
    </script>
    <script type="text/javascript">
    mc4wp.forms.on('subscribed', function(form) {
    	// analytics.js
    	ga && ga('send', 'event', 'Forms', 'Sign-up', 'Name: ' + form.name + 'ID: ' + form.id);
    });
    </script>

    Thank you in advance

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Danny van Kooten

    (@dvankooten)

    Hi David,

    This seems to be because you have the JS script inside your form but are then hiding (not printing) these form fields when the form is successfully submitted. This means that the JavaScript success event listener is not added for the request after which is should actually fire.

    We’re going to look into providing a fix/workaround for this but until then, I recommend adding your JavaScript somewhere near the footer of your website, eg via a plugin like Header & Footer Scripts.

    Cheers!

    Thank you for the quick reply! 🙂

    I will try your workaround and see how it goes.

    Hello. Just wanted to let you know that moving the script to the footer worked.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.