How to Use Cookies to Capture URL Parameters

In:

A couple months ago I wrote a tutorial on how to use UTM parameters to capture lead source. The tutorial is an in-depth overview of how to capture URL parameters when a lead visits a landing page directly but if a lead visits a different page then fills out the form, those URL parameters won’t be captured. To fix this issue, you can store cookies in the lead’s browser and configure the form fields to pull from the cookie values instead of the URL parameter.

hidden-fields-in-forms-2

In this example, we will be setting 3 different cookies.

  1. utm_source
  2. utm_medium
  3. utm_campaign

Parse the URL

The URL parameters need to be parsed so the cookie values can be set. This can be done using javascript.

Setting the Cookie Values

In order to set the cookie values, jQuery and the jQuery Cookie Plugin must be on the page.

The syntax for creating a cookie using the jQuery plugin is very simple.

Using the variables defined in the first step, the cookie values can be set.

Testing

To ensure the cookie values are being stored in the browser correctly, open up Chrome -> Developer Tools and click on the Resources tab.

utm-cookies

The cookies utm_source, utm_medium and utm_campaign should be visible in the console.

Setting the Form Field Values

Now that all the UTM parameters are being stored in the lead’s browser, the forms need to be configured to grab the cookie value.

Putting it All Together

The Code on your page should look similar to this.

Questions?

Email me, or send me a tweet @jennamolby.

Related Posts

  • 04/10/2020
    How To Embed a Pardot Form on Your Website The Right Way

    Pardot offers 2 methods for embedding forms on your website; embedding using an iframe, and form handlers. While the embedded iFrame forms allow marketers to have control over updating and configuring the forms, using an iFrame isn’t always ideal for website usability. In this tutorial, I will show you how to take advantage of the Pardot iFrame forms and make it look great embedded on your website.

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

  • 02/06/2020
    7 Tips for Organizing Your Campaigns in Salesforce

    Salesforce campaigns can help you track each of your marketing initiatives in detail. These can include online advertisements, emails, or more specialized marketing events such as demos and tradeshows. You can use campaigns to analyze how many leads you are generating, how much pipeline you are building, and how many deals are closing as a result of your marketing efforts. However, in order to track and analyze your campaigns effectively, you need to have an organizational structure in place. Whether you are setting up campaigns for the first time or looking for a way to get more out of campaigns, here are 7 tips to help you get started with your campaign organization.

10 comment(s)
  • Nick

    10/10/2017 at 12:20 pm
    Reply

    You should place this in github - it's really useful code!

  • N

    14/08/2017 at 2:57 pm
    Reply

    How do you pass the value? Im able to see cookie name but it doesn't submit the value. Great tutorial BTW!!

  • Whitney

    12/05/2017 at 10:28 am
    Reply

    Thank you for this well-written tutorial. It was much easier to follow than the other examples I found. I was easily able to also incorporate the referring url. For your information though: the jQuery Cookie Plugin is no longer supported and the new plugin is at https://github.com/js-cookie. The code has to be updated to Cookies.set instead of $.cookie Also, I was unable to get the following code to work: 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, " ")); } So I replaced it with code I found from a similar tutorial: function getParameterByName(name) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i

  • Jessie

    24/02/2017 at 9:04 am
    Reply

    You are a lifesaver! Thank you!!

  • […] to get value from cookie value, but it doesn’t store the cookie for you. You will need some javascript code embeded on your website to store the […]

Leave A Comment

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

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts