Marketo Form Conversions in Google Tag  Manager

Tracking conversions when a Marketo form is submitted on your website is a common step in ad optimizations. The following approach is what I’ve used with clients to track conversions when a Marketo form submission successfully occurs on their website. The events provided by the script can be used to trigger conversion pixels in any ad platform, it’s completely flexible. I’ve used the approach to successfully submit conversions with Google Ads, Bing Ads, Facebook Pixel, LinkedIn Insights, TikTok, Snapchat, Reddit, Pinterest and more.

Marketo Form Events Tag

Add a new tag to your Google Tag Manager container named Marketo Form Events and paste the following into the HTML input field:

<script>
/**
 * Marketo Form Events for GTM
 */
(function marketoFormEvents(MktoForms2) {
  // Marketo forms2.js not loaded
  if (!MktoForms2) return;

  MktoForms2.whenReady(function ready(form) {
    var formId = form.getId();

    // Marketo Form Ready
    window.dataLayer.push({
      event: "Marketo Form Ready",
      form: {
        id: formId,
        values: form.getValues(),
      },
    });

    // Marketo Form Validate
    form.onValidate(function validate(valid) {
      window.dataLayer.push({
        event: "Marketo Form Validate",
        form: {
          id: formId,
          values: form.getValues(),
          valid: valid,
        },
      });
    });

    // Marketo Form Submit
    form.onSubmit(function submit(theForm) {
      var button = form.getFormElem().find('[type="submit"]');
      window.dataLayer.push({
        event: "Marketo Form Submit",
        form: {
          id: formId,
          values: form.getValues(),
          button: {
            classes: button.attr("class"),
            text: button.text(),
          },
        },
      });
    });

    // Marketo Form Success
    form.onSuccess(function success(values, redirectTo) {
      window.dataLayer.push({
        event: "Marketo Form Success",
        form: {
          id: formId,
          values: values,
          redirect: redirectTo,
        },
      });
    });
  });
})(window.MktoForms2);
</script>

Under Triggering set the built-in option Page View – Window Loaded as the trigger.

How it Works

To work with Marketo form events in Google Tag Manager, a custom JavaScript tag is needed. This tag will send custom events to GTM’s dataLayer when certain things happen within a Marketo form, such as:

• When the form first loads
• When validation happens
• Whether validation was successful or not
• When a form was submitted
• When a form was successfully received and a record was stored in Marketo

The script use methods provided by the Marketo Forms API to capture events automatically, and it parses and structures associated data that’s commonly needed for conversion tracking in analytics and adtech software. The structured data is sent right to GTM’sdataLayer, making it very easy to work with and send onward to other integrated systems. Once loaded, it will provide you with the following events to work with when a Marketo form exists on a page with GTM loaded.

Marketo Form Ready

Fired exactly once for each form on the page that becomes “ready”. Readiness means that the form exists, has been initially rendered and had its initial callbacks called.

dataLayer.push({
  event: "Marketo Form Ready",
  form: {
    id: 1571,
    values: {
      FirstName: "Kevin",
      LastName: "Leary",
      Title: "Web Developer",
      Company: "Kevinleary.net",
      Country: "US",
      Email: "[email protected]",
      Phone: "6178179012",
      Industry: "Internet",
      LeadSource: "Request Demo",
      munchkinId: "999-999-999",
    }
  },
})

Marketo Form Validate

Fired anytime validation is triggered. The form.valid property will be true or false based on whether the form is valid.

dataLayer.push({
  event: "Marketo Form Validate",
  form: {
    id: 1571,
    valid: true,
    values: {
      FirstName: "Kevin",
      LastName: "Leary",
      Title: "Web Developer",
      Company: "Kevinleary.net",
      Country: "US",
      Email: "[email protected]",
      Phone: "6178179012",
      Industry: "Internet",
      LeadSource: "Request Demo",
      munchkinId: "999-999-999",
    }
  },
})

Marketo Form Submit

Fired when the form is submitted, before the success/failure of the request is known.

dataLayer.push({
  event: "Marketo Form Submit",
  form: {
    id: 1571,
    button: {
      classes: "btn btn-primary",
      text: "Request a Demo"
    },
    values: {
      FirstName: "Kevin",
      LastName: "Leary",
      Title: "Web Developer",
      Company: "Kevinleary.net",
      Country: "US",
      Email: "[email protected]",
      Phone: "6178179012",
      Industry: "Internet",
      LeadSource: "Request Demo",
      munchkinId: "999-999-999",
    }
  },
})

Marketo Form Success

dataLayer.push({
  event: "Marketo Form Success",
  form: {
    id: 1571,
    redirect: 'https://www.kevinleary.net/thanks/'
    values: {
      FirstName: "Kevin",
      LastName: "Leary",
      Title: "Web Developer",
      Company: "Kevinleary.net",
      Country: "US",
      Email: "[email protected]",
      Phone: "6178179012",
      Industry: "Internet",
      LeadSource: "Request Demo",
      munchkinId: "999-999-999",
    }
  },
})

Triggers for Custom Events

Once the script has been added to your container, you can create custom triggers for the four Marketo events that are available with the following steps:

1. Add a new Trigger
2. Name it Marketo Form Success
3. Choose Custom Event as the trigger type
4. Set Event name to Marketo Form Success
5. Save

You can use this trigger to fire other tags wherever you like, and the same process can be followed for any of the events that now exist:

1. Marketo Form Ready
2. Marketo Form Validate
3. Marketo Form Submit
4. Marketo Form Success

On a business website, I’d recommend additional configuration to only fire the events when loaded from your live website. This avoids incorrect analytics data from developer staging and test URL’s, and also avoid incorrect optimization from the same by ad networks and platforms.

1. Set the trigger fires on option to be Some Custom Events
2. Choose Page URL from the first dropdown
3. Choose starts with from the second dropdown
4. Enter https://yourwebsite.com into the last field

This will avoid any misfires of the tag attached to these events when the GTM container is loaded on a non-production (or not live) URL. This is something I typically always do for the clients I work with.

Recommendations for Tracking Conversions

Ad Platforms

To track conversions in ad platforms for the purpose of optimizing campaigns, I suggest using the Marketo Form Success as a trigger. This occurs when a lead has successfully been received by Marketo, which is superior for this purpose when compared to the Marketo Form Submitted event.

Analytics

To track conversions for analytics and reporting platforms, I suggest tracking the Marketo Form Submitted and Marketo Form Success as events. I’d also set up alert notifications if the system ever detects a submitted count that is higher than received. This scenario would indicate an issue with your forms, or with the Marketo servers, and will allow you to proactively be notified of issues affecting your lead gen funnels.

Conclusion

If your looking for a professional way to implement Marketo in Google Tag Manager, specifically conversion tracking, then this is a solid approach. It’s what I’ve implemented for numerous clients, it’s highly effective and very stable.

Related Information & References

• Marketo JavaScript API > Forms > API Reference
• Google Tag Manager Custom Event Trigger
• Google Tag Manager Custom HTML Tag
• Integrating Munchkin with Google Tag Manager