Capture GCLID On Website & Hidden Form

[maryclayton]

Hi,

I'm wanting to capture the GCLID cookie on my website then transfer that to a hidden form field within my Marketo forms, so I can get the offline conversion attribution. I have already created the hidden form, set to capture based on cookie, but I haven't figured out how to get the cookie to be stored on my website.

Below is the code I have been given to capture the GCLID on my website; however, it is written for form ID - not form name. Does anyone know how to rewrite the code or know other alternatives, so I can capture the information and send the cookie GCLID information to that hidden field and appropriate form name?

function getParam(p) {
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function getExpiryRecord(value) {
var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 day expiry in milliseconds

var expiryDate = new Date().getTime() + expiryPeriod;
return {
value: value,
expiryDate: expiryDate
};
}

function addGclid() {
var gclidParam = getParam('gclid');
var gclidFormFields = ['gclid_field', 'foobar']; // all possible gclid form field ids here
var gclidRecord = null;
var currGclidFormField;

var gclsrcParam = getParam('gclsrc');
var isGclsrcValid = !gclsrcParam || gclsrcParam.indexOf('aw') !== -1;

gclidFormFields.forEach(function (field) {
if (document.getElementById(field)) {
currGclidFormField = document.getElementById(field);
}
});

if (gclidParam && isGclsrcValid) {
gclidRecord = getExpiryRecord(gclidParam);
localStorage.setItem('gclid', JSON.stringify(gclidRecord));
}

var gclid = gclidRecord || JSON.parse(localStorage.getItem('gclid'));
var isGclidValid = gclid && new Date().getTime() < gclid.expiryDate;

if (currGclidFormField && isGclidValid) {
currGclidFormField.value = gclid.value;
}
}

window.addEventListener('load', addGclid);

Thanks!

[SanfordWhiteman · Accepted solution]

Ouch, that code is incredibly hard to look at.... off in so many ways.

It's not the first time I've seen it, luckily. Just last week somebody asked about that same snippet and we rewrote it to actually work:

MktoForms2 :: gclid tracker refactored

Add the code in the CodePen JS pane after your form embed.

Just set gclidFormFieldName to the Marketo (SOAP) field name you're using to store the most recent gclid. In the demo, the field name is MostRecentGclid.

[Robert_Stanley]

Hi Sanford, thank you for the suggestion, but when I try and add that code to my Google Tag Manager I get the error message:

"This language feature is only supported for ECMASCRIPT_2015 mode or better: const declaration."

Do you know if something should be changed if you are trying to add this to Google Tag Manager? I would like to add this sitewide so it works on every form if possible. 

[SanfordWhiteman]

Do you need to support IE 10 or lower?

[Robert_Stanley]

Thank you for responding! No we do not.

[SanfordWhiteman]

Regardless, looks like GTM won't support later-model let and const, even though they are supported in IE 11.  (The error is from Closure Compiler, not from GTM per se, but GTM uses CC.)

Unfortunately, you're going to have to change these both to var wherever they appear if you deploy via GTM. I don't like this at all — frankly I would not paste this code in GTM if it has to be made old-fashioned like this.

[Robert_Stanley]

OK thank you very much for the information, that's very helpful. 

[Robert_Stanley]

Hello Sanford - I just wanted to let you know that this code is working perfectly.  Appreciate the help!

[SanfordWhiteman]

Great!

[Robert_Stanley]

Sanford - this code has been working for a while, thank you! Only problem I have now is that I need all scripts in GTM in order to manage cookies in a CMP for GDPR. If I swap out "var" for "cont" and "let" will the code stop working?  Thanks!