How to Use Cookies to Capture URL Parameters

In this example, we will be setting 4 different cookies and we’ll show you how to set many more.

1. utm_source
2. utm_medium
3. utm_campaign
4. some_random_param

1. Parse The URL

First create a function that will pull parameters from 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, ' ')); }

Here you can see that if you give the URL parameters, it will return the value

var pValue = getParameterByName('utm_source');

2. Add the Cookie Library

I would recommend using js-cookie because it is light-weight and does not require jQuery but IS compatible with jQuery.

Here I have included js-cookie from https://rawgit.com/ CDN.

 <script type="text/javascript" src="//cdn.rawgit.com/js-cookie/js-cookie/8b70250875f7e07445b6a457f9c2474ead4cba44/src/js.cookie.js"></script>

3. Set the cookie values! (Bake those Cookies)

We will set the cookies if they exist.

var all_the_params_to_track = [ 'utm_source', 'utm_medium', 'utm_campaign', 'some_random_param' ]; all_params_to_persist.forEach(function(param) { var pValue = getParameterByName(param); if (pValue != null || pValue != '') { Cookies.set(param, pValue); } var cValue = Cookies.set(param); var input = $('input[name='+ param +']') if (input && (cValue != null || cValue != '')) { input.val(cValue); } });

what is this doing:

• loop through ALL the params you want to track.
• if the parameter exists in the URL, store the cookie.
• if the parameter does not exist, then it will leave the cookie as-is.
• find an input by the name of the parameter, example: $('input[name=utm_source]')
• if the cookie value exists and the input for the same name exists, replace the value