Écouter les événements du widget de réservation sur votre site

Une fois le widget de réservation installé sur votre site, il indique à la page ce que le client y fait : l’ouverture et la fermeture du panneau, chaque écran de la réservation, chaque réponse et la réservation elle-même. Chacun de ces éléments est un événement navigateur sur window : votre développeur — ou la personne qui gère votre Google Tag Manager — peut ainsi construire un entonnoir de réservation, modifier la page quand quelqu’un réserve ou envoyer les étapes à n’importe quel outil d’analytics.

Les événements

Chaque événement transporte ses données dans event.detail. Deux champs sont toujours présents : company — la valeur de data-company dans votre code d’intégration — et booking_type : reservation pour les tables, appointment pour les prestations.

Écouter un événement

Ajoutez un script sur la même page que le widget, avec window.addEventListener et le nom de l’événement. Il peut se placer avant ou après le code d’intégration. Celui-ci masque une bannière « Réservez maintenant » dès qu’une réservation est confirmée :

<script>
  window.addEventListener('taptime:booking', function (event) {
    if (event.detail.confirmed) {
      document.getElementById('book-banner').hidden = true;
    }
  });
</script>

confirmed vaut true quand la réservation est confirmée immédiatement, et false quand il s’agit d’une demande que votre équipe doit encore accepter. value, avec sa devise currency, est le prix de la prestation pour un rendez-vous, ou la valeur de réservation définie pour le suivi des conversions pour une table — et null s’il n’y a ni l’un ni l’autre.

Écrans et réponses

taptime:step nomme l’écran dans detail.step. Les écrans que voit le client dépendent de ce qu’il réserve et de vos réglages :

• location — le client choisit l’un de vos établissements. Uniquement si vous en avez plusieurs et que le widget n’est pas lié à un seul.
• party — le nombre de personnes. Tables uniquement.
• service et specialist — quoi réserver et avec qui. Rendez-vous uniquement.
• when — le jour et l’heure.
• seating, zone et table — intérieur ou terrasse, une zone de la salle, une table précise. Tables uniquement, et seulement les choix que vous avez activés.
• details — le nom et les coordonnées du client.
• done — l’écran de confirmation, après la réservation.

step_index et step_count sont les numéros que le client voit en haut du formulaire, par exemple « 2 sur 5 ». La liste des établissements et l’écran de confirmation ne sont pas numérotés : les deux valent alors null. Comme le nombre d’écrans dépend de vos réglages, basez-vous sur le nom de l’étape plutôt que sur son numéro.

taptime:choice nomme la réponse dans detail.field : branchId, partySize, date, time, seating, zoneId, tableId, serviceId ou specialistId. detail.value est ce qui a été choisi — un nombre, un identifiant, une date au format 2026-09-18 ou une heure au format 2026-09-18 19:30 — et detail.label est ce que le client a lu sur le bouton, par exemple le nom d’une prestation ou d’un établissement. Choisir « peu importe » envoie la valeur null.

Envoyer chaque événement à Google Tag Manager

Un seul écouteur sur taptime:event les capte tous. Le script ci-dessous pousse chacun d’eux dans le dataLayer sous la forme taptime_open, taptime_step, taptime_choice, etc., avec les champs de detail à côté. Collez-le dans une balise HTML personnalisée déclenchée sur toutes les pages, ou directement dans votre site. Créez ensuite déclencheurs, variables et entonnoir dans Tag Manager sans plus toucher au site.

<script>
  window.dataLayer = window.dataLayer || [];
  window.addEventListener('taptime:event', function (event) {
    window.dataLayer.push(Object.assign({ event: 'taptime_' + event.detail.event }, event.detail));
  });
</script>

Autres exemples

Envoyez chaque écran à Google Analytics 4 comme un événement distinct, pour voir dans une exploration de l’entonnoir où les clients s’arrêtent. Il faut pour cela que GA4 soit installé sur votre page avec gtag.js :

<script>
  window.addEventListener('taptime:step', function (event) {
    if (typeof gtag !== 'function') return;
    gtag('event', 'booking_step', {
      step: event.detail.step,
      step_index: event.detail.step_index,
      booking_type: event.detail.booking_type
    });
  });
</script>

Proposez un autre moyen de réserver quand un client ferme le panneau sans réserver — ici, en affichant un bloc « Appelez-nous » masqué :

<script>
  var booked = false;
  window.addEventListener('taptime:booking', function () {
    booked = true;
  });
  window.addEventListener('taptime:close', function () {
    if (!booked) {
      document.getElementById('call-us').hidden = false;
    }
  });
</script>

Vérifier que tout fonctionne

1. 1
   Ouvrez votre site publié

   Beaucoup d’outils de création de site n’exécutent pas le code personnalisé dans leur éditeur : utilisez le site en ligne.

2. 2
   Ouvrez la console du navigateur

   Faites un clic droit sur la page, choisissez Inspecter, puis ouvrez l’onglet Console.

3. 3
   Collez la ligne ci-dessous et appuyez sur Entrée

   Elle affiche chaque événement du widget au moment où il se produit, jusqu’au prochain rechargement de la page.

4. 4
   Faites une réservation de test

   Chaque écran et chaque réponse apparaissent dans la console, puis la réservation. Annulez ensuite la réservation de test depuis votre tableau.

window.addEventListener('taptime:event', function (event) { console.log(event.detail.event, event.detail); });