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, tanto si usas la página de agradecimiento por defecto de TuriTop como si usas tu propia página de agradecimiento personalizada. La configuración cambia según cuál uses, así que en este artículo verás las instrucciones separadas para cada caso.

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.

¿Qué página de agradecimiento uso?

• Página por defecto: al terminar la compra, el comprador ve la página de confirmación de TuriTop (dentro del dominio turitop.com).
• Página personalizada: al terminar la compra, TuriTop lleva al comprador a una página de tu web (la que hayas configurado como URL de Éxito Personalizada).

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

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: el código de la reserva, el código del carrito (cart_hash) o el código de la compra multicliente (multi_client_hash), de modo que una misma venta nunca se cuenta dos veces. En la página personalizada, si el comprador recarga la página o vuelve a ella, la compra no se envía otra vez, siempre que el navegador permita usar el almacenamiento local (localStorage).

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 o Paypal navegan a nivel superior, de modo que el retorno del banco llega a tu página de éxito personalizada (o a la página que incrusta el widget) y la conversión se dispara allí. No requiere configuración adicional.

Los contenedores que te ofrecemos miden las compras. Los eventos del embudo llegan a tu página, pero no activan ninguna etiqueta: si quieres medirlos, tendrás que crear tus propias etiquetas.

Datos que se envían

Página por defecto: eventos del widget (postMessage)

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 (no es una compra nueva).

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?

Página personalizada: parámetros de la URL

Cuando el comprador termina la compra, TuriTop lo lleva a tu URL de Éxito Personalizada y añade los datos de la compra como parámetros. Por ejemplo:

https://tuweb.com/gracias/?currency=EUR&total=120.50&product_short_id=P123&product_name=Tour+en+barco&booking_id=ABC123&link=...&d=...&csid=C456&company_name=Mi+Empresa&lang=es&tt_attr=eyJnY2xpZCI6Ii4uLiJ9

Formato de los parámetros

• Lee los parámetros por nombre, no por posición. El orden puede cambiar según el tipo de compra.
• Los textos van codificados para URL (un espacio llega como +). En product_name y company_name, el carácter & se cambia por -.
• Los parámetros que terminan en [] son listas. Llegan repetidos, uno por reserva (por ejemplo, booking_id[]=A1&booking_id[]=A2).
• Los importes llegan como número con punto decimal (120.50).

En la siguiente tabla, reserva significa reserva individual, carrito significa compra con carrito de la compra y multicliente significa compra multicliente.

El parámetro tt_attr

tt_attr es un objeto JSON codificado en base64url sin relleno (+ pasa a -, / pasa a _, sin = al final).

Solo contiene letras, números, guiones y guiones bajos, así que ninguna redirección lo puede romper. No está cifrado: cualquiera que vea la URL puede leerlo.

Si quieres leerlo con tu propio código JavaScript:

function decodeTtAttr(value) {
  var s = value.replace(/-/g, '+').replace(/_/g, '/');
  while (s.length % 4) { s += '='; }
  return JSON.parse(atob(s));
}

var tt = new URLSearchParams(location.search).get('tt_attr');
var attr = tt ? decodeTtAttr(tt) : {};

Reventa

En una reserva revendida, csid y company_name son del proveedor (dueño del producto), mientras que en la página por defecto company_short_id es de la compañía revendedora.

Para unir los dos, tt_attr lleva reseller_csid y reseller_name del revendedor.

¿Qué pasa si la URL es demasiado larga?

Los parámetros que se pueden quitar tienen un límite de 1023 caracteres en total (URL configurada + parámetros). Si la URL es demasiado larga, TuriTop quita grupos de parámetros en este orden y se detiene en cuanto la URL cabe:

1. product_description
2. tt_attr (con él se pierden la forma de pago, la página de origen y la atribución).
3. link / link[], y con ellos price[], client_name[] y client_email[].
4. d
5. product_name
6. fbpixel
7. buyer_email (multicliente) y, client_name /client_email (reserva individual)

Importante:

