SOLVED

Autofill with Cookie Value

Go to solution
Trevor_Parsell
Level 6

Autofill with Cookie Value

Hey All,

We have many scenarios where it makes sense to use URL Parameters and Referrer Parameters to fill hidden fields, but we are not using the Cookie Values option for anything.

What are the standard use-cases and best practices for using Cookie Values to auto-fill Marketo form fields? I am just looking to understand this at a high level to make sure we can make the most of this functionality.

pastedImage_0.png

Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Autofill with Cookie Value


I'm not Sanford, but maybe you'll find this JS useful. Just don't forget to update domain name.

This script saves UTM parameters in cookies whenever there are any UTM parameters in the URL. It also saves the initial referrer information in a cookie which is ever (365 days) overwritten.  The values in the cookies can be read and added to forms or stored in the backend database, etc.


var utmCookie = {

  cookieNamePrefix: "",

  utmParams: [

  "utm_source",

  "utm_medium",

  "utm_campaign",

  "utm_term",

  "utm_content"

  ],

  cookieExpiryDays: 365,

  // From http://www.quirksmode.org/js/cookies.html

  createCookie: function (name, value, days) {

  if (days) {

  var date = new Date();

  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

  var expires = "; expires=" + date.toGMTString();

  } else

  var expires = "";

  document.cookie = this.cookieNamePrefix + name + "=" + value + expires + "; domain=.abilitynetwork.com; path=/";

  },

  readCookie: function (name) {

  var nameEQ = this.cookieNamePrefix + name + "=";

  var ca = document.cookie.split(';');

  for (var i = 0; i < ca.length; i++) {

  var c = ca[i];

  while (c.charAt(0) == ' ')

  c = c.substring(1, c.length);

  if (c.indexOf(nameEQ) == 0)

  return c.substring(nameEQ.length, c.length);

  }

  return null;

  },

  eraseCookie: function (name) {

  this.createCookie(name, "", -1);

  },

  getParameterByName: function (name) {

  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

  console.log(name);

  var regexS = "[\\?&]" + name + "=([^&#]*)";

  var regex = new RegExp(regexS);

  var results = regex.exec(window.location.search);

  if (results == null) {

  return "";

  } else {

  return decodeURIComponent(results[1].replace(/\+/g, " "));

  }

  },

  utmPresentInUrl: function () {

  var present = false;

  for (var i = 0; i < this.utmParams.length; i++) {

  var param = this.utmParams[i];

  var value = this.getParameterByName(param);

  console.log(param + ' = ' + value);

  if (value != "" && value != undefined) {

  present = true;

  }

  }

  return present;

  },

  writeUtmCookieFromParams: function () {

  for (var i = 0; i < this.utmParams.length; i++) {

  var param = this.utmParams[i];

  var value = this.getParameterByName(param);

  this.writeCookieOnce(param, value)

  }

  },

  writeCookieOnce: function (name, value) {

  var existingValue = this.readCookie(name);

  if (!existingValue) {

  this.createCookie(name, value, this.cookieExpiryDays);

  }

  },

  writeReferrerOnce: function () {

  value = document.referrer;

  if (value === "" || value === undefined) {

  this.writeCookieOnce("referrer", "direct");

  } else {

  this.writeCookieOnce("referrer", value);

  }

  },

  referrer: function () {

  return this.readCookie("referrer");

  }

};

utmCookie.writeReferrerOnce();

if (utmCookie.utmPresentInUrl()) {

  utmCookie.writeUtmCookieFromParams();

}

View solution in original post

27 REPLIES 27
Josh_Hill13
Level 10 - Champion Alumni

Re: Autofill with Cookie Value

Sanford Whiteman​ probably knows.

Sounds like you could force a cookie ID to pass over to a field.

SanfordWhiteman
Level 10 - Community Moderator

Re: Autofill with Cookie Value

You use Cookie Value when you're purposely persisting values in cookies to pass them around your site -- by far the most common use is to save initial utm_* query params and then restore them into forms later.

Anonymous
Not applicable

Re: Autofill with Cookie Value

Pretty much. We do that so that we can track initial utm all across the website rather than just the landing page, as well as prevent from having  it overwritten by consequent utms.

Trevor_Parsell
Level 6

Re: Autofill with Cookie Value

Thanks, Sanford. That makes sense and is exactly what we would like to do!

I am new to using cookies. How do you go about setting this up to capture "Original utm" values that can later be accessed when a form is submitted? Our plan is to capture "First utm" values for all form submits.

