Pratite događaje vidžeta za rezervacije na svom sajtu

Kada je vidžet za rezervacije na vašem sajtu, on javlja stranici šta gost u njemu radi: otvaranje i zatvaranje panela, svaki ekran rezervacije, svaki odgovor i samu rezervaciju. Svaki od njih je događaj pregledača na objektu window, pa vaš programer — ili onaj ko održava vaš Google Tag Manager — može da napravi levak rezervacija, promeni stranicu kada neko rezerviše ili pošalje korake u bilo koji alat za analitiku.

Događaji

Svaki događaj nosi svoje podatke u event.detail. Dva polja su uvek tu: company — vrednost atributa data-company iz vašeg koda za ugradnju — i booking_type: reservation za stolove, appointment za usluge.

Osluškujte događaj

Dodajte skriptu na istu stranicu na kojoj je vidžet, sa window.addEventListener i nazivom događaja. Može da stoji pre ili posle koda za ugradnju. Ova skripta sakriva baner „Rezerviši odmah“ čim se rezervacija potvrdi:

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

Polje confirmed je true kada je rezervacija odmah potvrđena, a false kada je to zahtev koji vaš tim tek treba da prihvati. Polje value, uz valutu u currency, jeste cena usluge kod termina, a kod stola vrednost rezervacije koju ste postavili za praćenje konverzija — i null kada nema ni jednog ni drugog.

Ekrani i odgovori

Događaj taptime:step navodi naziv ekrana u detail.step. Koje će ekrane gost videti zavisi od toga šta rezerviše i od vaših podešavanja:

• location — gost bira jednu od vaših lokacija. Samo kada ih imate više, a vidžet nije vezan za jednu.
• party — koliko gostiju dolazi. Samo za stolove.
• service i specialist — šta se rezerviše i kod koga. Samo za termine.
• when — dan i vreme.
• seating, zone i table — unutra ili napolju, deo sale, određeni sto. Samo za stolove, i samo izbori koje ste uključili.
• details — ime i kontakt podaci gosta.
• done — ekran potvrde, pošto je rezervacija napravljena.

step_index i step_count su brojevi koje gost vidi na vrhu obrasca, kao u „2 od 5“. Spisak lokacija i ekran potvrde nisu numerisani, pa su tamo oba null. Pošto broj ekrana zavisi od vaših podešavanja, proveravajte naziv koraka, a ne njegov broj.

Događaj taptime:choice navodi odgovor u detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId ili specialistId. detail.value je ono što je izabrano — broj, ID, datum u obliku 2026-09-18 ili vreme u obliku 2026-09-18 19:30 — a detail.label je ono što je gost pročitao na dugmetu, na primer naziv usluge ili lokacije. Izbor „bilo koji“ šalje vrednost null.

Šaljite svaki događaj u Google Tag Manager

Jedan osluškivač na taptime:event hvata sve događaje. Skripta ispod šalje svaki od njih u dataLayer kao taptime_open, taptime_step, taptime_choice i tako dalje, zajedno sa poljima iz detail. Nalepite je u oznaku tipa „Prilagođeni HTML“ (Custom HTML) koja se pokreće na svim stranicama, ili direktno na sajt. Zatim u Tag Manager-u pravite okidače, promenljive i levak, bez ponovnog diranja sajta.

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

Još primera

Šaljite svaki ekran u Google Analytics 4 kao zaseban događaj, pa ćete u istraživanju levka videti gde gosti odustaju. Za ovo GA4 mora biti instaliran na vašoj stranici preko 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>

Ponudite drugi način rezervacije kada gost zatvori panel a da nije rezervisao — ovde tako što se prikaže skriveni blok „Pozovite 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>

Proverite da li radi

1. 1
   Otvorite objavljeni sajt

   Mnogi alati za pravljenje sajtova ne pokreću prilagođeni kod u svom uređivaču, pa koristite objavljeni sajt.

2. 2
   Otvorite konzolu pregledača

   Kliknite desnim tasterom na stranicu, izaberite „Pregledaj“ (Inspect), pa otvorite karticu „Konzola“ (Console).

3. 3
   Nalepite red ispod i pritisnite Enter

   Ispisuje svaki događaj vidžeta čim se desi. Radi dok ponovo ne učitate stranicu.

4. 4
   Prođite kroz probnu rezervaciju

   Svaki ekran i odgovor pojavljuju se u konzoli, a zatim i rezervacija. Posle toga otkažite probnu rezervaciju sa table.

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