How do I dynamically capture UTMs on an embedded Calendly submission?

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.
 

1. 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!)
2. Whenever the UTM parameter changes in the browser address bar, update the browser cookies with the new UTM parameter values.
3. 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>

@Clifton just FYI which I didn’t make clear in my previous message. This does not work.

Can you help?

Thanks

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