Add the listener tag

<script>
/**
 * push events to Google Tag Manager when the Marketo Forms 2 Javascript is
 * loaded and executed and when Marketo form events occur
 * uses the Marketo Forms 2.0 API
 * http://developers.marketo.com/documentation/websites/forms-2-0/
 *
 * @author Keith W. Shaw <keith.w.shaw@gmail.com>
 * @license MIT
 */
(function marketoFormListener () {

    "use strict";

    /**
     * poll for global MktoForms2 variable to be defined
     * @returns {undefined}
     */
    function pollForMktoForms2 (delay) {

        if (isNaN(delay)) {
            throw new Error("Expected delay (" + delay + ") to be a number.");
        }

        if (window.MktoForms2) {

            // mark the start of the script loading
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                "event": "mkto.form.js",
                "mkto.form.start": (new Date()).getTime()
            });

            // bind liseners for all Marketo Form events
            addMktoForms2Listeners(window.MktoForms2);

        } else {

            // keep polling, but progressively increase the delay
            setTimeout(pollForMktoForms2.bind(null, 2 * delay), delay);

        }

    }

    /**
     * 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 || ""
            });

        }

    }

    /**
     * setup Marketo Form listeners to push events to GTM
     * @returns {undefined}
     */
    function addMktoForms2Listeners (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()
            });

        });

    }

    // start polling with an initial delay of 125ms
    pollForMktoForms2(125);

}());
</script>

Create variables:

data layer variable

Marketo form ID

The data variable name should be mkto.form.id

Lookup table variable

Marketo form identifier

This variable is a lookup table that will translate the form ID to a form name, for usage in GA reports.

the idea is to add the input [form ID] and Output as Form name, as such:

an example of a form lookup table

Create Google analytics tags

Now is the time to send the form submissions as an event for GA, as a structure for building event-driven goals.

The first part is the most important one – for success in submitting the Marketo form, nonetheless, it is very important to detect form submission failures in order to learn more about the user behavior around Marketo forms, as well as errors in implementation that could be very costly, and hard to detect.

Submit success GA tag

Create a Google Analytics tag with the following attributions:

Track type: Event.

Event Category – Form submitted [but could also be – new lead, or however you wish to celebrate the form submission]

Event action – {{Marketo Form identifier}}

Label – I like to use {{Page Path}} as it allows me to understand better-performing pages in which forms are filled.

Event value – Not required – by choice.

Trigger type:

Custom event – event name – mkto.form.success

Submit error GA tag

Create a Google Analytics tag with the following attributions:

Event Category – Form error

Event action – {{Marketo Form identifier}}

Label – I like to use {{Page Path}} as it allows me to understand problematic pages in which forms are filled.

Event value – Not required – by choice.

Custom event – event name – mkto.form.error

Comments

comments