Instalar Dialog vía Google Tag Manager

Beta

Las instalaciones vía GTM están actualmente en beta. Los pasos de configuración y los parámetros del script pueden cambiar antes de la GA — vigila esta página para ver las actualizaciones y escribe a paul@askdialog.com si despliegas vía GTM para que podamos avisarte de cambios incompatibles.

Esta guía despliega el widget Dialog a través de Google Tag Manager — una vía no-code que configuras enteramente desde GTM. Es para tiendas que no están ni en Shopify ni en Prestashop, y sin developer frontend disponible. Si esa no es exactamente tu situación, otra vía te sirve mejor — revisa los límites de abajo antes de comprometerte.

Qué puede y qué no puede hacer GTM

La mayoría de las decepciones con instalaciones GTM son uno de estos límites conocidos, no bugs. Léelo antes de elegir esta vía.

GTM puede:

• Desplegar el widget Dialog en tus páginas de producto sin tocar el código del storefront.
• Pasar el ID de producto (y la variante seleccionada) a Dialog vía variables GTM.
• Reenviar los eventos add_to_cart y purchase a Dialog vía el bridge de tracking GTM.

GTM no puede:

• 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 debe añadir 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. Sin él, tus visitantes tendrán que recargar la página para ver la actualización del carrito. Es un límite estructural de GTM, no algo que soporte pueda configurar.
• Cargar el widget al instante o fundirlo en tu sistema de diseño. 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.
• Trackear conversiones por sí solo. La atribución de add-to-cart y checkout necesita los tags adicionales descritos en el bridge de tracking GTM — sáltatelos y los números de tu dashboard estarán mal.

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)
bridgesGaAddToCart	No	Pon true si también reenvías tu add_to_cart de GA a Dialog mediante el bridge de tracking — evita un duplicado de user_added_to_cart al añadir al carrito desde el asistente

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.

Empujar la variante seleccionada (recomendado)

Si tus páginas de producto tienen variantes (tallas, colores, etc.), empuja el ID de variante actualmente seleccionada a Dialog para que las acciones de add-to-cart usen el SKU exacto que eligió el visitante — no el ID del producto padre.

Paso 1: instala el stub de pre-init

Añade este snippet inline y síncrono como un tag GTM HTML personalizado que se dispare antes de dialog-instant.js en la misma vista de página de producto. Almacena las llamadas a setVariant disparadas antes de que el script principal termine de cargar, para que ningún cambio de variante se pierda durante la ventana de descarga del script:

<script>
  window.dialog = window.dialog || {};
  window.dialog._queue = window.dialog._queue || [];
  window.dialog.setVariant =
    window.dialog.setVariant ||
    function (args) {
      window.dialog._queue.push(['setVariant', args]);
    };
</script>

Es el mismo patrón que usan gtag, fbq y Segment. Cuando dialog-instant.js carga, vacía _queue y reemplaza el stub con la implementación real. La guarda || mantiene el snippet idempotente si tu tag GTM se dispara más de una vez.

Paso 2: crea una variable para el ID de variante

En GTM, Variables → Nueva, con nombre p. ej. Dialog Variant ID. El tipo depende de cómo tu storefront exponga la variante actualmente seleccionada — normalmente el mismo enfoque que usaste para Dialog Product ID (Variable de Data Layer, JavaScript personalizado o Elemento del DOM).

Paso 3: empuja los cambios de variante a Dialog

Crea un segundo tag HTML personalizado que se dispare cada vez que el visitante cambia de variante en la PDP:

<script>
  window.dialog = window.dialog || {};
  window.dialog._queue = window.dialog._queue || [];
  window.dialog.setVariant =
    window.dialog.setVariant ||
    function (args) {
      window.dialog._queue.push(['setVariant', args]);
    };
  window.dialog.setVariant({ variantId: '{{Dialog Variant ID}}' });
</script>

Precaución

El placeholder {{Dialog Variant ID}} es insertado por GTM como texto en bruto. Mantén las comillas que lo rodean para que el JavaScript resultante trate el valor como un string.

Dispara este tag con un Evento Personalizado con nombre variant_changed (o cualquier nombre de evento que empuje tu storefront), donde tu storefront llame a dataLayer.push({ event: 'variant_changed', variantId: 'X' }) cada vez que se selecciona una variante.

Alternativa: evento dialog:variant-changed en window

Si prefieres despachar un evento DOM en lugar de llamar a un método, despacha un evento dialog:variant-changed en window:

window.dispatchEvent(
  new CustomEvent('dialog:variant-changed', {
    detail: { variantId: 'SELECTED_VARIANT_ID' },
  }),
);

Dialog escucha este evento y lo reenvía al mismo setter interno. Misma validación, mismo comportamiento. Usa el estilo que mejor encaje con tu storefront.

Cómo se resuelve

Cuando el visitante interactúa con el widget, Dialog elige la variante en este orden:

1. Último valor empujado vía window.dialog.setVariant o el evento dialog:variant-changed.
2. El textContent de un elemento que coincida con .product-id en la página (fallback legacy).
3. undefined — Dialog añade el producto padre al carrito.

Para nuevas instalaciones, prefiere setVariant. El fallback DOM .product-id está soportado por compatibilidad hacia atrás con instalaciones antiguas.

Verifica

1. En modo Vista previa de GTM, navega a una página de producto de tu sitio.
2. Abre la consola de DevTools del navegador.
3. Pega:

   window.addEventListener('enableDialogAssistantEvent', (e) =>
     console.log('[dialog]', e.detail.payload.selectedVariantId),
   );

4. Elige una variante en la página, luego haz clic en una sugerencia del widget Dialog.
5. La consola debería loguear el ID de la variante seleccionada — eso es lo que Dialog usará para el add-to-cart.

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
TypeError: window.dialog.setVariant is not a function	Falta el stub de pre-init y una llamada a setVariant se ejecutó antes de que dialog-instant.js terminara de cargar	Añade el snippet del stub inline de «Empujar la variante seleccionada» — Paso 1
[Dialog] setVariant: expected { variantId: string } ...	Pasaste algo distinto a { variantId: 'X' }	Asegúrate de que variantId es un string no vacío; verifica que GTM resuelve la variable y que las comillas se preservan
El carrito añade el producto padre, no la variante seleccionada	setVariant no está conectado, o el trigger de cambio de variante no se dispara	Verifica que la variable GTM Dialog Variant ID resuelve a la variante seleccionada en la página; comprueba que el tag HTML personalizado se dispara en cada cambio de variante

¿Sigues bloqueado?

Si has revisado todas las filas de la tabla de arriba y la documentación no responde, Antes de contactar con soporte lista qué preparar (incluidos los resultados del modo preview de GTM), y escribe después a paul@askdialog.com.