Skip to content

Instantly share code, notes, and snippets.

@Garconis
Created March 20, 2023 17:38
Show Gist options
  • Save Garconis/bfdbddec1282ba6b91ee149ebff754c3 to your computer and use it in GitHub Desktop.
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
// 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);
@Wafy-source
Copy link

Hello , i want to try this script , where did i have to insert this script to make it working , i trying on GTM but it still not working , i changed

var gclidFormFields = ['input_6_16']; // all possible gclid form field ids here, e.g., ['gclid_field', 'foobar']

with

var gclidFormFields = ['input_1_19']; // all possible gclid form field ids here, e.g., ['gclid_field', 'foobar']

Because this is my entry but he is still empty after i send a form

Maybe i can add it in WP directly ?

@Garconis
Copy link
Author

You should be able to add it to your child theme's JavaScript file, or anything else that loads a JS file in the footer area (probably also needs to come after the Gravity Form JS file).

@Wafy-source
Copy link

Thank you i'm afraid to modify the theme and broke everything do you think i can use a plugin like WPcode and add a footer script to load your script ?

@Garconis
Copy link
Author

Yes, I personally recommend https://wordpress.org/plugins/header-footer/

@Wafy-source
Copy link

Wafy-source commented Jul 30, 2024

Thanks thats exactly the same i will try to use

I want to sent my gclid inside a hidden entry i created on Gform.

When i created the gform how do u find the id of the input u need to insert inside your script ?

I modify a little bit your script for me do you think he is good. :

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

var gclid = getParam('gclid');
if (gclid) {
localStorage.setItem('gclid', gclid);
}

function addGclid() {
var gclidParam = getParam('gclid');
var gclidField = document.querySelector('input[name="input_109"]');
var gclid = null;

if (gclidParam) {
    localStorage.setItem('gclid', gclidParam);
    gclid = gclidParam;
} else {
    gclid = localStorage.getItem('gclid');
}

if (gclidField && gclid) {
    gclidField.value = gclid;
    console.log('Champ trouvé et valeur gclid insérée :', gclid);
} else {
    console.log('Champ non trouvé ou gclid non disponible');
}

}

@Garconis
Copy link
Author

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 be input_1_19.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment