Zdarzenia widżetu rezerwacji na Państwa stronie

Gdy widżet rezerwacji jest już na Państwa stronie, informuje ją o tym, co robi w nim gość: o otwarciu i zamknięciu panelu, każdym ekranie rezerwacji, każdej odpowiedzi i samej rezerwacji. Każda z tych informacji to zdarzenie przeglądarki na obiekcie window, więc programista — lub osoba zajmująca się Państwa Menedżerem tagów Google — może zbudować lejek rezerwacji, zmienić stronę po dokonaniu rezerwacji albo przesłać kolejne kroki do dowolnego narzędzia analitycznego.

Zdarzenia

Każde zdarzenie przenosi swoje dane w event.detail. Dwa pola są zawsze obecne: company — wartość data-company z kodu do osadzenia — oraz booking_type: reservation dla stolików, appointment dla usług.

Nasłuchiwanie zdarzenia

Na tej samej stronie co widżet należy dodać skrypt z window.addEventListener i nazwą zdarzenia. Może być umieszczony przed kodem do osadzenia lub po nim. Ten skrypt ukrywa baner „Zarezerwuj teraz” po potwierdzeniu rezerwacji:

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

confirmed ma wartość true, gdy rezerwacja jest potwierdzona od razu, i false, gdy jest to prośba, którą zespół musi jeszcze zaakceptować. value wraz z currency to cena usługi w przypadku wizyty lub wartość rezerwacji ustawiona do śledzenia konwersji w przypadku stolika — oraz null, gdy nie ma żadnej z nich.

Ekrany i odpowiedzi

taptime:step podaje nazwę ekranu w detail.step. To, które ekrany zobaczy gość, zależy od tego, co rezerwuje, i od Państwa ustawień:

• location — gość wybiera jeden z Państwa lokali. Tylko gdy jest ich kilka, a widżet nie jest przypisany do jednego.
• party — liczba gości. Tylko stoliki.
• service i specialist — co zarezerwować i u kogo. Tylko wizyty.
• when — dzień i godzina.
• seating, zone i table — wewnątrz lub na zewnątrz, strefa sali, konkretny stolik. Tylko stoliki i tylko włączone przez Państwa opcje.
• details — imię i nazwisko oraz dane kontaktowe gościa.
• done — ekran potwierdzenia po złożeniu rezerwacji.

step_index i step_count to liczby, które gość widzi u góry formularza, np. „2 z 5”. Lista lokali i ekran potwierdzenia nie są numerowane, więc tam oba pola mają wartość null. Liczba ekranów zależy od ustawień, dlatego lepiej sprawdzać nazwę kroku niż jego numer.

taptime:choice podaje nazwę odpowiedzi w detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId lub specialistId. detail.value to wybrana wartość — liczba, identyfikator, data w formacie 2026-09-18 lub godzina w formacie 2026-09-18 19:30 — a detail.label to tekst, który gość widział na przycisku, np. nazwa usługi lub lokalu. Wybór opcji „dowolny” wysyła wartość null.

Przesyłanie wszystkich zdarzeń do Menedżera tagów Google

Jeden detektor na taptime:event przechwytuje je wszystkie. Poniższy skrypt przesyła każde z nich do dataLayer jako taptime_open, taptime_step, taptime_choice itd., razem z polami detail. Można go wkleić do tagu Niestandardowy kod HTML uruchamianego na wszystkich stronach albo bezpośrednio na stronę. Następnie reguły, zmienne i lejek buduje się w Menedżerze tagów, bez ponownego modyfikowania strony.

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

Więcej przykładów

Przesyłanie każdego ekranu do Google Analytics 4 jako osobnego zdarzenia, aby w eksploracji ścieżki zobaczyć, gdzie goście rezygnują. Wymaga GA4 zainstalowanego na stronie przez 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>

Zaproponowanie innego sposobu rezerwacji, gdy gość zamknie panel bez rezerwacji — tutaj przez pokazanie ukrytego bloku „Zadzwoń do nas”:

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

Sprawdzenie działania

1. 1
   Otwórz opublikowaną stronę

   Wiele kreatorów stron nie uruchamia własnego kodu w edytorze, dlatego należy użyć strony na żywo.

2. 2
   Otwórz konsolę przeglądarki

   Kliknij stronę prawym przyciskiem myszy, wybierz Zbadaj, a następnie otwórz kartę Konsola.

3. 3
   Wklej poniższą linijkę i naciśnij Enter

   Wypisuje każde zdarzenie widżetu w chwili jego wystąpienia. Działa do przeładowania strony.

4. 4
   Przeklikaj testową rezerwację

   Każdy ekran i każda odpowiedź pojawią się w konsoli, a na końcu rezerwacja. Testową rezerwację należy potem anulować na tablicy.

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