Marketo Form Listener Tag in GTM not working | Community
Skip to main content
Elsa_Man3
Level 2
November 1, 2021
Solved

Marketo Form Listener Tag in GTM not working

  • November 1, 2021
  • 1 reply
  • 6809 views

Hello,

After doing a lot of research about how to use GTM to track form submissions into GA as Goal Completions, I mainly followed this article: https://nettlesnet.com/marketo-form-tracking-google-tag-manager-analytics/ 

 

Whenever I preview and test, it works, but after having it live for over a week, the GA goal completions (and even GA events that came in) is drastically lower than the number of actual people who 'filled out form" when I pull it from Marketo as either a Smart List or Landing Page Conversion Report.

 

After some more research, stumbled on a lot of discussions from @SanfordWhiteman to include an eventCallback to the GTM tag, so I did - but upon preview in GTM, it keeps giving me the error "Parse error. '}' expected (screenshot of error attached). 

 

So I have 2 questions:

1. Is this Custom HTML in the GTM tag correct? I have subsequent Trigger (that fires on All Pages) and Universal Analytics Tag to send this back to GA

2. If the above is correct, what's causing this error when I added in the eventCallback?

 

Thanks!

 

 

 

<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
                    "eventCallback": function () {
                      document.location.href = followUpUrl;
                    },
                      "eventTimeout" : 3000
                  });
                  return false;
                 });
        });
        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>

 

 

 

Best answer by SanfordWhiteman

That setTimeout makes my stomach bubble a little bit... but anyway, you have a missing comma and misplaced parenthesis. Without the syntax errors:

(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, "eventCallback": function () { document.location.href = followUpUrl; }, "eventTimeout" : 3000 }); return false; }); }); 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);

 

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
November 1, 2021

That setTimeout makes my stomach bubble a little bit... but anyway, you have a missing comma and misplaced parenthesis. Without the syntax errors:

(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, "eventCallback": function () { document.location.href = followUpUrl; }, "eventTimeout" : 3000 }); return false; }); }); 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);

 

Elsa_Man3
Elsa_Man3Author
Level 2
November 2, 2021

Thanks so much @sanfordwhiteman! GTM preview/tested fine now without those errors and we'll now see if this modification will align the reports with Marketo's better.

 

What was the reason that the setTimeout isn't the best idea? I literally just took the script from the blog so not tied to it.

 

The reason we're going through GTM instead of sending an event directly to GA is because there are hundreds of Marketo LPs live, so to add the additional script on the LP itself to push the event directly to GA wouldn't be scalable for us.

Elsa_Man3
Elsa_Man3Author
Level 2
November 3, 2021

Alright I just pulled some prelim report to see if the GA Goal Completions set for these form.success events are tracking closer to what Marketo's Landing Page Conversion Report numbers are, and GA's is still significantly lower. For example, GA's goal completions is 25 whereas Marketo says 33 - this is over the span of 3 hours only and there's already this gap. I was hoping the missing eventCallback was the key but am I missing something else @sanfordwhiteman ? Any ideas or insights would be greatly appreciated!