Cómo registrar conversiones con Google Tag Manager

¿En dónde puedo encontrarlo? Compañía >>> Componentes/Integraciones >>> Google Tag Manager

Google Tag Manager es un sistema de gestión de etiquetas que te permite gestionar, desplegar y administrar etiquetas de marketing (fragmentos de código o píxeles de seguimiento) sin tocar el código de tu web cada vez.

Con esta integración puedes hacer seguimiento de tus conversiones de compra en Google Analytics 4 (GA4) y Google Ads, ya uses la página de agradecimiento predeterminada de TuriTop o tu propia página de agradecimiento personalizada.

¿Usas el Plugin TuriTop para WooCommerce? La configuración para WordPress/WooCommerce se explica en este artículo (en construcción). 

Si tienes dudas luego de revisar este artículo, ponte en contacto con nuestro equipo de soporte para poder asesorarte según la configuración de tu cuenta TuriTop.

Cómo funciona esta integración 

El widget de reservas se incrusta como un <iframe> en tu web, pero la compra termina en el dominio de TuriTop. Esta integración permitirá que la conversión se mida en tu dominio, dentro de la misma sesión que trajo la campaña.

A grandes rasgos:

1. El widget lee de tu página (la página padre) los datos de atribución: gclid, gbraid, wbraid, gad_source, parámetros utm_* y las cookies _ga / _gcl_aw, y los arrastra a través del flujo de compra. Estos datos viajan en vivo y nunca se guardan en nuestra base de datos. 
2. El widget emite un embudo estandarizado de eventos hacia tu página: widget_loaded (se dispara al cargar el widget), add_to_cart (se dispara al cambiar el ticket_type_count), checkout_started (se dispara al llegar al paso del formulario y pago), purchase (se dispara al confirmarse la compra) y payment_error (se dispara al fallar/rechazar el pago). 
3. Al confirmar la compra, la conversión se dispara en tu dominio por una de dos vías automáticas:
   • Si usas la página de agradecimiento por defecto de TuriTop: enviado por postMessage a la página que incrusta el widget (sin redirección).
   • Si usas la página de agradecimiento personalizada:  Redirección top-level a tu página de agradecimiento con los parámetros en la URL.

En ambos casos las conversiones se deduplican por transaction_id = booking_id, de modo que una misma venta nunca se cuenta dos veces.

Qué podrás medir

• Compras (purchase): atribuidas a tus campañas de Google Ads y a GA4, con su valor y moneda. 
• Desglose por compañía (company_short_id), producto (product_short_id) y dominio de origen (site_url): Útil si gestionas varias compañías o sitios. 
• Métodos de pago: stripe, paypal, sis, promo, etc.
• Eventos previos del embudo (widget_loaded, add_to_cart, checkout_started): para optimizar tus campañas.
• Seguimiento de la sesión: Atribución por gclid / gbraid / wbraid / gad_source, utm_* y cookies _ga / _gcl_aw.

Los pagos con la pasarela de Redsys clásica navegan a nivel superior, de modo que el retorno del banco llega a tu página de éxito (o a la página que incrusta el widget) y la conversión se dispara allí, igual que con PayPal. No requiere configuración adicional.

Payloads

Campos/payload del evento purchase:

En compras sin pasarela online (descuentos, gratis, etc) se registrarán con payment_method = promo y el total puede ser 0. Un pago aplazado (payment link) no emite purchase hasta que haya un pago real.

Campos/payload del evento widget_loaded:

Campos/payload del evento add_to_cart:

Campos/payload del evento checkout_started:

Campos/payload del evento payment_error:

¿Cómo se registran las pasarelas de pago de TuriTop?

Requisitos previos

• Tener GA4 instalado en tu dominio y el auto-tagging de Google Ads activo, para que las cookies _ga / _gcl_aw y el gclid lleguen a tu página. 
• Tener una cuenta y un contenedor Web de Google Tag Manager.

Instrucciones

Sigue los siguientes pasos para conectar tu panel de TuriTop con GTM:

Paso 1: Accede a tu cuenta de Google Tag Manager

