Instalar Dialog vía Google Tag Manager

Esta guía despliega el widget Dialog a través de Google Tag Manager — una vía no-code que configuras enteramente desde GTM.

Antes de comprometerte: como el widget se carga vía GTM después del resto de la página, los visitantes tienen un retraso y un layout shift antes de que aparezca, y no encaja perfectamente con tu sistema de diseño.

Una cosa que GTM no puede hacer por ti: refrescar tu UI de carrito después de añadir un producto vía Dialog. Ningún tag GTM tiene visibilidad sobre el estado de tu aplicación. Tu developer frontend va a necesitar un pequeño snippet JS que escuche el evento dialog:cart:updated en document para re-renderizar tu icono de carrito / mini-cart — ver Problemas al añadir al carrito para el patrón exacto. Si no tienes un developer que pueda conectar ni eso, tus visitantes tendrán que recargar la página para ver la actualización del carrito.

El tracking del add-to-cart y del checkout también necesita tags adicionales — ver el bridge de tracking GTM. Usa la vía de instalación GTM solo si una instalación SDK no es opción para tu equipo.

Cuándo elegir esta vía

GTM es la opción adecuada cuando se cumplen todas estas condiciones:

• Tu tienda no está en Shopify (usa la app Shopify en su lugar — cubre la ingestión de data Y el frontend de un golpe).
• Tu tienda no está en Prestashop (usa el módulo Prestashop en su lugar).
• No tienes developers frontend disponibles para conectar el SDK o los componentes React / Vue.
• Sí tienes GTM ya instalado en tu sitio (o alguien que pueda instalarlo).

Si tienes un storefront React o Vue, prefiere los componentes. Si tienes cualquier otro frontend (Svelte, templating server-side, vanilla JS), prefiere el SDK. GTM debe ser el último recurso cuando ninguno de los anteriores es factible.

Prerrequisitos

• Una cuenta de Google Tag Manager con un contenedor desplegado en tu sitio.
• Tu API key de Dialog (proporcionada por el equipo Dialog tras crear una organización API Integration en app.askdialog.com/sign-up).
• El ID de producto disponible en JavaScript en tus páginas de producto — típicamente vía dataLayer.push, una variable JS global o un atributo del DOM.
• Un catálogo ya subido a Dialog para que el asistente tenga contenido con el que responder. Ver Integración del catálogo.

Paso 1: asegúrate de que GTM está activo en tu sitio

Esta guía supone que GTM ya está desplegado. Si no, instala el snippet GTM estándar en cada página (ver la guía oficial de Google). Para que el tag Dialog haga algo útil, tiene que dispararse al menos en tus páginas de producto.

Paso 2: crea una variable para el ID de producto

Dialog necesita saber qué producto está viendo el visitante. Crea una variable GTM que devuelva el ID de producto.

En GTM, ve a Variables → Variables definidas por el usuario → Nueva:

• Nombre: Dialog Product ID
• Tipo: depende de cómo el ID de producto esté expuesto en tu sitio.

Enfoques comunes

Variable de Data Layer — si tu sitio empuja el ID de producto al dataLayer en las páginas de producto:

• Tipo: Variable de Data Layer
• Nombre de la variable: productId (o la clave que use tu dataLayer).

JavaScript personalizado — si el ID de producto vive en una variable JS global:

function() {
  return window.myApp.currentProduct.id;
}

Elemento del DOM — si el ID de producto está en un atributo del DOM:

• Tipo: Elemento del DOM
• Método de selección: Selector CSS
• Selector del elemento: [data-product-id]
• Nombre del atributo: data-product-id

Nota

El formato del ID de producto debe coincidir con lo que está configurado en tu organización Dialog (ej. SKU interno, ID de producto de tu CMS, etc.). Lo que usaste al subir tu catálogo es lo que Dialog espera aquí.

Paso 3: crea el tag Dialog

En GTM, ve a Tags → Nuevo:

• Nombre: Dialog - Instant Block
• Tipo: HTML personalizado
• HTML:

<script src="https://cdn.askdialog.com/assets/dialog-instant.js?productId={{Dialog Product ID}}&apiKey=YOUR_API_KEY&target=YOUR_CSS_SELECTOR&position=afterend"></script>

Reemplaza YOUR_API_KEY por tu API key de Dialog, y YOUR_CSS_SELECTOR por un selector CSS que apunte a donde quieres que aparezca el bloque Dialog en la página de producto.

Parámetros del script

Parámetro	Obligatorio	Descripción
productId	Sí	El ID del producto mostrado en la página actual
apiKey	Sí	Tu API key de Dialog
target	Sí	Un selector CSS que apunte al elemento junto al cual Dialog se inserta
position	No	Posición de inserción relativa al target (por defecto: afterend)

Valores posibles para position

Valor	Descripción
beforebegin	Antes del elemento target
afterbegin	Dentro del target, antes de su primer hijo
beforeend	Dentro del target, después de su último hijo
afterend	Después del elemento target (por defecto)

Paso 4: configura el trigger

Añade un trigger al tag para que solo se dispare en las páginas de producto:

• Tipo: Vista de página
• Se dispara en: Algunas vistas de página
• Condición: una condición de path que coincida con las URLs de tus productos. Ejemplos:
  • WooCommerce / WordPress: Page Path contiene /product/
  • Magento: Page Path coincide con la regex ^/.+\.html$ (o más estricto)
  • Ecom custom: el patrón que usen tus URLs de producto

Paso 5: prueba

1. En GTM, haz clic en Vista previa (arriba a la derecha).
2. Introduce una URL de página de producto de tu sitio.
3. Verifica que:
   • El tag Dialog - Instant Block se dispara.
   • El bloque de preguntas de producto aparece en la página.
   • Las sugerencias cargan correctamente.
   • El campo de input te permite hacer una pregunta y abre el asistente Dialog.

Paso 6: publica

Cuando las pruebas pasan, haz clic en Enviar en GTM para publicar el contenedor.

Personalización visual

El bloque Dialog se adapta a tu sitio vía variables CSS. Sobrescríbelas en la hoja de estilos de tu sitio para ajustar el look:

:root {
  --dialog-primary-color: #000000;       /* Color primario (botones, acentos) */
  --dialog-cta-text-color: #ffffff;      /* Color de texto en botones */
  --dialog-shop-font-family: inherit;    /* Familia de fuentes */
}

Tracking del add-to-cart y del checkout desde GTM

GTM despliega el widget pero no sabe automáticamente cuándo un visitante añade al carrito o completa el checkout fuera del asistente. Para atribuir correctamente la conversión, conecta esos eventos vía el bridge de tracking GTM — dos tags GTM adicionales que reenvían los eventos add_to_cart y purchase a Dialog.

Resolución de problemas

Problema	Causa probable	Solución
El bloque no aparece	El selector target no coincide con ningún elemento	Verifica el selector CSS en las devtools del navegador
productId es undefined	La variable GTM devuelve undefined en el momento de carga	Asegúrate de que el ID de producto está disponible antes del disparo
Error 403 en la API	API key inválida o caducada	Verifica tu API key con el equipo Dialog
El bloque aparece en mal sitio	Los parámetros target o position no son adecuados	Ajusta el selector CSS y/o el valor de position