A Comprehensive Guide To Pardot Form Tracking
This guide demonstrates a method to track Pardot frame form submissions using GTM and record them in all required publishers.
Track form submissions of Pardot forms using GTM.
A common issue many GTM webmasters encounter is the use of iframes on websites. You may ask “What is an iframe?”
Well… an iframe (Inline Frame) is an additional HTML document that is embedded inside another HTML document on a website. The iframe HTML element is often used to insert content from another source, such as an advertisement or in this case a Pardot form.
As mentioned, this is typically from another source and this will reduce the visibility GTM can have over the events within. In other words, you are more-or-less blind to these events unless you can influence both pieces of the puzzle.
The first stage of this is to send a message out of the Pardot iframe to the parent window (the webpage). Conveniently, Pardot has a functionality which allows just this; the thank you code.
From here, we can insert some simple Javascript to “post” a message to our window where GTM has been implemented. You should leave the redirect checkbox unchecked for the code to execute. See an example of this code is below:
< script type = “text/javascript” >
try {
var postObject = JSON.stringify({ //This JSON can be altered to contain dynamic data or static data depending on requirements.
type: ‘Free Trial’,
action: ‘FormSub’
});
parent.postMessage(postObject, ‘YOUR DOMAIN’)
}
catch (e) {
parent.console && parent.console.log(e);
}
top.location.href = “SUCCESS PAGE URL”;
//*The thank you page logic can be altered to open a pop up with more information being found here.
The code above will push the message with that treasured payload on a successful form submission followed by a JS redirect to your chosen thank you page. Below is an example of the post message in action:
This is now stage one complete – but there are still a few steps to go!
The next stage is to make use of this message, and the best way to do this is by utilising an event listener. This can be implemented directly onto the page or via GTM. The code below demonstrates how you can implement an event listener and trigger a data layer custom event for you to then utilise.
< script type = “text/javascript” >
var ValidationVariable = 10; //These variables are used to help debug the implementation if there are any issues.
var edataInside = [];
var eActions = [];
var eventMethod = window.addEventListener ? “addEventListener” : “attachEvent”;
var eventer = window[eventMethod];
var messageEvent = eventMethod == “attachEvent” ? “onmessage” : “message”;
eventer(messageEvent, function (e) {
parsedData = JSON.parse(e.data)
edataInside.push(e);
eActions.push(parsedData.action)
if (parsedData.action == “FormSub”) { // this step validates the data passed from the postMessage.
window.dataLayer.push({
‘event’: parsedData.action,
‘type’: parsedData.type
})
}
}
, true);
This script should be implemented on all pages with a form and should be triggered on the GTM pageview. With this tag and the postMessage in place, you will start seeing a custom event being triggered within the GTM preview block:
The final stage is to use this event for all your tracking needs by creating the relevant DLVs (Data Layer Variables) and trigger.
Starting with the trigger, you use the name specified in your thank you code JSON (In this case “Form Sub”):
This can then be used as a trigger for any tag type within GTM to send data where required. Below is an example of how this can be used to record GA events where the type is stored as the action:
*The event label and value can also be used to store any data you want. A common use for the label is to pass the Client ID to help offline attribution.
Once all parts are live you will start collecting your form submission events in GA. This can then be used how you see fit; as a goal or simply an event.
The code could be cleaner but is a working example of this tracking principal which can be reapplied for a range of other purposes.