Ve al sitio web de Google Tag Manager (https://tagmanager.google.com/) y accede con tu cuenta de Google asociada o crea una nueva si no la tienes (tutorial). 

Una vez dentro, accede a Espacio de trabajo (Workspace) y copia el ID que verás en la parte superior derecha de la página. Será similar a: GTM-XXXXX.

Paso 2: Conecta tu Google Tag Manager a tu cuenta de TuriTop

Entra en el panel de control de tu sistema de reservas TuriTop y dirígete a la pestaña Compañía >>> Componentes/Integraciones >>> Google Tag Manager.

Pega tu ID de Google Tag Manager.

Paso 3: Instala la etiqueta de GTM en tu sitio web

Para saber cómo instalar el contenedor de GTM en tu sitio web, puedes seguir este tutorial. Aunque puedes insertar los fragmentos de código manualmente, existen múltiples herramientas en el mercado que pueden ayudarte dependiendo de cuál CMS uses. 

Asegúrate de no duplicar el código si tu CMS ya lo inserta por otra vía.

Paso 4: Importa el contenedor de TuriTop o crea tu propia configuración

Tu equipo de marketing podría configurar las etiquetas y activadores de GTM si lo desea, pero te ofrecemos un contenedor predefinido que podrás importar de manera sencilla a tu panel. 

Si deseas usar nuestro contenedor o usarlo de plantilla, revisa la siguiente sección. 

Si prefieres configurarlo desde cero, crea tus propias etiquetas usando como base el activador de evento purchase y los campos del payload (puedes mapear booking_id >transaction_id, total > value, etc.). Para desarrolladores que prefieran su propio código en lugar de GTM, también es posible escuchar directamente el evento purchase mediante window.addEventListener("message", …), filtrando siempre por e.data.origin === "turitop".

Paso 5: Haz pruebas en Google Tag Manager

Google recomienda comprobar que las etiquetas configuradas funcionen correctamente antes de publicar los cambios. Para realizar pruebas, haz clic en la opción "Vista previa".

Deberás introducir la URL de tu página web y, una vez cargue, hacer clic en "Continuar" y simular el comportamiento de un usuario en la web para comprobar que GTM registra correctamente los eventos configurados.

Asegúrate de que ya hayas instalado la etiqueta de Google Tag Manager en tu sitio web.

Importar el contenedor de TuriTop 

Te ofrecemos un contenedor preconfigurado que trae todo lo necesario para registrar los eventos comentados anteriormente. Para descargarlo, haz clic aquí. 

Paso 1: Importa el contenedor

Deberás entrar en tu panel de Google Tag Manager y hacer clic en "Administrador".

En el menú de opciones del contenedor, deberás seleccionar la opción "Importar contenedor".

En la nueva ventana que se abra deberás:

1. Seleccionar el archivo "turitop-container.json" que descargaste antes.
2. Decidir en qué espacio de trabajo lo instalarás.
3. Escoger si sobrescribirás o no la configuración preexistente.

Para terminar de importarlo, haz clic en "Añadir a espacio de trabajo".

Paso 2: Modifica los IDs

Después de importar el contenedor, verás los siguientes activadores y etiquetas en tu panel:

Sólo tienes que editar tres variables constantes con tus propios identificadores:

• Const - GA4 Measurement ID: sustituye G-XXXXXXXXXX por tu ID de medición de GA4.
• Google Ads Conversion ID: sustituye AW-XXXXXXXXXX por el ID numérico de tu acción de conversión.
• Google Ads Conversion Label: sustituye el valor del marcador por tu etiqueta de conversión.

Accede a "Variables", selecciona "Const - GA4 Measurement ID", haz clic en el lápiz para editarla, añade tu ID de Google Analytics 4 y haz clic en "Guardar" para registrar los cambios. Luego repite el paso para "Const - Google Ads Conversion ID" y "Const - Google Ads Conversion Label".

¿Cómo obtener el ID de GA4? Si no sabes dónde encontrar tu ID, sigue este tutorial.

Paso 3: Publica los cambios

Cuando hayas finalizado de hacer todos los cambios necesarios en el contenedor, recuerda hacer clic en "Enviar" para que entren en producción.