• Resolved derekduchesne

    (@derekduchesne)


    Hello,

    I’m having an issue with event tracking in my form. I have three landing pages which are all using the same form. One of those landing pages contains the form repeated twice. I’ve noticed that the event tracking is only working on the landing page where the form is repeated twice.

    This is my code defined in the form mark-up:

    <p>
      <label class="form-label">Email address:</label>
      <br>
    <input class="form-input" type="email" name="EMAIL" required />
    </p>
    <p>
    <label class="form-label">First Name</label>
      <br>
        <input class="form-input" type="text" name="FNAME">
    </p>
    <p style="text-align: center;">
    <input class="form-submit-button" type="submit" value="Subscribe for Free!" />
    </p>
    
    <script type="text/javascript">
    // started
    mc4wp.forms.on('started', function(form) {
       console.log('started');
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_started' });
    });
     
    // submitted
    mc4wp.forms.on('submitted', function(form) {
       console.log('submitted');
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_submitted' });
    });
    
    // error
    mc4wp.forms.on('error', function(form) {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_error' });
    });
     
    // success
    mc4wp.forms.on('success', function(form) {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_success' });
    });
     
    // subscribed
    mc4wp.forms.on('subscribed', function(form) {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_subscribed' });
    });
    
      // unsubscribed
    mc4wp.forms.on('unsubscribed', function(form) {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_unsubscribed' });
    });
     
     
    // updated_subscriber
    mc4wp.forms.on('updated_subscriber', function(form) {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({ 'event' : 'mailchimp_form_updated_subscriber' });
    });
    </script>

    On the landing page where the form is placed once, we’re getting successful form submissions, but we’re not seeing the mailchimp_form_ events in Google Analytics.

    On the landing page where the form is placed twice, we’re getting successful form submissions, and we’re seeing the mailchimp_form_ events in Google Analytics.

    I’m wondering if placing the above JavaScript code in the form mark-up is what’s causing these issues. The form mark-up was the recommended location on this knowledge base page: https://www.mc4wp.com/kb/form-events-google-analytics-tracking/

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Lap

    (@lapzor)

    If you added the javascript code directly to the form, it would be executed twice if the same form is used twice on one page.
    Maybe you can add the code some other way, eg via a Code snippets plugin?

    Ii also recommend you configure it to execute this code only after the page is loaded, that will likely solve the issue you’re having.
    eg with

    document.addEventListener('DOMContentLoaded', function () {
    // yourr code here
    }, false);

    Hope that helps. If you have any questions, please let me know!

    Thread Starter derekduchesne

    (@derekduchesne)

    Your suggestion worked. Thanks so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘GTM Event Tracking from Form Mark-up’ is closed to new replies.