Comment remonter les paramètres UTM avec Calendly

Pourquoi remonter les paramètres UTM dans Calendly ?

Les paramètres UTM sont essentiels pour suivre l'origine de vos leads et comprendre quelles campagnes marketing performent le mieux.
Cependant, Calendly ne récupère pas les UTM automatiquement lorsque vous utilisez son widget sur votre site.
‍

Dans ce tutoriel, l'agence Webflow Gemeos  vous montre comment :

• Conserver les UTM même si l’utilisateur change de page.
• Supprimer les UTM de l’URL pour une navigation propre.
• Forcer Calendly à prendre en compte les UTM au moment de la réservation.

‍

Comment ça marche ?

• Un script JavaScript récupère et stocke les UTM dans la session du navigateur dès que l’utilisateur arrive sur le site.
• Ce même script injecte dynamiquement les UTM dans le widget Calendly au chargement de la page.
• Il force le rechargement du widget pour s’assurer que Calendly enregistre bien les UTM

‍

1. Ajouter le script de tracking UTM dans votre footer

Ce script doit être ajouté dans le footer de votre site, juste avant </body>, pour qu’il fonctionne sur toutes les pages.

<script type="text/javascript">
    (function() {
        const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];

        function storeUTMParams() {
            const params = new URLSearchParams(window.location.search);
            let hasUTMInURL = false;

            // 1️⃣ Stocker les UTM en sessionStorage si présents dans l'URL
            utmKeys.forEach(param => {
                if (params.has(param)) {
                    sessionStorage.setItem(param, params.get(param));
                    hasUTMInURL = true;
                }
            });

            // 2️⃣ Supprimer les UTM de l’URL pour une URL propre
            if (hasUTMInURL) {
                const newURL = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, newURL);
            }
        }

        function getUTMParams() {
            let utmParams = '';
            utmKeys.forEach(param => {
                const storedValue = sessionStorage.getItem(param);
                if (storedValue) {
                    utmParams += `&${param}=${storedValue}`;
                }
            });
            return utmParams;
        }

        function updateCalendlyWidget() {
            const calendlyDiv = document.querySelector(".calendly-inline-widget");
            if (calendlyDiv) { // Vérifier si le widget Calendly est présent sur la page
                const baseUrl = calendlyDiv.getAttribute("data-url");
                const newUrl = baseUrl + getUTMParams();

                // Supprimer l'ancien widget et en recréer un avec la nouvelle URL
                const newCalendlyDiv = document.createElement("div");
                newCalendlyDiv.className = "calendly-inline-widget";
                newCalendlyDiv.setAttribute("data-url", newUrl);
                newCalendlyDiv.style = "min-width:320px;height:700px;";

                calendlyDiv.replaceWith(newCalendlyDiv);

                // Recharger le script Calendly pour prendre en compte la nouvelle URL
                setTimeout(() => Calendly.initInlineWidgets(), 500);
            }
        }

        // 3️⃣ Exécuter les fonctions quand la page charge
        document.addEventListener("DOMContentLoaded", function () {
            storeUTMParams(); // Stocke les UTM au chargement
            updateCalendlyWidget(); // Applique les UTM uniquement si le widget est présent
        });
    })();
</script>

‍

Comment fonctionne ce script ?

Il récupère les paramètres UTM dans l’URL (utm_source, utm_medium, etc.).

‍Il les stocke dans la session du navigateur (sessionStorage).

Il supprime immédiatement les UTM de l’URL pour garder une URL propre.

‍Il vérifie si un widget Calendly est présent sur la page.

Il met à jour l’URL du widget avec les UTM et force Calendly à les enregistrer.

‍

2. Ajouter le widget Calendly à votre page

Dans votre page où vous affichez Calendly, utilisez cet embed standardsans modifier l’URL (le script se charge d’ajouter les UTM dynamiquement) :

<!-- Embed Calendly standard -->
<div class="calendly-inline-widget" 
     data-url="https://calendly.com/YOUR_LINK/30min" 
     style="min-width:320px;height:700px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

Pourquoi ne pas mettre les UTM directement ici ?

Le script se charge automatiquement d’ajouter les UTM, donc pas besoin de les insérer manuellement. Cela garantit que :

• L'URL Calendly est toujours propre au départ.
• Les UTM sont dynamiquement ajoutés au bon moment.
• Calendly recharge correctement avec les bons paramètres.

‍

3. Tester la solution en staging

Avant de déployer, faites un test sur un environnement de staging ou en local.

‍

Étapes de test :

1. Visitez votre page avec des UTM dans l’URL

https://ton-site.com/?utm_source=linkedin&utm_campaign=test

• Vérifiez que l’URL redevient propre après chargement (les UTM disparaissent).
• Ouvrez la console (F12 > Console) et tapez : sessionStorage.getItem("utm_source")
• Résultat attendu : "linkedin" (ou la valeur que vous avez mise).

‍

2. Naviguez sur une autre page, puis revenez sur la page Calendly.

• Vérifiez que les UTM sont toujours stockés (sessionStorage.getItem("utm_source")).
• Vérifiez que l’iframe Calendly a bien les UTM.

‍

3. Effectuez une réservation sur Calendly.

• Ouvrez l’e-mail de confirmation Calendly.
• Vérifiez que les UTM sont bien enregistrés dans l’événement.

‍

4. Publier en production

🎯 Si tout fonctionne bien en staging, déployez en production !

Une fois en ligne, vous pourrez analyser les performances de vos campagnes en récupérant ces UTM dans :

• Google Analytics (GA4)
• Facebook Ads
• Votre CRM via Zapier ou Make

‍‍

Conclusion

Vous avez un système propre et efficace pour tracker vos leads avec Calendly.‍

Les UTM sont conservés même si l’utilisateur change de page.

Calendly récupère bien les données sans afficher d’UTM dans l’URL.

Vous pouvez analyser vos conversions et optimiser vos campagnes marketing.

‍

Si vous souhaitez envoyer ces UTM vers Google Analytics, Facebook Ads ou un CRM, dites-moi, je peux vous aider à automatiser cela ! 🚀🔥