Прихващайте събитията от уиджета за резервации в сайта си

Щом уиджетът за резервации е на сайта ви, той съобщава на страницата какво прави гостът в него: отваряне и затваряне на панела, всеки екран от резервацията, всеки отговор и самата резервация. Всяко от тях е браузърно събитие на 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 е текстът, който гостът е прочел на бутона, например име на услуга или на обект. Изборът „без значение“ изпраща стойност null.

Изпращане на всички събития към Google Tag Manager

Един слушател на taptime:event прихваща всички тях. Скриптът по-долу изпраща всяко събитие към dataLayer като taptime_open, taptime_step, taptime_choice и т.н., заедно с полетата от detail. Поставете го в таг „Custom HTML“ (персонализиран 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>

Още примери

Изпращайте всеки екран към Google Analytics 4 като отделно събитие, за да видите във фуниево проучване (funnel exploration) къде гостите се отказват. За целта GA4 трябва да е инсталиран на страницата ви с 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>

Предложете друг начин за резервация, когато гост затвори панела, без да резервира — тук чрез показване на скрит блок „Обадете ни се“:

<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); });