Ascultați evenimentele widgetului de rezervare pe site-ul dumneavoastră

Odată ce widgetul de rezervare este pe site, acesta anunță pagina ce face clientul în el: deschiderea și închiderea panoului, fiecare ecran al rezervării, fiecare răspuns și rezervarea propriu-zisă. Fiecare dintre acestea este un eveniment de browser pe window, așa că dezvoltatorul dumneavoastră — sau oricine se ocupă de Google Tag Manager — poate construi o pâlnie de rezervare, poate modifica pagina când cineva rezervă sau poate trimite pașii în orice instrument de analiză.

Evenimentele

Fiecare eveniment își poartă datele în event.detail. Două câmpuri sunt mereu prezente: company — valoarea lui data-company din codul de încorporare — și booking_type: reservation pentru mese, appointment pentru servicii.

Ascultați un eveniment

Adăugați un script pe aceeași pagină cu widgetul, cu window.addEventListener și numele evenimentului. Poate sta înainte sau după codul de încorporare. Acesta ascunde un banner „Rezervă acum” după ce o rezervare este confirmată:

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

confirmed este true când rezervarea este confirmată pe loc și false când este o cerere pe care echipa dumneavoastră trebuie încă să o accepte. value, împreună cu moneda din currency, este prețul serviciului pentru o programare sau valoarea per rezervare setată pentru urmărirea conversiilor, în cazul unei mese — și null când nu există niciuna.

Ecrane și răspunsuri

taptime:step numește ecranul în detail.step. Ce ecrane vede un client depinde de ce rezervă și de setările dumneavoastră:

• location — clientul alege una dintre locațiile dumneavoastră. Doar când aveți mai multe, iar widgetul nu este legat de una anume.
• party — câte persoane. Doar pentru mese.
• service și specialist — ce se rezervă și la cine. Doar pentru programări.
• when — ziua și ora.
• seating, zone și table — în interior sau în exterior, o zonă a sălii, o anumită masă. Doar pentru mese și doar opțiunile pe care le-ați activat.
• details — numele și datele de contact ale clientului.
• done — ecranul de confirmare, după ce rezervarea este făcută.

step_index și step_count sunt numerele pe care clientul le vede în partea de sus a formularului, ca în „2 din 5”. Lista de locații și ecranul de confirmare nu sunt numerotate, așa că acolo ambele sunt null. Deoarece numărul de ecrane depinde de setările dumneavoastră, verificați numele pasului, nu numărul.

taptime:choice numește răspunsul în detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId sau specialistId. detail.value este ce s-a ales — un număr, un ID, o dată în forma 2026-09-18 sau o oră în forma 2026-09-18 19:30 — iar detail.label este ce a citit clientul pe buton, de exemplu numele unui serviciu sau al unei locații. Dacă se alege „oricare”, valoarea trimisă este null.

Trimiteți toate evenimentele în Google Tag Manager

Un singur ascultător pentru taptime:event le prinde pe toate. Scriptul de mai jos trimite fiecare eveniment în dataLayer ca taptime_open, taptime_step, taptime_choice și așa mai departe, împreună cu câmpurile din detail. Lipiți-l într-o etichetă de tip HTML personalizat care se declanșează pe toate paginile sau direct în site. Apoi construiți declanșatoare, variabile și o pâlnie în Tag Manager fără să mai atingeți site-ul.

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

Alte exemple

Trimiteți fiecare ecran în Google Analytics 4 ca eveniment separat, ca să vedeți într-o explorare a pâlniei unde se opresc clienții. Pentru asta, GA4 trebuie să fie instalat pe pagină cu 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>

Oferiți o altă cale de a rezerva când un client închide panoul fără să rezerve — aici, prin afișarea unui bloc ascuns „Sunați-ne”:

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

Verificați că funcționează

1. 1
   Deschideți site-ul publicat

   Multe constructoare de site-uri nu rulează codul personalizat în editor, așa că folosiți site-ul live.

2. 2
   Deschideți consola browserului

   Faceți clic dreapta pe pagină, alegeți „Inspectează” (Inspect), apoi deschideți fila „Consolă” (Console).

3. 3
   Lipiți linia de mai jos și apăsați Enter

   Afișează fiecare eveniment al widgetului în momentul în care se produce. Rămâne activă până când reîncărcați pagina.

4. 4
   Parcurgeți o rezervare de test

   Fiecare ecran și fiecare răspuns apar în consolă, apoi rezervarea. După aceea, anulați rezervarea de test de pe tablou.

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