How To Use UTM Parameters to Capture Lead Source in Pardot

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.

You might already be using UTM parameters to track your marketing campaigns with Google Analytics, but are you capturing that information when a prospect is created in Pardot? Capturing this data is critical in order to assess the value of your marketing campaign and is a lead management best practice.

What are UTM Parameters?

UTM parameters are tags you add to a URL. Marketers use this to be able to track the traffic from a variety of sources such as email, social media, banner ads, etc. The tags can be sent back to Google Analytics and tracked which can be used to gauge the effectiveness of campaigns and identify the best ways to drive more visitors to your website.

Create New Fields

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

Add The New Fields to Your Pardot Forms

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

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.

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.

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

57 Comments

Leave a Reply Cancel reply

Naren verma says:

June 8, 2022 at 7:17 am

I have tried but it’s not working for me. I am getting UTM value on the console.

When i run the code then i am getting error in the console Uncaught TypeError: document.querySelector(…) is null

then I updated my code like this and error gone.

document.addEventListener(“load”, function(){
// Give the URL parameters variable names
var source = getParameterByName(‘utm_source’);
var medium = getParameterByName(‘utm_medium’);
var campaign = getParameterByName(‘utm_campaign’);
//console.log(source);
//console.log(medium);
//console.log(campaign);
// 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;

});

Now I try t check the UTM value set or not using inspect then it’s showing empty. Any idea on this

Reply
- Jenna Molby says:
  
  June 8, 2022 at 8:48 am
  
  Hi Naren, DM me the link to your page and I can take a look.
Hilary says:

February 2, 2022 at 12:09 pm

Can you please show us your selections on the Advanced Tab when creating the hidden fields on a form to capture UTM data?

Reply
- Jenna Molby says:
  
  February 5, 2022 at 10:02 am
  
  Hi Hilary, Here’s a screenshot of the settings I use: https://jennamolby.com/wp-content/uploads/2022/02/utms_in_Pardot.png. I like to capture every UTM touchpoint and not do any pre-fill.
Kat says:

April 14, 2021 at 10:19 am

If we’re using the Google Analytics connector, is this article required or does it provide additional info that the connector would otherwise miss? I don’t quite understand the difference. Thanks.

Reply
- Jenna Molby says:
  
  April 15, 2021 at 10:57 am
  
  Hi Kat, Capturing UTM parameters this way is not required, but it can give you some additional information. Using the Google Analytics connector is great, but it will populate the UTM for NEW prospects ONLY. Meaning that if someone already exists in Pardot you won’t get that information. The Google Analytics connector also only populates the UTM fields once, so if you want to be capturing first and last touch, it wouldn’t work for that.
Vince Lione-Napoli says:

June 17, 2020 at 12:42 pm

Hey Jenna,
Great article, but I just cannot get this to work! For the bottom snippet, am I supposed to be replacing YOURFIELDNAME with our Pardot API field, or the name, or the form label, or what?

Even when testing the form on its own outside of an iframe, it’s just not grabbing the UTMs and putting them in their proper fields.

Thanks!

Reply
- Jenna Molby says:
  
  June 18, 2020 at 1:28 pm
  
  Hi Vince, Thank you! It’s supposed to be the API field name. If you aren’t sure what the name is, you can use Chrome developer tools to find the name of the HTML class https://developers.google.com/web/tools/chrome-devtools/css/reference. Cheers, Jenna
Riley says:

June 16, 2020 at 11:42 am

Hi Jenna, we are having some issues with this. Can you clarify something in the code for me – are the field names the API field names from the Pardot field, the field labels from the pardot field, or the Label from the Form Field itself? Additionally, whichever one it is, is it case sensitive? I am not sure if I need to update the code you’ve provided if my Pardot API is UTM_campaign instead of utm_campaign.

Reply
- Jenna Molby says:
  
  June 16, 2020 at 1:35 pm
  
  Hi Riley, it should be the API field names (or the field ID) of the Pardot field. Yes, it is case sensitive. Hope that helps! Cheers, Jenna