A foglalási widget eseményeinek figyelése a weboldalán

Amint a foglalási widget a weboldalán van, jelzi az oldalnak, mit csinál benne a vendég: a panel megnyitását és bezárását, a foglalás minden képernyőjét, minden választ és magát a foglalást. Mindegyik egy böngészőesemény a window objektumon, így a fejlesztője – vagy aki a Google Tag Managert kezeli – foglalási tölcsért építhet, módosíthatja az oldalt, amikor valaki foglal, vagy bármely analitikai eszközbe elküldheti a lépéseket.

Az események

Minden esemény az event.detail objektumban hordozza az adatait. Két mező mindig szerepel: a company – a beágyazási kódban lévő data-company értéke – és a booking_type: asztalokhoz reservation, szolgáltatásokhoz appointment.

Esemény figyelése

Adjon egy szkriptet ugyanahhoz az oldalhoz, ahol a widget van, a window.addEventListener függvénnyel és az esemény nevével. Kerülhet a beágyazási kód elé vagy mögé is. Ez a szkript elrejt egy „Foglaljon most” sávot, amint a foglalás megerősítést nyer:

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

A confirmed értéke true, ha a foglalás azonnal megerősítést nyer, és false, ha olyan kérésről van szó, amelyet a csapatának még el kell fogadnia. A value a pénznemével együtt időpontnál a szolgáltatás ára, asztalnál pedig a konverziókövetéshez megadott foglalási érték – ha egyik sincs, akkor null.

Képernyők és válaszok

A taptime:step a detail.step mezőben nevezi meg a képernyőt. Hogy a vendég mely képernyőket látja, az attól függ, mit foglal, és milyenek a beállításai:

• location – a vendég kiválasztja az egyik telephelyét. Csak ha több telephelye van, és a widget nincs egyhez kötve.
• party – hány vendég. Csak asztaloknál.
• service és specialist – mit és kinél foglal. Csak időpontoknál.
• when – a nap és az időpont.
• seating, zone és table – bent vagy kint, a terem egy része, egy adott asztal. Csak asztaloknál, és csak a bekapcsolt választási lehetőségek.
• details – a vendég neve és elérhetőségei.
• done – a visszaigazoló képernyő, a foglalás után.

A step_index és a step_count azok a számok, amelyeket a vendég az űrlap tetején lát, például „2 / 5”. A telephelylista és a visszaigazoló képernyő nincs számozva, ezért ott mindkettő null. Mivel a képernyők száma a beállításaitól függ, a lépés nevét ellenőrizze, ne a számát.

A taptime:choice a detail.field mezőben nevezi meg a választ: branchId, partySize, date, time, seating, zoneId, tableId, serviceId vagy specialistId. A detail.value a kiválasztott érték – egy szám, egy azonosító, egy dátum 2026-09-18 formában vagy egy időpont 2026-09-18 19:30 formában –, a detail.label pedig az, amit a vendég a gombon olvasott, például egy szolgáltatás vagy telephely neve. A „bármelyik” választásakor a value értéke null.

Minden esemény küldése a Google Tag Managerbe

Egyetlen figyelő a taptime:event eseményen mindet elkapja. Az alábbi szkript mindegyiket taptime_open, taptime_step, taptime_choice stb. néven küldi a dataLayer-be, mellettük a detail mezőivel. Illessze be egy minden oldalon elinduló egyéni HTML-címkébe, vagy közvetlenül a weboldalába. Ezután a Tag Managerben építhet triggereket, változókat és tölcsért anélkül, hogy újra hozzányúlna az oldalhoz.

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

További példák

Küldjön minden képernyőt külön eseményként a Google Analytics 4-be, hogy egy tölcsérfeltárásban lássa, hol állnak meg a vendégek. Ehhez az oldalán gtag.js-sel telepített GA4 szükséges:

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

Kínáljon más foglalási lehetőséget, ha a vendég foglalás nélkül zárja be a panelt – itt egy rejtett „Hívjon minket” blokk megjelenítésével:

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

Ellenőrizze, hogy működik-e

1. 1
   Nyissa meg a közzétett weboldalát

   Sok oldalszerkesztő nem futtat egyéni kódot a szerkesztőben, ezért az élő oldalt használja.

2. 2
   Nyissa meg a böngésző konzolját

   Kattintson jobb gombbal az oldalra, válassza a Vizsgálat lehetőséget, majd nyissa meg a Konzol lapot.

3. 3
   Illessze be az alábbi sort, és nyomja meg az Entert

   Kiírja a widget minden eseményét, ahogy azok bekövetkeznek. Az oldal újratöltéséig marad érvényben.

4. 4
   Kattintson végig egy tesztfoglalást

   Minden képernyő és válasz megjelenik a konzolban, majd a foglalás is. Utána mondja le a tesztfoglalást a tábláról.

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