Anonymous
Not applicable

Re: Autofill with Cookie Value


I'm not Sanford, but maybe you'll find this JS useful. Just don't forget to update domain name.

This script saves UTM parameters in cookies whenever there are any UTM parameters in the URL. It also saves the initial referrer information in a cookie which is ever (365 days) overwritten.  The values in the cookies can be read and added to forms or stored in the backend database, etc.


var utmCookie = {

  cookieNamePrefix: "",

  utmParams: [

  "utm_source",

  "utm_medium",

  "utm_campaign",

  "utm_term",

  "utm_content"

  ],

  cookieExpiryDays: 365,

  // From http://www.quirksmode.org/js/cookies.html

  createCookie: function (name, value, days) {

  if (days) {

  var date = new Date();

  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

  var expires = "; expires=" + date.toGMTString();

  } else

  var expires = "";

  document.cookie = this.cookieNamePrefix + name + "=" + value + expires + "; domain=.abilitynetwork.com; path=/";

  },

  readCookie: function (name) {

  var nameEQ = this.cookieNamePrefix + name + "=";

  var ca = document.cookie.split(';');

  for (var i = 0; i < ca.length; i++) {

  var c = ca[i];

  while (c.charAt(0) == ' ')

  c = c.substring(1, c.length);

  if (c.indexOf(nameEQ) == 0)

  return c.substring(nameEQ.length, c.length);

  }

  return null;

  },

  eraseCookie: function (name) {

  this.createCookie(name, "", -1);

  },

  getParameterByName: function (name) {

  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

  console.log(name);

  var regexS = "[\\?&]" + name + "=([^&#]*)";

  var regex = new RegExp(regexS);

  var results = regex.exec(window.location.search);

  if (results == null) {

  return "";

  } else {

  return decodeURIComponent(results[1].replace(/\+/g, " "));

  }

  },

  utmPresentInUrl: function () {

  var present = false;

  for (var i = 0; i < this.utmParams.length; i++) {

  var param = this.utmParams[i];

  var value = this.getParameterByName(param);

  console.log(param + ' = ' + value);

  if (value != "" && value != undefined) {

  present = true;

  }

  }

  return present;

  },

  writeUtmCookieFromParams: function () {

  for (var i = 0; i < this.utmParams.length; i++) {

  var param = this.utmParams[i];

  var value = this.getParameterByName(param);

  this.writeCookieOnce(param, value)

  }

  },

  writeCookieOnce: function (name, value) {

  var existingValue = this.readCookie(name);

  if (!existingValue) {

  this.createCookie(name, value, this.cookieExpiryDays);

  }

  },

  writeReferrerOnce: function () {

  value = document.referrer;

  if (value === "" || value === undefined) {

  this.writeCookieOnce("referrer", "direct");

  } else {

  this.writeCookieOnce("referrer", value);

  }

  },

  referrer: function () {

  return this.readCookie("referrer");

  }

};

utmCookie.writeReferrerOnce();

if (utmCookie.utmPresentInUrl()) {

  utmCookie.writeUtmCookieFromParams();

}

Trevor_Parsell
Level 6

Re: Autofill with Cookie Value

Thanks, Paul! This is very helpful!

So in the script above I would just need to replace".abilitynetwork.com" with my domain name? And then just add this to any pages we want to track?

When pulling the initial referrer information into the form, how do I make sure I am differentiating between the "First UTM" and "Last UTM" values and attaching both to the lead record upon submit? What is a good way to test this once it is in place?

Thanks!

SanfordWhiteman
Level 10 - Community Moderator

Re: Autofill with Cookie Value

When pulling the initial referrer information into the form, how do I make sure I am differentiating between the "First UTM" and "Last UTM" values and attaching both to the lead record upon submit? What is a good way to test this once it is in place?

This script doesn't record multiple previous (i.e. not on the current URL) utm_* params.

But it would let you map one set of saved cookie params to a corresponding set of Marketo fields and the current page's query params to another set of Marketo fields (just set the source of the Hidden field). If there weren't any params from previous pages, the field sets will be identical.

Trevor_Parsell
Level 6

Re: Autofill with Cookie Value

Hey Sanford,

Just to make sure i understand this, you are saying I should be able to pull the original utm_source from the cookie value and the "last" utm_source from the URL Parameters, correct?

For Original UTM values:

pastedImage_0.png

For Last UTM values:

pastedImage_1.png

SanfordWhiteman
Level 10 - Community Moderator

Re: Autofill with Cookie Value

Exactly!