2021-11-23T05:17:29+00:00
Support
2021-11-23T05:17:29+00:00

How to Set Up Pardot Form Tracking Using Google Tag Manager

June 4, 2021

How to Setup Pardot Form Tracking Using Google Tag Manager

MarCloud Apple iPad retina favicon

 Pardot •  Pardot Forms

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

Pardot form web page on pardot.marcloudconsulting.com

Pardot form

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.

Why track Pardot forms in Google Analytics?

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:

  1. For the general website.
  2. For iframes only.

It should look like this:

Pardot form

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.

Pardot form

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

PostMessage Listener screenshot

  • 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.

Example of GTM set up for Pardot form tracking

  • 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.

GTM Tag

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.

Pardot form

  • 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.

Pardot form

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.

Post Message custom html tag

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:

  1. 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’,
  2. The code within the HTML must contain the website that the iframe is sending messages to i.e. parent.postMessage(postObject, ‘https://yourdomain.com/‘);
  3. 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.

Pardot form

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 with any 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 Salesforce account?

MarCloud is a team of certified Pardot 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.

VIEW SERVICES

Delphine Tsiranana

More by Delphine Tsiranana →