Luister naar events van de reserveringswidget op je website

Zodra de reserveringswidget op je website staat, laat hij de pagina weten wat de gast erin doet: het venster dat opent en sluit, elk scherm van de reservering, elk antwoord en de reservering zelf. Elk daarvan is een browserevent op window, zodat je ontwikkelaar — of wie je Google Tag Manager beheert — een reserveringsfunnel kan bouwen, de pagina kan aanpassen wanneer iemand reserveert, of de stappen naar elke analyticstool kan sturen.

De events

Elk event draagt zijn gegevens in event.detail. Twee velden zijn er altijd: company — de waarde van data-company in je insluitcode — en booking_type: reservation voor tafels, appointment voor diensten.

Luister naar een event

Voeg op dezelfde pagina als de widget een script toe met window.addEventListener en de naam van het event. Het mag voor of na de insluitcode staan. Dit script verbergt een banner ‘Nu reserveren’ zodra een reservering is bevestigd:

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

confirmed is true als de reservering meteen bevestigd is, en false als het een aanvraag is die je team nog moet accepteren. value, met zijn currency, is bij een afspraak de prijs van de dienst, of bij een tafel de reserveringswaarde die je voor conversietracking hebt ingesteld — en null als geen van beide er is.

Schermen en antwoorden

taptime:step noemt het scherm in detail.step. Welke schermen een gast ziet, hangt af van wat die reserveert en van je instellingen:

• location — de gast kiest een van je vestigingen. Alleen als je er meerdere hebt en de widget niet aan één vestiging gekoppeld is.
• party — met hoeveel personen. Alleen bij tafels.
• service en specialist — wat er wordt geboekt en bij wie. Alleen bij afspraken.
• when — de dag en het tijdstip.
• seating, zone en table — binnen of buiten, een deel van de zaal, een bepaalde tafel. Alleen bij tafels, en alleen de keuzes die je hebt aangezet.
• details — de naam en contactgegevens van de gast.
• done — het bevestigingsscherm, nadat de reservering is gemaakt.

step_index en step_count zijn de nummers die de gast bovenaan het formulier ziet, zoals ‘2 van 5’. De vestigingslijst en het bevestigingsscherm hebben geen nummer, dus daar zijn beide null. Omdat het aantal schermen van je instellingen afhangt, kun je beter op de naam van de stap controleren dan op het nummer.

taptime:choice noemt het antwoord in detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId of specialistId. detail.value is wat er gekozen is — een getal, een ID, een datum als 2026-09-18 of een tijd als 2026-09-18 19:30 — en detail.label is wat de gast op de knop las, zoals de naam van een dienst of vestiging. Wie ‘maakt niet uit’ kiest, stuurt de waarde null.

Stuur elk event naar Google Tag Manager

Eén listener op taptime:event vangt ze allemaal op. Het script hieronder zet elk event in de dataLayer als taptime_open, taptime_step, taptime_choice enzovoort, met de detailvelden erbij. Plak het in een tag met aangepaste HTML die op alle pagina’s wordt geactiveerd, of direct in je site. Bouw daarna triggers, variabelen en een funnel in Tag Manager zonder je site nog aan te raken.

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

Meer voorbeelden

Stuur elk scherm als apart event naar Google Analytics 4 om in een trechterverkenning te zien waar gasten afhaken. Daarvoor moet GA4 met gtag.js op je pagina staan:

<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>

Bied een andere manier van reserveren aan als een gast het venster sluit zonder te reserveren — hier door een verborgen blok ‘Bel ons’ te tonen:

<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>

Controleer of het werkt

1. 1
   Open je gepubliceerde website

   Veel websitebouwers voeren eigen code niet uit in hun editor, dus gebruik de live site.

2. 2
   Open de console van de browser

   Klik met de rechtermuisknop op de pagina, kies Inspecteren en open het tabblad Console.

3. 3
   Plak de regel hieronder en druk op Enter

   Hij toont elk widgetevent op het moment dat het gebeurt. Dat blijft zo tot je de pagina opnieuw laadt.

4. 4
   Klik een testreservering door

   Elk scherm en elk antwoord verschijnt in de console, en daarna de reservering. Annuleer de testreservering daarna op je overzicht.

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