Marketo Form Listener for Google Tag Manager (GTM)

mkto.form.listener.html

<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 <[email protected]>
 * @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>

Thanks Keith I think this is exactly what I've been looking for!!
However I'm not a developer, more a technical marketer, so forgive me but I have a couple of questions...

• I'm assuming this is implemented as a Custom HTML Tag via GTM, and fired on Pageview?
• It looks like your code automatically adds the callback parameter described in the marketo API documentation here? https://developers.marketo.com/javascript-api/forms/ - meaning I don't need to do anything to the marketo form code, right?
• You've already mentioned that code won't slow down pages that do not load Marketo - but what impact does it have on the speed of the pages that do load Marketo?