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:
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