The widget uses a static UTM thats set at initialization, so you would have to use Javascript to update it before the page initializes (or reinitializes) the widget from your cookie, essentially replacing it each time you have a new UTM.
- On the first website visit, capture any UTM parameters from the browser address bar and store the UTM values in the browser cookies. (Sounds like you have done this!)
- Whenever the UTM parameter changes in the browser address bar, update the browser cookies with the new UTM parameter values.
- On every page where Calendly is embedded, retrieve the UTM parameters from the browser cookies and place them in the Calendly initialization function. (You would need to replace the UTM set for the widget in widgets original initialization call, and reinitialize it with that new value, so that it submits whatever UTM that is included in the url you navigated to the page from)
Thanks so much Clifton for your quick response!
This is what I have done exactly :)
Here is my script which I’m firing via GTM on all pages:
<script>
setTimeout(function() {
console.log("Calendly UTM script started - delayed execution");
// Function to get the value of a cookie by name
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) {
return parts.pop().split(";").shift();
}
return null;
}
// Function to parse UTM parameters from a URL
function getUTMParams(url) {
try {
// Prepend protocol if missing
if (url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0) {
url = 'https://' + url;
}
var urlParams = new URL(url).searchParams;
return {
utm_source: urlParams.get('utm_source'),
utm_campaign: urlParams.get('utm_campaign'),
utm_medium: urlParams.get('utm_medium'),
utm_content: urlParams.get('utm_content'),
utm_term: urlParams.get('utm_term')
};
} catch (error) {
console.error("Error parsing UTM parameters from URL:", error);
return {};
}
}
try {
// 1. Check for a Calendly embed on the page
var calendlyEmbed = document.querySelector('.calendly-inline-widget');
if (!calendlyEmbed) {
console.warn("No Calendly embed found on the page.");
return; // Exit if no Calendly embed is found
}
console.log("Calendly embed found on the page.");
// 2. Get the value of the `__gtm_campaign_url` cookie
var campaignUrl = getCookie('__gtm_campaign_url');
if (!campaignUrl) {
console.warn("No campaign URL found in the '__gtm_campaign_url' cookie.");
return; // Exit if no campaign URL found in cookie
}
console.log("Campaign URL found:", campaignUrl);
// Decode the campaign URL in case it is URL-encoded
var decodedUrl = decodeURIComponent(campaignUrl);
// 3. Parse UTM parameters from the decoded campaign URL
var utmParams = getUTMParams(decodedUrl);
console.log("Parsed UTM parameters:", utmParams);
// 4. Dynamically set the UTM parameters to Calendly
var calendlyUrl = new URL(calendlyEmbed.getAttribute('data-url'));
for (var key in utmParams) {
if (utmParams.hasOwnProperty(key) && utmParams;key]) {
calendlyUrl.searchParams.set(key, utmParams,key]);
}
}
// Update Calendly URL with UTM parameters
calendlyEmbed.setAttribute('data-url', calendlyUrl.toString());
console.log("Updated Calendly URL with UTM parameters:", calendlyUrl.toString());
// Reinitialize Calendly embed to apply new URL with UTM parameters
Calendly.initInlineWidget({
url: calendlyUrl.toString(),
parentElement: calendlyEmbed.parentElement
});
console.log("Calendly widget reinitialized with updated URL.");
} catch (error) {
console.error("An error occurred while setting UTM parameters for Calendly:", error);
}
}, 1000); // Delay of 1 second to allow page elements to load
</script>
I’m not sure I 100% understand your workflow, my only suggestion is to try setting the UTM information from the cookie, in the utm argument, when you call Calendly.initInlineWidget
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK/30min',
utm: {
utmCampaign: ":Information stored in Cookie]",
utmSource: ":Information stored in Cookie]",
utmMedium: ":Information stored in Cookie]",
utmContent: ":Information stored in Cookie]",
utmTerm: ":Information stored in Cookie]"
}
});
I believe this is what will be sent when the booking happens
