Klausykitės rezervacijų valdiklio įvykių savo svetainėje

Kai rezervacijų valdiklis yra Jūsų svetainėje, jis praneša puslapiui, ką svečias jame daro: skydelio atidarymą ir uždarymą, kiekvieną rezervacijos ekraną, kiekvieną atsakymą ir pačią rezervaciją. Kiekvienas iš jų yra naršyklės įvykis objekte window, todėl Jūsų programuotojas — arba tas, kas prižiūri Jūsų Google Tag Manager — gali sukurti rezervacijų piltuvėlį, pakeisti puslapį, kai kas nors rezervuoja, arba siųsti žingsnius į bet kurį analitikos įrankį.

Įvykiai

Kiekvienas įvykis savo duomenis perduoda event.detail. Du laukai yra visada: company — data-company reikšmė Jūsų įterpimo kode — ir booking_type: reservation staliukams, appointment paslaugoms.

Klausykitės įvykio

Į tą patį puslapį, kuriame yra valdiklis, pridėkite skriptą su window.addEventListener ir įvykio pavadinimu. Jis gali būti prieš įterpimo kodą arba po jo. Šis skriptas paslepia reklamjuostę „Rezervuokite dabar“, kai rezervacija patvirtinama:

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

confirmed yra true, kai rezervacija patvirtinama iš karto, ir false, kai tai užklausa, kurią Jūsų komanda dar turi priimti. value su currency yra paslaugos kaina vizitui arba rezervacijos vertė, kurią nustatėte konversijų sekimui staliukams, — ir null, kai nėra nei vienos, nei kitos.

Ekranai ir atsakymai

taptime:step nurodo ekraną lauke detail.step. Kuriuos ekranus svečias mato, priklauso nuo to, ką jis rezervuoja, ir nuo Jūsų nustatymų:

• location — svečias pasirenka vieną iš Jūsų vietų. Tik kai turite kelias ir valdiklis nėra susietas su viena.
• party — kiek svečių. Tik staliukams.
• service ir specialist — ką rezervuoti ir pas ką. Tik vizitams.
• when — diena ir laikas.
• seating, zone ir table — viduje ar lauke, salės zona, konkretus staliukas. Tik staliukams ir tik tie pasirinkimai, kuriuos įjungėte.
• details — svečio vardas ir kontaktiniai duomenys.
• done — patvirtinimo ekranas po rezervacijos sukūrimo.

step_index ir step_count yra skaičiai, kuriuos svečias mato formos viršuje, pvz., „2 iš 5“. Vietų sąrašas ir patvirtinimo ekranas nenumeruojami, todėl ten abu yra null. Kadangi ekranų skaičius priklauso nuo Jūsų nustatymų, tikrinkite žingsnio pavadinimą, o ne numerį.

taptime:choice nurodo atsakymą lauke detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId arba specialistId. detail.value yra tai, kas pasirinkta — skaičius, ID, data formatu 2026-09-18 arba laikas formatu 2026-09-18 19:30, — o detail.label yra tai, ką svečias matė ant mygtuko, pavyzdžiui, paslaugos ar vietos pavadinimas. Pasirinkus „bet kuris“, siunčiama reikšmė null.

Siųskite visus įvykius į Google Tag Manager

Vienas taptime:event klausytojas pagauna juos visus. Žemiau pateiktas skriptas kiekvieną įrašo į dataLayer kaip taptime_open, taptime_step, taptime_choice ir t. t., kartu su detail laukais. Įklijuokite jį į Custom HTML žymą, kuri suveikia visuose puslapiuose, arba tiesiai į svetainę. Tada kurkite paleidiklius, kintamuosius ir piltuvėlį Tag Manager, daugiau neliesdami svetainės.

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

Daugiau pavyzdžių

Siųskite kiekvieną ekraną į Google Analytics 4 kaip atskirą įvykį, kad piltuvėlio tyrime matytumėte, kur svečiai sustoja. Tam reikia, kad Jūsų puslapyje būtų įdiegtas GA4 su 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>

Pasiūlykite kitą būdą rezervuoti, kai svečias uždaro skydelį nerezervavęs, — šiuo atveju parodant paslėptą bloką „Paskambinkite mums“:

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

Patikrinkite, ar veikia

1. 1
   Atidarykite paskelbtą svetainę

   Daugelis svetainių kūrimo įrankių redaktoriuje pasirinktinio kodo nevykdo, todėl naudokite veikiančią svetainę.

2. 2
   Atidarykite naršyklės konsolę

   Spustelėkite puslapį dešiniuoju pelės mygtuku, pasirinkite „Tikrinti“ ir atidarykite skirtuką „Console“.

3. 3
   Įklijuokite žemiau pateiktą eilutę ir paspauskite Enter

   Ji išspausdina kiekvieną valdiklio įvykį, kai jis įvyksta. Veikia, kol perkraunate puslapį.

4. 4
   Atlikite bandomąją rezervaciją

   Kiekvienas ekranas ir atsakymas pasirodo konsolėje, tada ir rezervacija. Po to atšaukite bandomąją rezervaciją lentoje.

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