• Home
  • Pardot Tips: How To Capture Page URL & UTM Parameters in Pardot Forms with Cross-Domain Iframe (in 4 Steps)

Pardot Tips: How To Capture Page URL & UTM Parameters in Pardot Forms with Cross-Domain Iframe (in 4 Steps)

This article outlines creating a script for adding dynamic inputs to hidden Pardot fields. 

It will allow you to capture any utm_source, utm_campaign & utm_medium fields on the URL, and it captures the current page when the Pardot form is being framed in another site (WordPress, Drupal, etc..)

WHY IS THIS IMPORTANT?

Pardot Forms are hosted on Pardot. This allows Pardot to use its intelligence features, like progressive profiling. When we use Pardot forms, we are actually framing a Pardot page on our site.

While this helps our forms interface with Pardot better, there are limitations. Particularly when we want to capture URL data from the browser and share it with Pardot. This is called, ‘cross-domain blocking’ (you can learn more about this here)

This limitation occurs even if you’re using a Pardot tracking domain and the TLD is a match.

The steps outlined below will allow you to bypass the cross-domain blocking and capture all the ‘good stuff’ into Pardot. I hope you enjoy!

HOW IT’S DONE:

1. ON YOUR WEBSITE (WordPress…etc) 

We need to ‘trick’ the browser into trusting our iframe.  Instead of copying and pasting the code directly from Pardot, we’ll use some JavaScript on the site itself, so Pardot has full access to the URL.  On your website, the code is as follows:

I’ve removed the <> from the script call, the start:end brackets will need to be re-added when coping the script below otherwise your JavaScript will not work:


script type="text/javascript"
  url = parent.document.URL;
  document.write('<iframe src="https://info.cypresslearning.com/your-pardot-form-url?url=' + url + '" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>');
/script


*NOTE: your iframe src=”” will be your Pardot form URL.  We need the ?url=’ + url + ‘” to share the page URL with Pardot. By calling the Iframe this way, the web browser will allow pardot to ‘read’ the URL information

2. IN PARDOT 

we create the following additional fields: last_submitted_page_URL, utm_source, utm_medium, utm_campaign.  It is important that the API name, label and form label all match for this script to work easily across multiple forms, as needed.

Alternatively, you can publish your form and grab the Pardot field ID. While this method can be much cleaner, it’s requires additional steps to find the field ID for each form. If you intend on using the field IDs for your own variation of this script, the name or label will not matter.


3. PARDOT FORM BUILDER STEP 2 FIELDS 

In our Pardot form, we’ll add the fields we created as ‘hidden’ fields.  The field label should match the field ID.


4. PARDOT FORM BUILDER STEP 3 LOOK AND FIELD 

In the ‘Below Form’ editor, switch to HTML view (furthest top-right icon in the WYSIWYG editor. Looks like a piece of paper with <> inside.  Add the following script:


script type="text/javascript"

// Parse the URL
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');

// GET the URL of the Parent Page
var url = location.search;
var parsedurl = url.split("=");

// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"
document.querySelector("p.utm_source input").value = source;
document.querySelector("p.utm_medium input").value = medium;
document.querySelector("p.utm_campaign input").value = campaign;
document.querySelector("p.last_submitted_page_URL input").value = parsedurl[1];
/script

Note: This uses an original script from jennamolby.com. We’ve added some additional steps to communicate with the Parent Page through the iframe.

Once these steps are done, you’ll be able to capture the url, utm_source, utm_medium & utm_campaign of the page used for submitting the form, regardless of whether or not the domain matches.

3 Comments

  1. Thanks for this Brandon! We are using this method successfully, but are experiencing an issue where the first parameter in the URL string isn’t coming through to Pardot. Is this something you’ve seen? Do we need to tweak the js?

  2. How would you go about doing this in conjunction with a tool like optinmonster, example being; slide-in with the pardot iframe inside.

Leave a Reply

Your email address will not be published. Required fields are marked *