Calendly - Widget Integre (embed)

Ce qu'on va faire sur cette page

Tracker les interactions Calendly embed (integre dans la page) sans page de redirection. On utilise un listener JavaScript qui ecoute les messages envoyes par l'iframe Calendly.

  1. Ouvrir GTM Preview
  2. Interagir avec le widget Calendly ci-dessous
  3. Observer les events Calendly dans le Summary (via Custom Event)
  4. Copier le code du listener et l'ajouter dans un tag Custom HTML

Widget Calendly integre - les interactions sont capturees via postMessage

Events captures en temps reel :

En attente d'interactions avec Calendly...

Tag Custom HTML - Listener Calendly 
// Listener JavaScript a mettre dans un tag Custom HTML (GTM)
// Declencheur : All Pages ou Page URL contient la page avec Calendly

<script>
  (function() {
    var lastCalendlyEvent = "";

    window.addEventListener("message", function(e) {
      if (!e.data || typeof e.data !== "string") return;
      if (e.data.indexOf("calendly") === -1) return;

      // Extraire le type d'event
      var parts = e.data.split(".");
      var eventType = parts.length > 1 ? parts[1] : e.data;

      // Eviter les doublons
      if (eventType === lastCalendlyEvent) return;
      lastCalendlyEvent = eventType;

      // Push dans le dataLayer
      window.dataLayer.push({
        event: "calendly",
        calendly_event: eventType
      });
    });
  })();
</script>
Events Calendly et configuration GTM 
// Les 4 events que Calendly envoie via postMessage :

// 1. calendly.profile_page_viewed
//    -> Le widget s'affiche (page profil du calendrier)

// 2. calendly.event_type_viewed
//    -> L'utilisateur voit les creneaux disponibles

// 3. calendly.date_and_time_selected
//    -> L'utilisateur selectionne une date et un horaire

// 4. calendly.event_scheduled
//    -> CONVERSION : le rendez-vous est confirme !

// Configuration GTM :
// Trigger : Custom Event -> event name = "calendly"
// Variable Data Layer : calendly_event
//
// Tag GA4 Event :
// Event name : calendar_{{DLV - calendly_event}}
// Exemple : calendar_event_scheduled (= conversion)

Conversion Calendly dans GA4

L'event calendar_event_scheduled est ta conversion. Dans GA4, marque cet event comme conversion pour le voir dans tes rapports et l'envoyer a Google Ads pour l'optimisation des encheres.

Calendly gratuit vs payant

Le listener JavaScript fonctionne avec toutes les versions de Calendly (gratuit inclus). L'integration native GA4 de Calendly est disponible uniquement sur les plans Professional/Teams/Enterprise, et elle a des problemes d'attribution (le tracking vient du domaine calendly.com, pas de ton site).