How to Pass UTM Variables to a Pardot iframe

This blog was written before Pardot was renamed to Marketing Cloud Account Engagement. You can read more about the name change and what it means here.

UTM variables are incredibly useful for marketing attribution. They tell us which of our prospects came from particular marketing activities, such as LinkedIn ads, for example. When it comes to tracking UTM variables and passing these into Pardot, forms embedded in a Pardot iframe can cause some issues, as there is a lack of connection between the external page that the form sits on (i.e. on a WordPress web page) and the Pardot form within the iframe.

However, this is nothing that a bit of custom Javascript can’t fix! Whilst you can enable the native Google Analytics connector within Pardot, this will only populate UTMs on a first-touch basis, and you are restricted to the five default variables. Our solution allows you to collect custom variables, and you can collect them over multiple form submissions. Keep on reading to learn how to pass UTM variables to a Pardot iframe (without using the Google Analytics connector) in three easy steps.

Note: Custom Javascript is sensitive to cases, punctuation, and formatting. We strongly advise against using this tutorial unless you are comfortable with editing code yourself.

• Step 1: Custom fields
• Step 2: Below-form code
• Step 3: Landing page code

Step 1: Custom fields

Before we can track any field values, we first need to create the custom fields. For standard UTM tracking, you will want to create the following fields, exactly as shown: 

• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term

Once these are created, you can add them to your forms. These will each need to be added as a hidden field with the text type that is not required. 

If you would like to track any other field values, create these in the same format; spaces should be formatted as underscores, and all lowercase letters.

Step 2: Below-form code

Place the following Javascript in the below-form section of your Pardot form:

<script> 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, " ")); } var source = getParameterByName('utm_source'); var medium = getParameterByName('utm_medium'); var campaign = getParameterByName('utm_campaign'); var content = getParameterByName('utm_content'); var term = getParameterByName('utm_term'); 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.utm_content input").value = content; document.querySelector("p.utm_term input").value = term; </script>

To track your own custom field values, you can add additional fields to the Javascript, such as:

var {{field name}} = getParameterByName('{{field_ID}}'); document.querySelector("p.{{field_ID}}").value = {{field name}};

For example, the custom Javascript for a field with the ID of example_field would be as follows:

<script> 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, " ")); } var example = getParameterByName('example_field'); document.querySelector("p.example_field").value = example; </script>

Step 3: Landing page code

Lastly, we must amend our website code to allow the custom Javascript to fire. For this to work, we must also amend the Pardot iframe code on the landing page to include an ID (you can choose whichever ID you like), and then paste the following code right beneath the iframe on the landing page: 

<script type="text/javascript"> var iframe = document.getElementById('myiframe'); iframe.src = iframe.src + window.location.search; </script>

An example of how this code would look in its entirety on a landing page is shown below:

<iframe src="https://yourdomain.com/l123456/2021-02-10/abcde" width="100%" height="500" type="text/html" frameborder="0" allowtransparency="true" id=”myiframe”></iframe> <script type="text/javascript"> var iframe = document.getElementById('myiframe'); iframe.src = iframe.src + window.location.search; </script>

If you have more than one iframe form on a page, it is crucial that you give each iframe a new ID. An example of the full landing page code for an iframe with the ID of newsletter_form’ is shown below:

<iframe src="IFRAME URL" width="100%" height="500" type="text/html" frameborder="0" allowtransparency="true" id=”newsletter_form”></iframe> <script type="text/javascript"> var iframe = document.getElementById(newsletter_form’); iframe.src = iframe.src + window.location.search; </script>

And that’s it! You have just successfully set up custom UTM tracking on a Pardot iframe. 

For information about tracking conversions from Pardot forms in iframes within Google Analytics too (another common issue for Pardot users), you can visit our full guide to Pardot form tracking using Google Tag Manager.

If this all sounds a bit too technical for you and you’d prefer to have an expert assist you, feel free to send us a message. We can liaise with your web developer to ensure all of your Pardot form tracking is set up correctly.