How To Use UTM Parameters in Pardot Part 2

Newer post available

Hi there, you are viewing an old post that is a bit outdated. Click here to view the post with the latest instructions.

In part 1, I covered how to use UTM parameters to capture lead source when you are embedding a Pardot form on a Pardot landing page. In this post, I will cover how to implement the same method using an iFramed form on a web page.

Note: step 1 and step 2 are the same as the instructions outlined in part 1.

Step 1: Create new fields and add them to your forms

The first thing you need to do is create 2 new fields in Salesforce and in Pardot and map them. You don’t need to create a field for utm_source, we will use the standard source field in Pardot.

utm_medium
utm_campaign

Next, add the fields to your Pardot form. All 3 fields should be hidden and not marked as required.

Step 2: Add Some Code to Your Landing Page Templates

This piece of code will parse the URL parameters and put the values into the hidden fields within your form. This code can be placed within your landing page template or within your form in the below form section.

<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');
 
// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"
document.querySelector("p.source input").value = source;
document.querySelector("p.utm_medium input").value = medium;
document.querySelector("p.utm_campaign input").value = campaign;
</script>

// 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');

// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"

document.querySelector("p.source input").value = source;

document.querySelector("p.utm_medium input").value = medium;

document.querySelector("p.utm_campaign input").value = campaign;

</script>

Note: If you don’t use the field names outlined in this tutorial, you might need to update the JavaScript to include the correct field names.

Step 3: Embed your form on your web page

Use the standard iFrame code Pardot provides to embed your form on your webpage.

Step 4: Give your iFrame and ID and add the JavaScript

Since we will be adding some JavaScript to the web page in order to pass the parameters to the iFrame, we need to give the iFrame an ID. Here’s what my iFrame code looks like after adding the ID called “myiframe”.

<iframe src="https://go.pardot.com/l/xxxx/xxxx-xx-xxx/xxxxx" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" id="myiframe"></iframe>

1	<iframe src="http://go.pardot.com/l/xxxx/xxxx-xx-xxx/xxxxx" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" id="myiframe"></iframe>

Add the JavaScript to your web page that will pass the URL paramters from the parent page to the embedded Pardot iFrame form.

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

var iframe = document.getElementById('myiframe');

iframe.src = iframe.src + window.location.search;

</script>

If you used a different ID for your iFrame, other than “myiframe”, you will need to update the ID within the JavaScript.

Create URLs and Test

Now you’re ready to start creating URLs and testing your form. Use this handy URL builder to create your links and then fill out the form to see if the values go into Pardot.