How to Setup Pardot Form Tracking Using Google Tag Manager
Pardot • Pardot Forms
This blog was written before Pardot was renamed to Marketing Cloud Account Engagement. You can read more about the name change and what it means here.
Pardot forms are embedded into web pages using iframes aka ‘inline frames’. In a nutshell, this means the Pardot page containing the form, is embedded into a frame on the web page of our site. One of the biggest hurdles this creates is a struggle to set up Pardot form tracking in Google Analytics.
Pardot form embedded using iframe on marcloudconsulting.com
Pardot form web page on pardot.marcloudconsulting.com
Because the form does not exist in the actual page source code, standard ‘Event’ tracking on form submissions will not work.
It’s one of the biggest challenges our clients face and one that’s quite technical and can be tricky to resolve!
After much trial and tribulation, at MarCloud we’ve been able to implement a Pardot form tracking system that works and can be replicated by other Pardot users. It uses Google Tag Manager, so if you don’t have a GTM account yet, the first step is to create one for free and install it on your website.
Before we dive into the next steps, let’s consider why we need to track these forms in the first place.
How to set up Pardot form tracking using Google Tag Manager
Within Pardot we have access to the number of views a form receives, the leads that submit the form, the form conversion rate, and the initial lead source for our prospects.
For some marketers, these metrics may be enough because they give us the insights needed to demonstrate lead generation performance.
But there’s a reason we use Google Analytics in conjunction with Pardot.
Google Analytics tells us more about our website performance, audience, and overall conversion rate – both as a whole and from particular marketing activities or channels.
Even with an excellent Pardot setup, Google Analytics is a vital tool for improving the user experience of our site, and forms are part of this experience.
The true magic is in using GA and Pardot in tandem, to track website traffic and behaviour and Pardot form and lead generation performance.
Not only this, having Pardot form tracking set up correctly within Google Analytics means we can track conversions more easily from advertising campaigns such as Google Ads or LinkedIn, and actually optimise our activity using conversion data.
So, how do we do this?
How to set up Pardot form tracking using GTM
To track the submissions of forms within an iframe, the website that hosts the form and the website with the form embedded, need to communicate to each other.
The iframe website that lives at pardot.yourdomain.com needs to send a message to say that the form has been submitted.
The website that has the iframe embedded, yourdomain.com, needs to listen out for messages coming in from the iframe site.
This is possible using Javascript tags and Google Tag Manager.
In your GTM account, create two containers:
For the general website.
For iframes only.
It should look like this:
Each of these containers has its own container ID. The container ID for your general website, should be installed on your site as per GTM instructions.
The container ID for the iframes container should be added to any Pardot form templates that you use for the forms you want to track. You can add this by going to Marketing > Forms > Layout Templates then selecting the template and ‘Edit Layout Template’. Once in edit mode, copy and paste the GTM tracking codes into the ‘Layout’ tab, following the GTM instructions for inclusion in theandsections.
Now we have the containers set up, we can start adding Tags.
Within your general website container
Create Tag 1: (Listener – PostMessages)
Go to Tags > New > click ‘Tag Configuration’ and select ‘Custom HTML’.
This Custom HTML tag inserts javascript into the website.
It allows the site to listen out for messages being sent to it from another website (in this case the iframe website).
This code is always the same and you only need one of these Tags per site.
The code is:
Copy to Clipboard
Select ‘Triggering’ and ‘All Page Views’.
Create Tag 2: Form Submission
This Tag is the one that tracks the submission of your form.
First, we need to create the Trigger. Go to Triggers > New and then select ‘Custom Event’.
Under Event Name enter ‘FormSubmit-Footer*Footer is an example, you can enter any label here that you will use to recognise the form that has been submitted i.e. ‘FormSubmit-Newsletter’, ‘FormSubmit-Contact’ etc.
Check the box for ‘Use regex matching’ and set the trigger to fire on ‘All Customer Events’.
Name your Trigger ‘FormSubmit-Footer’.
Now, we can set up the Tag.
Go to Tags > New > select ‘Google Analytics: Universal Analytics’ (or GA4 Events if you’re using GA4, for the purposes of this guide we’ll stick with the UA instance of GA but the instructions are fairly similar for both).
Set the event details as follows:
Type: Event
Category: Form
Action: Submission
Label: FormSubmit-Footer *ensure this label exactly matches the Event Name you’ve used in the Trigger above.
Select your Google Analytics account under ‘Google Analytics Settings’.
Select the Trigger you just created.
Name your Tag ‘Form Submission – Footer’.
Now we move on to our second container, for our iframes.
Within the iframes GTM container
First, we’ll create the Trigger.
Head to Triggers > New and select ‘Click – All Elements’.
Change the trigger to fire on ‘Some Clicks’.
Use the dropdown to select either your unique Pardot form click classes or ID. You can see, add or customise this within the ‘Form’ tab of the Layout Template the form uses, in Pardot.
Using this, enter the criteria you want to trigger a form submission on. For example, using the above form with the unique form ID ‘quick-contact-form’, we could set the condition to be ‘Click ID’ ‘contains’ ‘quick-contact-form’.
Name your Trigger ‘Form Submission – Footer’.
Next, we create the Tag.
Go to Tags > New and select ‘Custom HTML’ as the Tag type.
Copy and paste the below code into the HTML field, then update the website URL to match that of your main website.
Copy to Clipboard
Name your Tag PostMessage – Footer Form Submission and select the Trigger you just created as the firing trigger.
What we have just done is used the Custom HTML Tag to insert javascript into the iframes website.
This sends a message to the main website when an action is fired.
The action in this case is the submission of the form.
There are three key parts to this tag that must be followed, or else it won’t work:
The code within the Tag HTML must contain the Event Name exactly as it was set in your Tag within the main website container i.e. ‘FormSubmit-Footer’,
The code within the HTML must contain the website that the iframe is sending messages to i.e. parent.postMessage(postObject, ‘https://yourdomain.com/‘);
The Trigger configuration should target a specific button submission, in this case the button has an ID of ‘quick-contact-form’ but you can use whichever condition is unique to the form you want to track.
NB: Remember that if your forms do not have unique IDs or classes and you set up tracking for one, it will track all with that same ID/class. You can see the form ID or class by right clicking the button on your form and then ‘Inspect’ to see the code.
Testing your Pardot form tracking setup
As with any GTM Tag setup, you need to test if it’s working correctly before you move on to setting your Goals within Google Analytics. To do this:
First hit the button to ‘Publish’ your changes in both containers.
Then, within your general website container, select ‘Preview’ and enter your website URL to open the Google Tag Assistant testing tool.
From here, submit your form and check that the Tag you’ve created appears under the ‘Tags Fired’ section.
Once you see this, you can move on to the final part of the Pardot form tracking setup!
Creating your new Goals in Google Analytics
The last step is adding the new Event Goals to Google Analytics.
Head to Admin > Goals > +New Goal.
Select ‘Custom’ and name your Goal.
Choose ‘Event’ as the Goal type.
Enter the Event Conditions exactly as they are in your GTM Tag:
Category: Form
Action: Submission
Label: FormSubmit-Footer
Hit Save.
Ensure your new Goal is toggled to ‘On’.
As an added measure to ensure your Pardot form tracking is set up correctly, go to the ‘Realtime’ section in Google Analytics and then to ‘Conversions’. Submit your newly tracked form again and ensure that the Goal triggers in this section.
NB: Remember that if you have excluded your IP from GA tracking using a Filter, your activity will not show in the Realtime section!
Congrats! You have now successfully set up Pardot form tracking in Google Analytics, using Google Tag Manager. We appreciate this guide is pretty technical and may be overwhelming at first (code = scary for many!) but with a bit of practice, any marketer can pick it up.
If you do get stuck when setting up your form tracking in Google Analytics, or withany other aspect of Pardot, send a message to the MarCloud team and we’ll do our best to help get it sorted.
Need a hand getting the most out of your Pardot or Marketing Cloud account?
MarCloud is a team of certified Pardot, Marketing Cloud, and Salesforce specialists. We help businesses to unlock the potential of marketing automation.
Ready to save time, deliver more quality leads, and generate more revenue? Here's how we help.
Having worked with Salesforce products for 10+ years, Chloe is a certified consultant and marketing automation enthusiast with a varied background across martech, operations, and enterprise consulting. She loves meeting new people and sharing her knowledge to set them up for success, including matching MarCloud customers with the right service solutions. Passionate about ethical marketing, she'll find any excuse to talk about GDPR and compliance on the Salesforce platform.
Users don’t always make use of Pardot Grading and when they do, they don’t take steps to ensure the data they capture is directly aligned with their Grading model.
