Escucha los eventos del widget de reservas en tu web

Una vez que el widget de reservas está en tu web, informa a la página de lo que hace el cliente en él: la apertura y el cierre del panel, cada pantalla de la reserva, cada respuesta y la propia reserva. Cada uno es un evento del navegador en window, así que tu desarrollador (o quien gestione tu Google Tag Manager) puede crear un embudo de reservas, cambiar la página cuando alguien reserva o enviar los pasos a cualquier herramienta de analítica.

Los eventos

Cada evento lleva sus datos en event.detail. Siempre hay dos campos: company, el valor de data-company de tu código para insertar, y booking_type: reservation para mesas, appointment para servicios.

Escucha un evento

Añade un script en la misma página que el widget, con window.addEventListener y el nombre del evento. Puede ir antes o después del código para insertar. Este oculta un banner «Reserva ya» en cuanto se confirma una reserva:

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

confirmed es true cuando la reserva se confirma al momento, y false cuando es una solicitud que tu equipo todavía tiene que aceptar. value, con su currency, es el precio del servicio en una cita, o el valor por reserva que hayas fijado para el seguimiento de conversiones en una mesa, y null cuando no hay ninguno de los dos.

Pantallas y respuestas

taptime:step indica la pantalla en detail.step. Las pantallas que ve un cliente dependen de lo que reserva y de tus ajustes:

• location: el cliente elige uno de tus locales. Solo cuando tienes varios y el widget no está vinculado a uno.
• party: cuántas personas. Solo mesas.
• service y specialist: qué reservar y con quién. Solo citas.
• when: el día y la hora.
• seating, zone y table: interior o terraza, una zona de la sala, una mesa concreta. Solo mesas, y solo las opciones que hayas activado.
• details: el nombre y los datos de contacto del cliente.
• done: la pantalla de confirmación, una vez hecha la reserva.

step_index y step_count son los números que el cliente ve arriba del formulario, como en «2 de 5». La lista de locales y la pantalla de confirmación no van numeradas, así que ahí ambos son null. Como el número de pantallas depende de tus ajustes, comprueba el nombre del paso y no el número.

taptime:choice indica la respuesta en detail.field: branchId, partySize, date, time, seating, zoneId, tableId, serviceId o specialistId. detail.value es lo que se eligió (un número, un ID, una fecha como 2026-09-18 o una hora como 2026-09-18 19:30) y detail.label es lo que el cliente leyó en el botón, como el nombre de un servicio o de un local. Elegir «cualquiera» envía el valor null.

Envía todos los eventos a Google Tag Manager

Un solo listener en taptime:event los recoge todos. El script de abajo envía cada uno al dataLayer como taptime_open, taptime_step, taptime_choice, etc., junto con los campos de detail. Pégalo en una etiqueta de HTML personalizado que se dispare en todas las páginas, o directamente en tu web. Después crea activadores, variables y un embudo en Tag Manager sin volver a tocar la web.

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

Más ejemplos

Envía cada pantalla a Google Analytics 4 como un evento propio para ver, en una exploración de embudo, dónde abandonan los clientes. Necesitas GA4 instalado en tu página con 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>

Ofrece otra forma de reservar cuando un cliente cierra el panel sin reservar; aquí, mostrando un bloque oculto «Llámanos»:

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

Comprueba que funciona

1. 1
   Abre tu web publicada

   Muchos creadores de webs no ejecutan código personalizado en su editor, así que usa la web real.

2. 2
   Abre la consola del navegador

   Haz clic derecho en la página, elige Inspeccionar y abre la pestaña Consola.

3. 3
   Pega la línea de abajo y pulsa Intro

   Muestra cada evento del widget en cuanto ocurre. Funciona hasta que recargues la página.

4. 4
   Haz una reserva de prueba

   Cada pantalla y respuesta aparece en la consola, y después la reserva. Cancela luego la reserva de prueba desde tu tablero.

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