In this example, we will be setting 4 different cookies and we’ll show you how to set many more.
utm_source
utm_medium
utm_campaign
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