This guide demonstrates a method to track Pardot frame form submissions using GTM and record them in all required publishers.
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.
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.
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.