Cal.com - Widget Integre

Ce qu'on va faire sur cette page

Cal.com est une alternative open-source a Calendly. Le tracking fonctionne de maniere similaire avec un listener postMessage, mais les noms d'events sont differents.

  1. Ouvrir GTM Preview
  2. Interagir avec le widget Cal.com
  3. Observer les events dans le dataLayer
  4. Comparer avec le listener Calendly

Widget Cal.com integre

Tag Custom HTML - Listener Cal.com 
// Listener JavaScript pour Cal.com (tag Custom HTML dans GTM) :

<script>
  (function() {
    window.addEventListener("message", function(e) {
      // Cal.com envoie des messages avec une structure differente de Calendly
      if (!e.data || typeof e.data !== "object") return;
      if (!e.data.type || e.data.type.indexOf("cal:") !== 0) return;

      var eventType = e.data.type.replace("cal:", "");

      window.dataLayer.push({
        event: "calcom",
        calcom_event: eventType,
        calcom_data: e.data.data || {}
      });
    });
  })();
</script>

// Events Cal.com :
// cal:month_viewed     -> Mois affiche
// cal:slot_selected    -> Creneau selectionne
// cal:booking_created  -> CONVERSION : RDV confirme
Configuration GTM 
// Configuration GTM pour Cal.com :
//
// Trigger : Custom Event
// Event name : calcom
//
// Variable Data Layer : calcom_event
//
// Tag GA4 Event :
// Event name : calendar_{{DLV - calcom_event}}
// Parametres :
//   calendar_tool = "calcom"
//   booking_event = {{DLV - calcom_event}}

// Conversion : calendar_booking_created

Cal.com vs Calendly

Cal.com : open-source, auto-hebergeable, gratuit pour les features de base. Le tracking par listener est similaire mais les noms d'events different.
Meme approche : on ecoute les postMessage, on push dans le dataLayer, on cree un Custom Event trigger dans GTM.