Capture GCLID Stored in Cookie

[Aron_Skversky]

Hi folks,

We’re trying to capture a Google Ads Click ID (GCLID) upon form submission - this will allow us to stitch together post-conversion performance to the original AdWords click.

We’re storing this parameter in a cookie when a user arrives on one of our page (per step 2.1 here: https://support.google.com/adwords/answer/7012522?hl=en).

However, we’re having trouble pulling this parameter out of the cookie upon form submission in Hubspot forms.

Anyone have any ideas as to how to make this happen?

See here for an example of this setup: http://direct.datorama.com/lp4/?gclid=testtesttest

Thanks!

[DavidPastorino]

I am using the following code in tag manager for the page in question. You would need to change your form id obviously,embed the form in RAW HTML and make sure the field is hidden. Then I have a zapier integration to connect the offline connection and form submission.

Hope it helps!

<script>

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

function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
var nameEQ = 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;
}

function addGclidToForm() {
var hubspotForm = document.getElementById('hsForm_22c4644f-8001-4f91-a34a-3b16a8e2c551');

if (hubspotForm) {
var gclid = getCookie('gclid');

if (gclid) {
var gclidInput = document.createElement('input');
gclidInput.type = 'hidden';
gclidInput.name = 'gclid';
gclidInput.value = gclid;

hubspotForm.appendChild(gclidInput);
}
clearInterval(checkFormInterval);
}
}

var currentUrl = document.location.href;

var gclidParam = getParam('gclid', currentUrl);

var gclsrcParam = getParam('gclsrc', currentUrl);

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

if (gclidParam && isGclsrcValid) {
setCookie('gclid', gclidParam, 90); // 90 day expiry
}

// Check for the form's presence every 500 milliseconds
var checkFormInterval = setInterval(addGclidToForm, 500);

</script>

[Danielle1]

I figured out how to store and capture the GCLID using the code below in Tagmanager for contacts in Hubspot. However, I still need code to do the same thing for the MSCLKID (Microsoft Click ID for Microsoft Ads). If you know how to fix this problem, please paste the code for tagmanager in the reply.

If you need help with storing the GCLID, paste the code below into tagmanager using all pages as the trigger.

<script>

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);

</script>

You will also have to create a property in Hubspot called gclid and change it to hidden on your forms. 

[LBobocea]

hey, 

So you have used this script in GTM to capture the hidden field from the HubSpot forms, correct? It worked?

Thank you,

Laura

[Danielle1]

Yes

[DavidPastorino]

Hi Danielle,

Thank you for the code. It works well on GTM. I am facing a simple issue, usually the worst. The hubspot forms we use are standalone, not embedded in the page. I understand it will not be able to capture the information from the cookie, is this correct?

We need to pre-populate the form with another hidden field based on the link click on the website, and this seems quite complex. The pre-population requires no-design raw html forms, which design-wise is ugly. Do you have any insights on this?

Thank you in advance!

David

[zackphilipps]

Hi @Aron_Skversky and @ChrisJustin,

I recently wrote a blog post detailing how to solve for this: http://zackphilipps.com/store-gclid-cookie-send-to-hubspot/

Check it out and let me know what you think!

Cheers,

ZP

[EDecker2]

Looks like your site is down. Can I access that blog somehow?

[simran-s]

Hi @zackphilipps, I'm trying to record offline conversions as well and have a few questions about the stuff in the article you wrote. So basically the steps to record GCLID and send that data to hubspot are:
- create a tag in tag manager that triggers on all pages with the code that you posted in the article
- Replace the "name", "value", "days" with "gclid", "[whatever value we want to set]", "[x days]"

- The part with assigntrackingparametertocookie I do not understand at all. Could you elaborate please.

- create a hidden field in my hubspot form that captures gclid.

Is this somewhat correct? As I am not a developer some of the things are a bit harder for me to understand.

[#10]

Just tested this out. For some reason the Gravity Form was not being hidden, despite following the settings in your gif. Anyway, I think I was able to figure it out based on your post, after a lot of troubleshooting and learning about Google Tag Manager. Thanks!

[zackphilipps]

@ChrisJustin Setting the field won’t hide the entire form, just that field. If that setting wasn’t hiding your field, could be an issue with your theme.

Glad it ended up working out for you!

[vavaye]

Hi @zackphilipps 

the blog you wrote here http://zackphilipps.com/store-gclid-cookie-send-to-hubspot/  seems to be unavailable. Could you reshare the info with me, please! 

[mier]

You can find the blog article here at the below link. Apparently it has been changed since he posted it here. 

https://zackphilipps.dev/posts/store-gclid-cookie-send-to-hubspot

[#14]

I’ve got the same challenge. What have you tried so far?