Kuula broneerimisvidina sündmusi oma veebilehel

Kui broneerimisvidin on sinu veebilehel, annab see lehele teada, mida külaline selles teeb: paneeli avamine ja sulgemine, iga broneerimisekraan, iga vastus ja broneering ise. Kõik need on brauseri sündmused objektil window, nii et sinu arendaja — või see, kes hoolitseb sinu Google Tag Manageri eest — saab ehitada broneerimislehtri, muuta lehte, kui keegi broneerib, või saata sammud mis tahes analüütikatööriista.

Sündmused

Iga sündmus kannab oma andmeid objektis event.detail. Kaks välja on alati olemas: company — data-company väärtus sinu manustamiskoodis — ja booking_type: reservation laudade ja appointment teenuste puhul.

Kuula sündmust

Lisa vidinaga samale lehele skript, mis kasutab window.addEventListener’it ja sündmuse nime. See võib olla enne või pärast manustamiskoodi. See näide peidab bänneri „Broneeri kohe“, kui broneering on kinnitatud:

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

confirmed on true, kui broneering kinnitatakse kohe, ja false, kui tegemist on päringuga, mille sinu meeskond peab veel vastu võtma. value koos valuutaga (currency) on ajabroneeringu puhul teenuse hind, laua puhul aga konversioonide jälgimiseks määratud broneeringu väärtus — ja null, kui kumbagi pole.

Ekraanid ja vastused

taptime:step annab ekraani nime väljal detail.step. Milliseid ekraane külaline näeb, sõltub sellest, mida ta broneerib, ja sinu seadetest:

• location — külaline valib ühe sinu asukohtadest. Ainult siis, kui sul on neid mitu ja vidin pole seotud ühega.
• party — mitu külalist. Ainult laudade puhul.
• service ja specialist — mida ja kelle juurde broneerida. Ainult ajabroneeringute puhul.
• when — päev ja kellaaeg.
• seating, zone ja table — sees või väljas, saali osa, konkreetne laud. Ainult laudade puhul ja ainult need valikud, mille oled sisse lülitanud.
• details — külalise nimi ja kontaktandmed.
• done — kinnitusekraan pärast broneeringu tegemist.

step_index ja step_count on numbrid, mida külaline näeb vormi ülaosas, näiteks „2/5“. Asukohtade loend ja kinnitusekraan pole nummerdatud, seega on seal mõlemad null. Kuna ekraanide arv sõltub sinu seadetest, kontrolli pigem sammu nime kui numbrit.

taptime:choice annab vastuse nime väljal detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId või specialistId. detail.value on valitud väärtus — number, ID, kuupäev kujul 2026-09-18 või kellaaeg kujul 2026-09-18 19:30 — ja detail.label on see, mida külaline nupul luges, näiteks teenuse või asukoha nimi. Valik „ükskõik milline“ saadab väärtuse null.

Saada kõik sündmused Google Tag Managerisse

Üks kuulaja sündmusel taptime:event püüab kinni need kõik. Allolev skript lisab igaühe dataLayerisse nimedega taptime_open, taptime_step, taptime_choice jne koos detail-väljadega. Kleebi see Custom HTML tagi, mis käivitub kõigil lehtedel, või otse oma veebilehele. Seejärel ehita Tag Manageris päästikud, muutujad ja lehter, ilma et peaksid lehte enam puudutama.

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

Veel näiteid

Saada iga ekraan Google Analytics 4-le eraldi sündmusena, et näha lehtri uurimises, kus külalised pooleli jätavad. Selleks peab GA4 olema sinu lehele paigaldatud gtag.js-iga:

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

Paku teist võimalust broneerimiseks, kui külaline sulgeb paneeli broneerimata — siin peidetud ploki „Helista meile“ näitamisega:

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

Kontrolli, et see töötab

1. 1
   Ava oma avaldatud veebileht

   Paljud lehetegijad ei käivita kohandatud koodi oma redaktoris, seega kasuta päris lehte.

2. 2
   Ava brauseri konsool

   Paremklõpsa lehel, vali „Uuri“ (Inspect) ja ava vahekaart Console.

3. 3
   Kleebi allolev rida ja vajuta Enter

   See kuvab iga vidina sündmuse selle toimumise hetkel. See kehtib, kuni lehte uuesti laadid.

4. 4
   Klõpsa läbi testbroneering

   Iga ekraan ja vastus ilmub konsooli, seejärel broneering. Tühista testbroneering hiljem oma tahvlil.

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