Naslouchejte událostem rezervačního widgetu na svém webu

Jakmile je rezervační widget na vašem webu, sděluje stránce, co v něm host dělá: otevření a zavření panelu, každou obrazovku rezervace, každou odpověď i samotnou rezervaci. Každá z těchto akcí je událost prohlížeče na window, takže váš vývojář — nebo kdokoli, kdo spravuje váš Správce značek Google — může sestavit rezervační trychtýř, upravit stránku po rezervaci nebo posílat jednotlivé kroky do libovolného analytického nástroje.

Události

Každá událost nese svá data v event.detail. Dvě pole jsou tam vždy: company — hodnota data-company z vašeho kódu pro vložení — a booking_type: reservation pro stoly, appointment pro služby.

Naslouchejte události

Přidejte na stejnou stránku, kde je widget, skript s window.addEventListener a názvem události. Může být před kódem pro vložení i za ním. Tento skript skryje banner „Rezervujte teď“, jakmile je rezervace potvrzena:

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

confirmed je true, když je rezervace potvrzena okamžitě, a false, když jde o žádost, kterou ještě musí přijmout váš tým. value spolu s currency je cena služby u termínu, nebo hodnota rezervace, kterou jste nastavili pro měření konverzí, u stolu — a null, když není ani jedno.

Obrazovky a odpovědi

taptime:step uvádí název obrazovky v detail.step. Které obrazovky host uvidí, závisí na tom, co rezervuje, a na vašem nastavení:

• location — host vybírá jednu z vašich poboček. Jen když jich máte více a widget není svázaný s jednou z nich.
• party — počet hostů. Jen u stolů.
• service a specialist — co rezervovat a u koho. Jen u termínů.
• when — den a čas.
• seating, zone a table — uvnitř nebo venku, část sálu, konkrétní stůl. Jen u stolů a jen volby, které máte zapnuté.
• details — jméno a kontaktní údaje hosta.
• done — potvrzovací obrazovka po vytvoření rezervace.

step_index a step_count jsou čísla, která host vidí v horní části formuláře, například „2 z 5“. Seznam poboček a potvrzovací obrazovka číslované nejsou, takže tam jsou obě hodnoty null. Protože počet obrazovek závisí na vašem nastavení, kontrolujte raději název kroku než jeho číslo.

taptime:choice uvádí odpověď v detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId nebo specialistId. detail.value je zvolená hodnota — číslo, ID, datum ve tvaru 2026-09-18 nebo čas ve tvaru 2026-09-18 19:30 — a detail.label je text, který host četl na tlačítku, například název služby nebo pobočky. Volba „kdokoli“ odešle hodnotu null.

Posílejte všechny události do Správce značek Google

Jeden posluchač na taptime:event zachytí všechny. Níže uvedený skript odešle každou z nich do dataLayer jako taptime_open, taptime_step, taptime_choice a tak dále, spolu s poli z detail. Vložte ho do značky Vlastní HTML, která se spouští na všech stránkách, nebo přímo na web. Pak si ve Správci značek sestavíte spouštěče, proměnné i trychtýř, aniž byste na web znovu sahali.

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

Další příklady

Posílejte každou obrazovku do Google Analytics 4 jako samostatnou událost a v průzkumu trychtýře uvidíte, kde hosté odcházejí. Vyžaduje to GA4 nainstalované na vaší stránce přes 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>

Nabídněte jiný způsob rezervace, když host zavře panel bez rezervace — zde zobrazením skrytého bloku „Zavolejte nám“:

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

Ověřte, že to funguje

1. 1
   Otevřete svůj publikovaný web

   Mnoho editorů webů ve svém editoru vlastní kód nespouští, proto použijte živý web.

2. 2
   Otevřete konzoli prohlížeče

   Klikněte na stránku pravým tlačítkem, zvolte Prozkoumat a otevřete kartu Console.

3. 3
   Vložte řádek níže a stiskněte Enter

   Vypíše každou událost widgetu ve chvíli, kdy nastane. Platí, dokud stránku nenačtete znovu.

4. 4
   Proklikejte zkušební rezervaci

   V konzoli se objeví každá obrazovka a odpověď a pak rezervace. Zkušební rezervaci potom zrušte ze své tabule.

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