Отслеживайте события виджета бронирования на своём сайте

Когда виджет бронирования стоит на вашем сайте, он сообщает странице, что гость в нём делает: открытие и закрытие панели, каждый экран бронирования, каждый ответ и само бронирование. Всё это — события браузера на 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) — для записи это цена услуги, для стола — ценность бронирования, которую вы задали для отслеживания конверсий; если нет ни того, ни другого, value равно 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 — выбранное значение (число, идентификатор, дата в виде 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. Вставьте его в тег «Пользовательский 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 отдельным событием, чтобы в исследовании-воронке видеть, на каком шаге гости уходят. Для этого на странице должен быть установлен 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
   Откройте консоль браузера

   Щёлкните по странице правой кнопкой мыши, выберите «Просмотреть код» и откройте вкладку «Консоль» (Console).

3. 3
   Вставьте строку ниже и нажмите Enter

   Она выводит каждое событие виджета в момент, когда оно происходит, и действует до перезагрузки страницы.

4. 4
   Пройдите тестовое бронирование

   Каждый экран и ответ появятся в консоли, а затем и само бронирование. После этого отмените тестовое бронирование с доски.

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