Posts Tagged ‘iframe’

How to get Google Analytics Data into a Pardot form in an iframe

January 11th, 2017

What the heck is this? What’s a Pardot? Well if you look around on this site, it will be obvious that I don’t have much to share on a personal blog and that my posts are somewhat varied in topic.

Today I figured something out at my day job by piecing together information from here and there (links below within text) rather than finding one source for how this is done. So here’s a quick guide that will hopefully be found by people that are looking to do exactly what I was… which is passing Google Analytics (GA) URL variables into a Pardot iframe form and so it can be collected into a Pardot prospect.

To answer the question “Why?” Well, it’s because Pardot only captures the “first touch” to a site. So if the visitor (or someone else on that computer and browser) has already been to your site, Pardot captures nothing related to Google Analytics. There are certainly cases where you don’t just want to know about the first visit to a site. For example, “Did my banner ad result in someone filling out a form? Do I want to use the same form as a landing page for multiple ads but capture which ad they saw when they came to the form?” Google Analytics will have the referrer stats but the form itself, and Pardot’s data collection, will not include that information unless you force it to by using a method like I’ve outlined below. Note that this does not use the Pardot Google Analytics connector. For the reason stated above (“first touch” only), I’ve found the connector to have limited usefulness. Do this instead:

1. Check out a fully populated URL in the GA URL builder tool.

Here’s my sample with the website name removed and some made up variable data:
http://[website-name-here].com/form-test/?
utm_source=WebmasterMagazine&utm_campaign=Q12017
&utm_medium=banner&utm_term=pardot&utm_content=300×250

Notice the GA variables. Here’s a list:

  • utm_source
  • utm_campaign
  • utm_medium
  • utm_term
  • utm_content

2. In Pardot, create custom prospect variables with those exact same names. (Admin > Prospect Fields > +Add Custom Field)

 

Create custom fields for each Google Analytics URL variable.

 

When done, you should have all the GA fields in Pardot. If you are mapping them to Salesforce, that will be shown too. I did not.

 

All GA URL variables in Pardot custom prospect fields

 

3. Create your Pardot form as usual but add the extra fields you need to collect from the GA URL variables. For testing, I’m using “text” as the type, but once I know it works, these will be changed to “hidden.”

 

Select the Prospect Field for each GA variable needed

 

Your form field will look something like this in Pardot:

 

All GA fields shown in form as custom Pardot prospect fields

 

4. Now to add our Pardot form to a webpage. DO NOT use the standard iframe code. What you want to do is copy the form URL (labeled “Link” in Pardot) and paste it into the code from this page: Passing URL Parameters from Browser to iframe. In case that link becomes broken in the future, here’s the block of code repeated from Github. I would recommend you read the linked page first.

 

Be sure to replace the form URL with the one that you copied in Pardot when you created your form.

5. That code will allow the GA variables to be collected by the iframe and because you named the fields correctly, they will be automatically populated.

So this: http://[website-name-here].com/form-test/
?utm_source=WebmasterMagazine&utm_campaign=Q12017
&utm_medium=banner&utm_term=pardot&utm_content=300×250

Becomes this:

 

 

6. Great! It’s working. Now change your form fields back in Pardot so that the type is “Hidden.”

 

 

Now the test form I created looks like this… no GA fields showing.

 

 

7. Submitting the form will now capture this in the Pardot prospect. You did it! Now you can map it to Salesforce or do whatever custom reports on those fields that you need.

 

 

And you are done.