Integración con Google Tag Manager
Añade un chatbot con IA con Google Tag Manager
Carga tu agente de intoCHAT en todas las páginas con una etiqueta de HTML personalizado, sin editar las plantillas de tu web. El código de abajo pasa el ID del agente de una forma que GTM respeta.
Última actualización:
Cómo funciona intoCHAT con GTM
Google Tag Manager te permite añadir scripts a tu web desde un solo lugar. intoCHAT funciona con GTM, con un detalle importante: GTM elimina los atributos data de las etiquetas script dentro de las etiquetas de HTML personalizado, y el script de intoCHAT lee el ID del agente justo de uno de esos atributos. El código de esta página lo evita creando el elemento script con JavaScript, así el widget se carga con el agente correcto. Todo lo demás, de los colores al conocimiento, se gestiona en intoCHAT.
Instalar intoCHAT con Google Tag Manager
Copia el ID de tu agente
En intoCHAT, abre la pestaña Share de tu agente. El ID aparece en la tarjeta WordPress Plugin y también es el valor de data-chatbot-id en la etiqueta script.
Crea un activador DOM preparado
En tu contenedor de GTM, ve a Activadores y haz clic en Nuevo. Abre Configuración del activador, elige DOM preparado, déjalo en todos los eventos, ponle un nombre y guárdalo.
Añade una etiqueta de HTML personalizado
Ve a Etiquetas y haz clic en Nueva. Abre Configuración de la etiqueta, elige HTML personalizado y pega el código de abajo, con tu ID en lugar de YOUR_AGENT_ID. Selecciona el activador DOM preparado y guarda.
Pruébalo en modo vista previa
Inicia el modo de vista previa de GTM, abre tu web en la ventana conectada y comprueba que la etiqueta se activó y que la burbuja de chat aparece en la esquina inferior.
Envía y publica
Envía los cambios y publica el contenedor. La burbuja de chat se carga ahora en todas las páginas donde funciona tu contenedor de GTM.
La etiqueta de HTML personalizado
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>No pegues en GTM la etiqueta script simple de la pestaña Share, porque GTM le quita el atributo data-chatbot-id. Esta versión define el atributo con JavaScript y no carga nada si el widget ya está en la página.
Qué hace el agente en una web gestionada con GTM
Se instala sin desplegar código
Si tu web ya carga un contenedor de GTM, puedes añadir, probar y quitar el agente desde GTM sin cambiar las plantillas de tu web.
Aprende de tu web
Pega la dirección de tu web e intoCHAT encuentra hasta 500 páginas a través del sitemap y los enlaces, renderiza las páginas con JavaScript y te deja elegir qué incluir.
Capta leads
Un formulario dentro del chat pide un email o un teléfono según las reglas que definas. Los leads te llegan por email y puedes exportarlos en CSV.
Ejecuta acciones en tu página
Las acciones del lado del cliente llaman a funciones de JavaScript que registras en tu propia página, y las acciones de API personalizadas permiten al agente llamar a tu API HTTP durante el chat.
Encaja con tu marca
Define colores, avatar, icono del botón, texto de ayuda y posición en intoCHAT. Los cambios se aplican sin tocar la etiqueta de GTM.
Muestra lo que preguntan los visitantes
Lee cada conversación con búsqueda y filtros por fecha, y sigue conversaciones, mensajes y leads en el panel.
Preguntas frecuentes
¿Puedo pegar la etiqueta script normal de intoCHAT en Google Tag Manager?
No. GTM elimina los atributos personalizados como data-chatbot-id de los elementos script en las etiquetas de HTML personalizado, así que el widget no sabría qué agente mostrar y no aparecería ninguna burbuja. El código de esta página crea el elemento script con JavaScript y define el atributo por sí mismo, algo que GTM no toca.
¿Qué activador de GTM debo usar para intoCHAT?
Usa un activador DOM preparado. El widget añade su burbuja al body de la página en cuanto se ejecuta, y DOM preparado se activa cuando el navegador ha terminado de construir la página, así que el body siempre existe. Para mostrar el chat solo en algunas páginas, configura el activador en algunos eventos y añade una condición como Page Path empieza por /support.
¿Cargar intoCHAT con GTM ralentiza mi web?
La página no lo espera. GTM carga su contenedor de forma asíncrona, y un elemento script añadido con JavaScript no bloquea el renderizado. Después, la ventana del chat funciona en su propio iframe servido por intoCHAT, separada del código de tu web.
¿La burbuja de chat aparece dos veces en una aplicación de una sola página?
No. El código comprueba si su elemento script ya existe antes de añadirlo, así que si la etiqueta se vuelve a activar en la misma página, por ejemplo con un activador de cambio de historial, no se añade nada. Una vez cargada, la burbuja se queda hasta la siguiente carga completa de la página, así que las condiciones de página solo deciden dónde aparece primero.
¿Tengo que actualizar la etiqueta de GTM cuando cambio el agente?
No. La etiqueta solo lleva el ID de tu agente. Los colores, la posición, el mensaje de bienvenida, las preguntas sugeridas y el conocimiento se cargan desde intoCHAT cada vez que se abre una página, así que no hace falta publicar una nueva versión en GTM.
Mi web tiene una Content Security Policy. ¿Qué debo permitir?
Permite www.intochat.ai para scripts, conexiones y frames. El widget carga su script desde ahí, obtiene su configuración del mismo dominio y abre el chat en un iframe servido por intoCHAT.
Míralo responder con tu propia web
Pega la dirección de tu web y chatea con un agente creado a partir de tus páginas. Tarda alrededor de un minuto.
Crea tu agente gratisPlan gratuito, sin tarjeta de crédito.