Сайтыңызда брондоо виджетинин окуяларын угуңуз

Брондоо виджети сайтыңызга орнотулгандан кийин, ал конок анын ичинде эмне кылып жатканын баракка билдирип турат: панелдин ачылышы жана жабылышы, брондоонун ар бир экраны, ар бир жооп жана брондоонун өзү. Алардын ар бири — 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 — конок форманын жогору жагында көргөн сандар, мисалы «5 ичинен 2». Филиалдар тизмеси жана ырастоо экраны номерленбейт, ошондуктан ал жерде экөө тең 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 окуясына коюлган бир угуучу алардын баарын кармайт. Төмөнкү скрипт ар бирин dataLayer'ге taptime_open, taptime_step, taptime_choice ж.б. катары, detail талаалары менен кошо жөнөтөт. Аны бардык барактарда иштеген «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); });