Сайтыңызда брондау виджетінің оқиғаларын тыңдаңыз

Брондау виджеті сайтыңызға орнатылған соң, ол бетке қонақтың виджетте не істеп жатқанын хабарлап отырады: панельдің ашылуы мен жабылуы, брондаудың әр экраны, әр жауап және брондаудың өзі. Олардың әрқайсысы — window объектісіндегі браузер оқиғасы, сондықтан әзірлеушіңіз немесе Google Tag Manager-іңізбен жұмыс істейтін кез келген адам брондау воронкасын құра алады, біреу брондағанда бетті өзгерте алады немесе қадамдарды кез келген аналитика құралына жібере алады.

Оқиғалар

Әр оқиға өз деректерін event.detail ішінде алып жүреді. Екі өріс әрқашан болады: company — ендіру кодыңыздағы data-company мәні, және booking_type: үстел брондаулары үшін reservation, қызметке жазылулар үшін appointment.

Оқиғаны тыңдаңыз

Виджет тұрған бетке window.addEventListener пен оқиға атауын қолданатын скрипт қосыңыз. Ол ендіру кодынан бұрын да, кейін де тұра алады. Мына скрипт брондау расталған соң «Қазір брондаңыз» баннерін жасырады:

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

confirmed брондау бірден расталса true, ал командаңыз әлі қабылдауы тиіс сұрау болса false болады. value (currency валютасымен бірге) жазылу үшін — қызмет бағасы, үстел үшін — конверсияларды бақылау үшін өзіңіз белгілеген бір брондаудың құны, ал екеуі де болмаса — null.

Экрандар мен жауаптар

taptime:step экранның атауын detail.step ішінде береді. Қонақтың қай экрандарды көретіні оның не брондайтынына және параметрлеріңізге байланысты:

• location — қонақ орындарыңыздың бірін таңдайды. Орындарыңыз бірнешеу болса және виджет олардың біреуіне байланбаса ғана көрсетіледі.
• party — қонақтар саны. Тек үстелдер үшін.
• service және specialist — қандай қызметке және кімге жазылу. Тек жазылулар үшін.
• when — күні мен уақыты.
• seating, zone және table — ішінде немесе сыртта, залдың бір аймағы, нақты үстел. Тек үстелдер үшін және тек өзіңіз қосқан таңдаулар ғана.
• details — қонақтың аты мен байланыс деректері.
• done — брондау жасалғаннан кейінгі растау экраны.

step_index және step_count — қонақ форманың жоғарғы жағында көретін сандар, мысалы, «2 / 5». Орындар тізімі мен растау экраны нөмірленбейді, сондықтан оларда екеуі де null болады. Экрандар саны параметрлеріңізге байланысты болғандықтан, нөмірін емес, қадамның атауын тексеріңіз.

taptime:choice жауаптың не екенін detail.field ішінде атайды: branchId, partySize, date, time, seating, zoneId, tableId, serviceId немесе specialistId. detail.value — таңдалған мән: сан, id, 2026-09-18 түріндегі күн немесе 2026-09-18 19:30 түріндегі уақыт, ал detail.label — қонақ түймеде оқыған мәтін, мысалы, қызметтің немесе орынның атауы. «Кез келген» нұсқасы таңдалса, value мәні null болып жіберіледі.

Барлық оқиғаны Google Tag Manager-ге жіберіңіз

taptime:event оқиғасындағы бір тыңдаушы олардың бәрін ұстайды. Төмендегі скрипт әрқайсысын detail өрістерімен бірге dataLayer-ге taptime_open, taptime_step, taptime_choice және т.с.с. ретінде жібереді. Оны барлық бетте іске қосылатын Custom HTML тегіне немесе тікелей сайтыңызға қойыңыз. Содан кейін триггерлерді, айнымалыларды және воронканы сайтқа қайта тиіспей-ақ Tag Manager-де құрыңыз.

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

Басқа мысалдар

Қонақтар қай жерде тоқтайтынын воронка зерттеуінде (funnel exploration) көру үшін әр экранды Google Analytics 4-ке жеке оқиға ретінде жіберіңіз. Ол үшін бетіңізде gtag.js арқылы орнатылған GA4 болуы керек:

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

Қонақ панельді брондамай жапқанда, брондаудың басқа жолын ұсыныңыз — мұнда жасырын «Бізге қоңырау шалыңыз» блогын көрсету арқылы:

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

Жұмыс істейтінін тексеріңіз

1. 1
   Жарияланған сайтыңызды ашыңыз

   Көптеген сайт құрастырушылар жеке кодты өз редакторында іске қоспайды, сондықтан нақты, жарияланған сайтты пайдаланыңыз.

2. 2
   Браузер консолін ашыңыз

   Бетті тінтуірдің оң жақ батырмасымен басып, Inspect тармағын таңдаңыз да, Console қойындысын ашыңыз.

3. 3
   Төмендегі жолды қойып, Enter пернесін басыңыз

   Ол виджеттің әр оқиғасын болған сәтте шығарып отырады. Бетті қайта жүктегенге дейін жұмыс істейді.

4. 4
   Сынақ брондауын басынан аяғына дейін өтіңіз

   Консольде әр экран мен жауап, содан кейін брондаудың өзі пайда болады. Тексеріп болған соң сынақ брондауын тақтаңыздан болдырмаңыз.

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