• Un parámetro se quita entero o no se quita: nunca llega cortado.
• Nunca se quitan el código de la compra (booking_id, booking_id[], shopping_cart_id, multiclient_hash), total, currency, csid, company_name, product_short_id, lang ni payment_link. Por eso la compra se mide siempre, aunque puede llegar sin forma de pago, página de origen o nombre del producto si se han quitado. Una compra con muchas reservas puede pasar de los 1023 caracteres solo con estos parámetros.
• Con Redsys (y Bizum), el comprador pasa primero por una dirección corta de TuriTop y después llega a tu página. En ese último salto no hay límite de longitud: no se quita nada.
• Para evitar descartes, usa una URL de Éxito Personalizada corta.

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.
• Tener a mano tu ID de contenedor de GTM (GTM-XXXXXXX), tu ID de medición de GA4 (G-XXXXXXXXXX), tu ID de conversión de Google Ads (AW-XXXXXXXXXX) y la etiqueta de conversión de tu acción de compra.

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.

Este ID solo carga tu contenedor dentro del widget. No instala GTM en tu web. Para eso sigue el paso 3.

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. Si usas una página de agradecimiento personalizada, GTM tiene que estar instalado también en dicha página, desde donde se disparará el evento purchase.

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 dos contenedores predefinidos que podrás importar de manera sencilla, uno para cada tipo de página de agradecimiento

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

Si prefieres configurarlo desde cero:

• Página por defecto: crea tus etiquetas usando como base el activador de evento personalizado purchase y los campos del evento (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".
• Página personalizada: crea tus etiquetas leyendo los parámetros de la URL de tu página de agradecimiento (ver Página personalizada: parámetros de la URL). Ten en cuenta que no debes contar la compra si la URL lleva payment_link=1, y que debes evitar enviarla otra vez si el comprador recarga la página.

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 donde esté el widget y hacer clic en "Conectar". Después, preferiblemente, hacer una reserva de prueba con un importe mayor que 0 y donde se complete el pago.

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

Importar el contenedor de TuriTop 

Te ofrecemos contenedores preconfigurados para registrar el evento purchase.

• turitop-container-default-page.json: Para la página de agradecimiento por defecto de TuriTop.
• turitop-container-custom-page.json: Para la página de agradecimiento personalizada.

¿Usas las dos páginas? Importa los dos ficheros en el mismo contenedor de GTM. Los nombres no chocan: los elementos de uno empiezan por "TuriTop Default -" y los del otro por "TuriTop Custom -".

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. Selecciona el fichero que corresponde a tu página de agradecimiento (turitop-container-default-page.json o turitop-container-custom-page.json).
2. Decidir en qué espacio de trabajo lo instalarás (normalmente Default Workspace).
3. Escoger si sobrescribirás o no la configuración preexistente. Recomendamos "Combinar" y después "Sobrescribir etiquetas, activadores y variables en conflicto".

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". No cambies nada más.

¿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, haz clic en "Enviar", pon un nombre a la versión y haz clic en "Publicar" para que entren en producción.

Página personalizada: el script de la página de agradecimiento (opcional)

En Compañía >>> Componentes/Integraciones >>> Generador de código de la página de agradecimiento puedes generar un script para mostrar al comprador los datos de su reserva en tu página (código, botón de descarga, datos de pago).

Este originalmente se usaba para enviar los datos, pero lo hemos conservado para que puedas mostrar en tu página personalizada los datos de su reserva a los clientes.

• Es vital marcar la opción "Solo mostrar" antes de copiar el código. Así el script no envía nada a Google Ads, GA4, GTM ni Facebook, y la compra no se cuenta dos veces.
• No pongas tu ID de GTM en el script.

¿Cómo luce el script en la página web?

Los siguientes elementos (con la información específica de la reserva) que estás viendo a continuación se insertarán en la página de agradecimiento de tu sitio web. El texto o su apariencia puede ser modificado fácilmente.

Consentimiento de cookies

• La etiqueta de GA4 necesita el consentimiento analytics_storage.
• La etiqueta de Google Ads necesita el consentimiento ad_storage.

Si tu web usa un banner de cookies con el modo de consentimiento de Google y el comprador no da ese consentimiento, la compra no se envía. En la página personalizada, si el comprador da el consentimiento después de cargar la página de agradecimiento, sin recargarla, la compra tampoco se envía.

La dirección IP del comprador nunca se envía.