Marketo Form Tracking in Google Tag Manager and Analytics

Tracking Marketo Form submissions in Google Analytics is essential to understand your customer’s journey and Conversion Rate Optimization (CRO). In this tutorial, you will learn how to leverage the Marketo Forms API to report form success events to Google Analytics with Google Tag Manager.

The setup is very easy to do and at the end of this article you will have everything you need to start tracking Marketo Forms with Google Tag Manager today.

Create the Marketo Form Event Listener Tag

The event listener tag allows you to populate the dataLayer with events related to your Marketo Forms. If you are familiar with JavaScript, you will see that the Marketo form event listener allows you to access a variety of events and values related to forms rendering on your native Marketo landing pages or Marketo forms that are embedded on any Content Management System. With this tag, you can create conditional logic to trigger GTM tags based on virtually any attribute available through the Marketo Forms JavaScript API.

Event Listener Tag Configuration:

• Tag Type: Custom HTML
• Tag Name: Forms – Marketo Event Listener
• Triggering: All Pages
• Custom HTML tag content:

<script>
/**
 * push Marketo form events and values to Google Tag Manager via the data layer
 * uses the Marketo Forms 2.0 API
 */
(function marketoFormListener (MktoForms2) {
    "use strict";
    /**
     * helper function to push invalid Marketo field errors to GTM
     * @returns {undefined}
     */
    function waitForError () {
        var element, input, mktoErrorMsg;
        // check for error message
        element = document.querySelector(".mktoErrorMsg");
        if (element) {
            mktoErrorMsg = element.textContent || element.innerText;
            // look for invalid input
            input = document.querySelector("input.mktoInvalid, .mktoInvalid input");
            window.dataLayer.push({
                "event": "mkto.form.error",
                "mkto.form.error.message": mktoErrorMsg,
                "gtm.element": input,
                "gtm.elementClasses": input && input.className || "",
                "gtm.elementId": input && input.id || "",
                "gtm.elementName": input && input.name || "",
                "gtm.elementTarget": input && input.target || ""
            });
        }
    }
    if (MktoForms2) {
        MktoForms2.whenReady(function handleReady (form) {
            window.dataLayer.push({
                "event": "mkto.form.ready",
                "mkto.form.id": form.getId(),
                "mkto.form.submittable": form.submittable(),
                "mkto.form.allFieldsFilled": form.allFieldsFilled(),
                "mkto.form.values": form.getValues()
            });
            form.onValidate(function handleValidate (valid) {
                window.dataLayer.push({
                    "event": "mkto.form.validate",
                    "mkto.form.valid": valid
                });
                // wait for the error message to appear
                setTimeout(waitForError, 0);
            });
            form.onSubmit(function handleSubmit (thisForm) {
                var button;
                button = thisForm.getFormElem().find("button[type=\"submit\"]");
                window.dataLayer.push({
                    "event": "mkto.form.submit",
                    "mkto.form.id": thisForm.getId(),
                    "mkto.form.submittable": thisForm.submittable(),
                    "mkto.form.allFieldsFilled": thisForm.allFieldsFilled(),
                    "mkto.form.values": thisForm.getValues(),
                    "mkto.form.button": {
                        "classes": button.attr("class"),
                        "text": button.text(),
                        "type": "submit"
                    }
                });
            });
            form.onSuccess(function handleSuccess (values, followUpUrl) {
                window.dataLayer.push({
                    "event": "mkto.form.success",
                    "mkto.form.values": values,
                    "mkto.form.followUpUrl": followUpUrl
                });
            });
        });
        MktoForms2.whenRendered(function handleRendered (form) {
            window.dataLayer.push({
                "event": "mkto.form.rendered",
                "mkto.form.id": form.getId(),
                "mkto.form.submittable": form.submittable(),
                "mkto.form.allFieldsFilled": form.allFieldsFilled(),
                "mkto.form.values": form.getValues()
            });
        });
    }
}(window.MktoForms2));
</script>

Create the Trigger for the Marketo Form Success Event

For the purposes of this tutorial, we are only interested in form submissions that resulted in a successful post to Marketo. Using the mkto.form.success event ensures that you are only reporting goals to Google Analytics for each lead.

I do not recommend using the mkto.form.submit event because it will report an event each time a user clicks the submit button, regardless of common errors such as required fields that are missing. Using the submit event will result in inaccurate reporting of conversions on your site.

Trigger Configuration:

• Trigger Type: Custom Event
• Trigger Name: Event – mkto-form-success
• Event Name: mkto.form.success
• Trigger fires on: All custom events

Create the Google Analytics Event Tag

This event tag will report an event to Google Analytics, and it will be visible in your Google Analytics account.

Google Analytics Tag Configuration:

• Tag Type: Universal Analytics
• Tag Name:

  GA - Event - Marketo - Form Success

• Track Type: Event
• Category: Marketo
• Action: Form Submit
• Label:

  {{Page Path}}

• Trigger: Event – mkto-form-success

Report Form Submissions as a Goal Completion in Google Analytics

Create a new goal in Google Analytics and populate the fields as indicated in the image below. If you know the average value per form submission, you can also populate this value to track the value created for each form.