Marketo Form Listener for Google Tag Manager (GTM)

mkto.form.listener.html

(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": { "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(),
                        "submittable": form.submittable(),
                        "allFieldsFilled": form.allFieldsFilled(),
                        "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(),
                            "submittable": thisForm.submittable(),
                            "allFieldsFilled": thisForm.allFieldsFilled(),
                            "values": thisForm.getValues(),
                            "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,
                            "followUpUrl": followUpUrl
                        }
                    }
                });

            });

        });

        MktoForms2.whenRendered(function handleRendered (form) {

            window.dataLayer.push({
                "event": "mkto.form.rendered",
                "mkto": {
                    "form": {
                        "id": form.getId(),
                        "submittable": form.submittable(),
                        "allFieldsFilled": form.allFieldsFilled(),
                        "values": form.getValues()
                    }
                }
            });

        });

    }

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

}());