Collect GCLID for offline google ads conversion with Livestorm

  • 15 March 2024
  • 0 replies
  • 18 views

My first intention was to to collect the Google Clic ID from google ads into livestorm registrant and push it back to google ads to recrod and offline conversion. 

Problem : Livestorm doesn’t store natively the google clic ID.

 

Solution :

  • Connect to your livestorm admin acount
  • crate a new personnalized field called  "GCLID" on Livestorm.
  • Ad this field to the subsciption form of your event (it will be hidden by the following script)
  • Go to the “apps” section
  • select the app “custom code”
  • Copy and paste the following script code  (for more information see instuction here: Custom Code) : 

<script>

window.addEventListener("load", function () {

const params = new URLSearchParams(window.location.search)

const customFields = [

{ slug: "gclid", value: params.get("gclid") },

];

function fieldExists(selector) {

return !!document.querySelector(selector);

}

function waitForCustomBlock(selector) {

return new Promise((resolve) => {

if (document.querySelector(selector)) {

return resolve(document.querySelector(selector));

}

const observer = new MutationObserver((mutations) => {

const foundElement = document.querySelector(selector);

if (foundElement) {

observer.disconnect();

resolve(foundElement);

}

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

});

}

const changeCustomFieldValue = (input, value) => {

if (input) {

// Ensure input exists

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(

window.HTMLInputElement.prototype,

"value"

).set;

nativeInputValueSetter.call(input, value);

var inputEvent = new Event("input", { bubbles: true });

input.dispatchEvent(inputEvent);

}

};

async function handleCustomField(field) {

if (!fieldExists(`div[data-form-field='${field.slug}']`)) {

return; // Skip this field if it doesn't exist

}

const customBlock = await waitForCustomBlock(

`div[data-form-field='${field.slug}']`

);

customBlock.style.display = "none";

const customInput = document.querySelector(

`input[data-testid='${field.slug}']`

);

if (customInput) {

changeCustomFieldValue(customInput, field.value);

}

}

async function processCustomFields() {

for (const field of customFields) {

await handleCustomField(field);

}

}

const modalNode = document.querySelector("#teleport-end");

if (modalNode) {

const config = { childList: true, subtree: true };

const modalObserver = new MutationObserver(() => processCustomFields());

modalObserver.observe(modalNode, config);

} else {

processCustomFields(); // Directly process if modalNode isn't present

}

});

</script>

  • Go to your event parameter and make sure the custom app is selected :

Then the GCLID will be collected and you will be able to make the link between your google ad and livestorm and to run a conversion target ad.

 


0 replies

Be the first to reply!

Reply