Pardot iFrame Form Tracking with Google Analytics

pardot_iframe_form_tracking_google_analytics

This guide shows you how to track Pardot form submissions completed in an iFrame in Google Analytics. The method described allows you to properly attribute the acquisition traffic source and medium to the conversion- the Pardot lead form submission in Google Analytics. You can also see what page on your site the Pardot iFrame lead form was submitted on using this tutorial.

Salesforce Pardot Form Builder Completion Actions Thank You Page Code

In your Salesforce Pardot form builder, add the custom code below to the Thank You Code tab in the Completion Actions. In the code below you need to replace  http://www.ryanpraski.com/ with the domain of your website where the Pardot form is embedded. If you want, you also can replace  iframeTestPageLoad with a message that makes more sense for your successful Pardot lead thank you page load.

Completion Actions Code Tab in Pardot

pardot_completion_actions_thank_you_code_google_analytics

The parent.postMessage() function let’s your website know that the lead form was successfully submitted when the thank you page (in this case the iFrame) loaded.

Google Analytics iFrame Form Event Listener

Setup an event listener on your website to listen for the thank you page success message from the iFrame. If you use Google Tag Manager (GTM) you can create an HTML tag with the code below. This code will fire a GTM dataLayer event. Make sure to replace http://rpanalytics.blogspot.com with the domain of your Pardot form.

The event listener code above will fire the  iframeTestPageLoad GTM dataLayer event shown in the screen shot below.

iFrameTestPageLoad_google_analytics_dataLayer_event

Create a Google Analytics Tag in GTM to Track Pardot Lead Submissions

Now that a GTM dataLayer event fires when a Pardot lead form is submitted you’ll need to fire a Google Analytics tag to capture data in GA when the lead form is submitted. In GTM create a tag for a Google Analytics event. The firing trigger is the custom event trigger type named iframeTestPageLoad (the dataLayer custom event that fires when the form is submitted via the code described in the previous section of the post).

Google Analytics Goal Setup to Track Pardot Lead Form Submission Conversion

Then in Google Analytics create a new goal for your Pardot lead form submission. Use the Google Analytics event as your Google Analytics goal type. Below is the Google Analytics goal event conditions and goal setup that I used. You should be sure to enter in the event category, action and label that you passed to Google Analytics when you set up your tag in the previous step.

iFrameTestPageLoad_google_analytics_goal_configurations

Sample iFrame tracked in Google Analytics Below

To give you a real live example of how iFrame tracking works I’ve included a sample page below. The example has content iFramed in from a blogger.com website. If you reload this page and use Google Tag Assistant you can see that a Google Analytics event Tag fires for the iFrame Lead Form submissions. This is exactly how the Pardot lead form tracking described works with Google Analytics as well.

Track an iFrame Sumbit Click in Google Analytics

To extend this tutorial further, if you want to track a lead form submit button click from an iFrame in Google Analytics you can do that too. In the iFrame add a JavaScript function for the form submitClick() that will pass the message from the iFrame to your website that the button was clicked. The code for iFrame submit click is shown below.

You’ll use the parent.Message() function just like you did for the successful Pardot Thank You page load. Then you’ll follow the same steps to use GTM to add an HTML tag with the event listener (make sure to use the code below that includes the submitClick event listener too). Then create a Google Analytics event tag triggered by the submit click in the iFrame.

iFrame Page Level Code Including Submit Button Tracking

Event Listener Including Lead Form Submit Click Code

Sample iFrame

Shout out to LunaMetrics for their excellent series of posts on iFrame tracking. For additional use cases check them out.

  • Syed Naveed Shehzad

    Hi,
    I have followed your steps but I guess I messed up somewhere.
    I have a Pardot Form embedded in a Leadspage Landing Page and then that landing page is used in my wordpress website.
    in this line parent.postMessage(‘iframeTestPageLoad’, ‘http://www.ryanpraski.com/’);
    what will be my domain.. is it leadpages or my website URL link.
    Second Question is regarding this step : Google Analytics iFrame Form Event Listener, when I create the Custom HTML GTM tag what will be the trigger condition for this as you didn’t specify that yet.
    Final Question is what if I want to add more information into the hidden field on Pardot form so that I can add it in prospect properties.
    I hope to hear from you soon 🙂
    Thanks for such a nice article.

    Regards,
    Naveed

    • markrentschler

      Naveed, I ran into a similar issue, and Ryan helped me troubleshoot it via chat. In my Pardot thank you code, I have my website URL (which is a WordPress site). In the custom HTML GTM tag, the trigger condition should be a pageview of the page(s) where your form is embedded. Then, in the custom HTML tag itself, the line if (message.data === ‘iframePageLoad’ && message.origin === ‘https://go.pardot.com’) needs to have the “https://go.pardot.com” URL instead of my website URL. I was hung up there because I initially had my website URL in that line, and it wasn’t firing.

      • Hi Mark,
        Thanks for sharing your solution. Glad to hear you got everything working and your Pardot lead form submission data is being properly captured in Google Analytics!
        -Ryan

      • Rachel Kreis

        Hi there Mark,
        I’ve been trying to get this to work, but your suggestion to use a trigger condition that is a pageview of the page(s) where my form is embedded doesn’t work… If I create that trigger condition, then the tag fires just because the form is embedded on the page. I’m a little lost here still.

        How did you create your trigger? Maybe that’s my problem…

        All the best,

        Rachel

        • markrentschler

          Hi Rachel,

          My trigger is just the standard Page View trigger type with the URL of my site page. You are correct that the page view trigger fires whenever the page loads, but then the line I referenced in my previous comment with the go.pardot.com URL is what tells it to only fire the tag when the iframe loads. Then, the ‘iframePageLoad’ value (or whatever yours is) needs to be referenced in the “Action” condition of your GA event goal. I’m happy to send you my code/screenshots of my setup if that would help.

          Thanks,
          Mark

          • Rachel Kreis

            Hi again,

            Thanks for the response! I haven’t been able to get the trigger to only fire when the iframe loads correctly… It must be how I’m configuring it. However, the goal conversion does register, but it just isn’t showing up in “real-time.” Do yours show up in real-time on analytics when you’re testing?

            Yes, would you mind sending me a screenshot of your set up just to make sure I’m doing it right? Thank you so much, Mark. My work email is rachel.kreis@launchmetrics.com

            I appreciate your help!

  • Steve Maraschiello

    For me, I needed to use my custom sub domain, not the go.pardot.com url – worked great.