Collecting GCLID From Google Ads Visitor & Adding To Hidden Form Field

If you're reading this, it means you're probably trying to set up offline conversion tracking for your Google Ads campaign. It allows you to track offline sales conversions in your Google Ad campaign.

This makes it easier of course to optimize your ad campaign to increase your return on ad spend by giving you cost per offline sale data instead of just cost per call/form submission data.

Visitors who come to your website by clicking on your Google Ad are tagged (I'm assuming you already have enabled Google Ads auto-tagging) with a unique ID called the GCLID, which I believe stands for 'Google Click ID'. The GCLID string of random letters and numbers that makes a unique ID for that visitor. It's found in the URL when they click over to your landing page and looks something like this:

yourdomain.com?gclid=sod8sd0923sdfoij392092jsdflkje

Now the goal here is to get that GCLID into a hidden form field in the form and so if the Google Ad visitor fills out the form, their unique GCLID will be passed along with their info into your sales CRM.

The trick then is how to grab this unique GCLID data found in the URL (i.e. query string parameter data) automatically when the page loads and put it into the hidden form field.

Fortunately, Google provides the javascript necessary to make this happen. You can find it here:

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

This code assumes the ID on the hidden form field element is 'gclid_field'. If the html ID for your hidden for field is something else, you'll have to update the script above so it includes the correct html ID.

‍