Created
March 20, 2023 17:38
-
-
Save Garconis/bfdbddec1282ba6b91ee149ebff754c3 to your computer and use it in GitHub Desktop.
Gravity Forms | Log a parameter value to local storage and send with Gravity Form entry, such as Google Ads GCLID or other params
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// get parameters of URL | |
function getParam(p) { | |
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search); | |
return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); | |
} | |
// set expiration date | |
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 | |
}; | |
} | |
// get desired param (gclid), specify the form field id to add it to, add it to local storage, and set the value in the form field | |
function addGclid() { | |
var gclidParam = getParam('gclid'); // what param to get | |
var gclidFormFields = ['input_6_16']; // all possible gclid form field ids here, e.g., ['gclid_field', 'foobar'] | |
var gclidRecord = null; | |
var currGclidFormField; | |
var gclsrcParam = getParam('gclsrc'); //gclsrc param indicates the source of the click ID, but can also be empty | |
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); | |
// get desired param (device), which we set via the Google Ads ValueTrack parameters, then specify the form field id to add it to, add it to local storage, and set the value in the form field | |
function addAdsDevice() { | |
var adsDeviceParam = getParam('device'); // what param to get | |
var adsDeviceFormFields = ['input_6_21']; // form field to put the param value | |
var adsDeviceRecord = null; // set the local storage record as null to start | |
var currAdsDeviceFormField; | |
// for each input field we specified | |
adsDeviceFormFields.forEach(function (field) { | |
if (document.getElementById(field)) { | |
currAdsDeviceFormField = document.getElementById(field); // get the desired input field(s) | |
} | |
}); | |
// if the parameter existed | |
if (adsDeviceParam) { | |
adsDeviceRecord = getExpiryRecord(adsDeviceParam); // get the desired expiration date that we specified in our previous function | |
localStorage.setItem('device', JSON.stringify(adsDeviceRecord)); // set the local storage item with the name and value, with the desired expiration date | |
} | |
var device = adsDeviceRecord || JSON.parse(localStorage.getItem('device')); // the value we found or was previously set | |
var isAdsDeviceValid = device && new Date().getTime() < device.expiryDate; // variable if param value existed and had a date set previously | |
// if we found the form input to add to, and there was a valid param value to send | |
if (currAdsDeviceFormField && isAdsDeviceValid) { | |
currAdsDeviceFormField.value = device.value; // set the form input value | |
} | |
} | |
window.addEventListener('load', addAdsDevice); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I inspect the form on the site, and find the hidden input, and grab its
id
value. It's typically the form's ID, followed by an underscore, followed by the input's ID. So if you are working on Gravity Form #1 and on input's ID of #19, then the input should beinput_1_19
.