Bandlov vidjeti hodisalarini saytingizda tinglang

Bandlov vidjeti saytingizga joylangach, mehmon unda nima qilayotganini sahifaga xabar qilib turadi: panel ochilishi va yopilishi, bandlovning har bir ekrani, har bir javob va bandlovning oʻzi. Bularning har biri window obyektidagi brauzer hodisasi, shuning uchun dasturchingiz — yoki Google Tag Manager bilan ishlaydigan kishi — bandlov voronkasini qurishi, kimdir band qilganda sahifani oʻzgartirishi yoki qadamlarni istalgan analitika vositasiga yuborishi mumkin.

Hodisalar

Har bir hodisa oʻz maʼlumotlarini event.detail ichida olib keladi. Ikki maydon doim bor: company — joylash kodingizdagi data-company qiymati — va booking_type: stollar uchun reservation, xizmatlar uchun appointment.

Hodisani tinglang

Vidjet turgan sahifaning oʻziga window.addEventListener va hodisa nomi yozilgan skript qoʻshing. U joylash kodidan oldin ham, keyin ham turishi mumkin. Quyidagi skript bandlov tasdiqlangach “Hozir band qiling” bannerini yashiradi:

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

Bandlov darhol tasdiqlansa, confirmed qiymati true boʻladi, jamoangiz hali qabul qilishi kerak boʻlgan soʻrov boʻlsa — false. value (currency bilan birga) qabulda xizmat narxini, stol bandlovida esa konversiyalarni kuzatish uchun siz belgilagan bandlov qiymatini bildiradi; ikkalasi ham boʻlmasa, u null boʻladi.

Ekranlar va javoblar

taptime:step ekran nomini detail.step ichida beradi. Mehmon qaysi ekranlarni koʻrishi u nimani band qilayotganiga va sozlamalaringizga bogʻliq:

• location — mehmon filiallaringizdan birini tanlaydi. Faqat bir nechta filialingiz boʻlsa va vidjet bittasiga bogʻlanmagan boʻlsa.
• party — mehmonlar soni. Faqat stollar uchun.
• service va specialist — nima band qilinadi va qaysi mutaxassisga. Faqat qabullar uchun.
• when — kun va vaqt.
• seating, zone va table — ichkarida yoki tashqarida, zalning biror qismi, aniq bir stol. Faqat stollar uchun va faqat siz yoqqan tanlovlar.
• details — mehmonning ismi va aloqa maʼlumotlari.
• done — bandlov qilingandan keyingi tasdiq ekrani.

step_index va step_count — mehmon shakl tepasida koʻradigan raqamlar, masalan, “2 / 5”. Filiallar roʻyxati va tasdiq ekrani raqamlanmagan, shuning uchun u yerda ikkalasi ham null. Ekranlar soni sozlamalaringizga bogʻliq boʻlgani uchun raqamni emas, qadam nomini tekshiring.

taptime:choice javobni detail.field ichida nomlaydi: branchId, partySize, date, time, seating, zoneId, tableId, serviceId yoki specialistId. detail.value — tanlangan narsa: raqam, id, 2026-09-18 koʻrinishidagi sana yoki 2026-09-18 19:30 koʻrinishidagi vaqt; detail.label esa mehmon tugmada koʻrgan matn, masalan, xizmat yoki filial nomi. “Istalgan” tanlansa, value null boʻlib yuboriladi.

Barcha hodisalarni Google Tag Manager'ga yuboring

taptime:event hodisasiga qoʻyilgan bitta tinglovchi ularning hammasini ushlaydi. Quyidagi skript har birini dataLayer obyektiga taptime_open, taptime_step, taptime_choice va hokazo nomlar bilan, detail maydonlari bilan birga yuboradi. Uni barcha sahifalarda ishga tushadigan Custom HTML tegiga yoki toʻgʻridan-toʻgʻri saytingizga qoʻying. Shundan keyin triggerlar, oʻzgaruvchilar va voronkani saytga qayta tegmasdan Tag Manager'da quring.

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

Yana misollar

Mehmonlar qayerda toʻxtab qolishini voronka tahlilida (funnel exploration) koʻrish uchun har bir ekranni Google Analytics 4'ga alohida hodisa sifatida yuboring. Buning uchun sahifangizda gtag.js orqali oʻrnatilgan GA4 kerak:

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

Mehmon panelni band qilmasdan yopsa, unga band qilishning boshqa yoʻlini taklif qiling — bu misolda yashirin “Bizga qoʻngʻiroq qiling” blokini koʻrsatib:

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

Ishlashini tekshiring

1. 1
   Eʼlon qilingan saytingizni oching

   Koʻp sayt konstruktorlari maxsus kodni muharrirda ishga tushirmaydi, shuning uchun jonli saytdan foydalaning.

2. 2
   Brauzer konsolini oching

   Sahifada sichqonchaning oʻng tugmasini bosing, Inspect (brauzer tiliga qarab nomi boshqacha boʻlishi mumkin) bandini tanlang, soʻng Console yorligʻini oching.

3. 3
   Quyidagi qatorni qoʻyib, Enter tugmasini bosing

   U vidjetning har bir hodisasini sodir boʻlishi bilan chiqarib boradi. Sahifani qayta yuklaguningizcha ishlaydi.

4. 4
   Sinov bandlovini oxirigacha bosib chiqing

   Har bir ekran va javob konsolda paydo boʻladi, soʻngra bandlovning oʻzi. Keyin sinov bandlovini doskangizdan bekor qiling.

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