Pardot forms, embedded in websites using iframes, can make tracking form submissions in Google Analytics (GA4) tricky. As Pardot forms don’t exist in the page’s source code, standard event tracking will not work by default. However, with the use of Google Tag Manager (GTM), you can set up a reliable form tracking system that captures form submissions and pushes the data into GA4 for better insights.
In this article, we will guide you through setting up Pardot form submission tracking using Google Tag Manager and Google Analytics 4. This solution will help you track leads, measure conversions, and optimize your marketing activities.
This guide is part of our conversion tracking series using Google Tag Manager. If you’re new to form tracking, check out our main article – How to track form submissions.
Why Track Pardot Forms in Google Analytics?
While Pardot provides useful data such as form views, conversion rates, and lead sources, Google Analytics 4 offers more comprehensive insights into your website’s performance, including traffic behavior, audience interactions, and campaign attribution. Tracking Pardot forms in GA4 enables you to:
- Analyze form performance in conjunction with overall site activity.
- Track and optimize ad campaigns using real conversion data from Pardot forms.
- Enhance the user experience by understanding where users drop off.
By integrating Pardot with GA4, you can maximize the value of your lead generation efforts and make more informed marketing decisions.
Setting Up Pardot Form Tracking Using GTM
To track form submissions within an iframe, we need to set up communication between the website hosting the form and the website in which the form is embedded. This can be achieved by using postMessage to send data from the iframe to the main site.
Step-by-Step Guide:
Step 1: Modify the Pardot Form Layout Template Code
In your Pardot form layout template, modify the ‘Thank You’ section to include the following postMessage code. This script sends a message from the iframe to the parent window when the form is successfully submitted:
<script type=”text/javascript”>
  window.parent.postMessage({
    ‘event’: ‘pardot_form_submit’,
    ‘formName’: ‘Your Form Name’
  }, ‘*’);
</script>
This code fires the pardot_form_submit event along with the form name when the form submission is completed. Replace ‘Your Form Name’ with the appropriate form name.
Step 2: Create a PostMessage Listener in Google Tag Manager
- Open Google Tag Manager (GTM).
- Create a New Tag:
- Click Tags in the sidebar and then New to create a new tag.
- Configure the Tag:
- Select Custom HTML as the tag type and enter the following script:
<script>
  window.addEventListener(‘message’, function(event) {
    if (event.data.event === ‘pardot_form_submit’) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        ‘event’: ‘pardot_form_submit’,
        ‘formName’: event.data.formName
      });
    }
  });
</script>
- Set the Trigger:
- Assign the trigger to fire on All Page Views.
- Save the Tag:
- Name the tag something like Pardot Form Listener and save it.
Step 3: Create a Data Layer Variable in GTM
- Go to Variables in GTM.
- Create a New Data Layer Variable:
- Click New, select Data Layer Variable, and name it formName.
- Set the Data Layer Variable Name to formName.
- Save the Variable as Pardot Form Name Variable.
Step 4: Set Up a GA4 Event Tag for Form Submissions
- Create a New Tag in GTM.
- Configure a GA4 Event Tag:
- Choose Google Analytics: GA4 Event as the tag type.
- Set the Event Name to pardot_form_submit.
- Add a parameter called form_name, with the value set to {{Pardot Form Name Variable}}.
- Create a Trigger:
- Create a Custom Event Trigger with the event name pardot_form_submit.
- Assign the trigger to fire on All Custom Events.
- Save and Test:
- Name the tag Pardot Form Submission Event and save it.
Step 5: Create a Custom Dimension in GA4
To capture the form name as a custom dimension in GA4:
- Open GA4 and go to Admin > Custom definitions > Create custom dimensions.
- Enter the following details:
- Dimension Name: Form Name
- Scope: Event
- Description: Pardot form name
- Event Parameter: form_name
- Save the custom dimension.
Step 6: Test Your Setup
- Submit a Test Form: Submit a form on your site and verify that the pardot_form_submit event appears in the GTM Preview Mode and GA4 Realtime Reports.
- If everything is working correctly, publish the changes in GTM.
Conclusion
By setting up Pardot form tracking with Google Tag Manager and Google Analytics 4, you can accurately measure form submissions, optimize lead generation, and improve your overall marketing performance. This setup ensures that Pardot forms embedded in iframes are properly tracked, enabling deeper insights into user behavior.
At First Page Digital, we offer advanced digital marketing services including advanced form tracking setups like the one described here. If you need help refining your tracking or require tailored solutions for your website, reach out to our experts today!