Google Tag Manager (GTM) es una herramienta que te permite añadir y gestionar fragmentos de código en tu sitio web sin necesidad de editar directamente el código del sitio. Si tu sitio web ya utiliza GTM, este es el método recomendado para instalar el Web Widget de Superchat.
A continuación, encontrarás instrucciones paso a paso sobre cómo integrar tu Web Widget de Superchat en Google Tag Manager.
Paso 1: Crear el script de tu Web Widget
Haz clic aquí y selecciona Nuevo Web Widget.
Paso 2: Copiar el applicationKey de tu script del Web Widget
Cuando tu widget esté creado, Superchat mostrará un script único para tu cuenta. Se verá algo así:
<script src='https://widget.superchat.de/snippet.js?applicationKey=AAAAAAAAAAAAAAAAAAA' referrerpolicy='no-referrer-when-downgrade'></script>
El script mostrado arriba es solo un ejemplo — el tuyo tendrá una clave de aplicación diferente. No necesitas usar este script directamente. En su lugar, busca la cadena de caracteres que aparece después de applicationKey= en tu propio script y cópiala. Esta es tu clave de aplicación única, y la pegarás en el script de GTM en el Paso 4.
Paso 3: Crear una nueva etiqueta en Google Tag Manager
Abre Google Tag Manager y selecciona tu contenedor.
En el menú lateral izquierdo, haz clic en Etiquetas y luego en Nueva.
Asigna un nombre a tu etiqueta, como "Web Widget de Superchat".
Haz clic en el área de Configuración de la etiqueta y selecciona HTML personalizado como tipo de etiqueta.
Paso 4: Añadir el script de Superchat
Pega el siguiente script en el campo HTML, reemplazando XXXXXXXXXXXXXXXXX con tu clave de aplicación del Paso 2:
<script>(function() {var script = document.createElement("script");script.type = "text/javascript";script.src = "https://widget.superchat.de/snippet.js?applicationKey=XXXXXXXXXXXXXXXXX";script.setAttribute("referrerpolicy","no-referrer-when-downgrade");document.body.appendChild(script);})();</script>
Paso 5: Configurar un activador
Un activador le indica a GTM cuándo ejecutar tu etiqueta — es decir, en qué páginas debe cargarse el widget. Haz clic en la sección de Activación y selecciona Todas las páginas. Esto garantiza que el widget aparezca en todo tu sitio web.
Si solo deseas que el widget aparezca en ciertas páginas, puedes crear un activador personalizado en su lugar — por ejemplo, para mostrarlo solo en tu página de contacto o precios.
Una vez configurado como desees, puedes presionar Guardar.
Paso 6: Previsualizar y verificar
Antes de publicar, es recomendable verificar que el widget se carga correctamente. Haz clic en Vista previa en la esquina superior derecha de GTM.
Luego, simplemente pega la URL donde estás añadiendo el Web Widget. Esto abrirá una sesión de depuración en tu navegador, donde podrás visitar tu sitio web y confirmar que el widget de Superchat aparece como se espera. También verás en el panel de depuración de GTM si la etiqueta se activó correctamente.
Paso 7: Publicar tus cambios
Una vez que estés seguro de que el widget se carga correctamente, vuelve a GTM y haz clic en Enviar en la esquina superior derecha.
Si se te solicita, añade un nombre para la versión (por ejemplo, "Añadir widget de Superchat") y luego haz clic en Publicar. Tu widget ya estará activo en tu sitio web.
Solución de problemas
Solución de problemas
El widget no aparece en mi sitio web
Verifica que hayas publicado tu contenedor de GTM después de guardar la etiqueta — los cambios en GTM no se activan hasta que hagas clic en Enviar y Publicar. También confirma que el activador esté configurado en Todas las páginas y que la clave de aplicación en el script coincida con la de la configuración de tu widget en Superchat.
La etiqueta no se activa en el modo Vista previa de GTM
Asegúrate de que el activador esté configurado correctamente y de que estás visitando una página que cumpla con las condiciones del activador. Si estás utilizando un activador personalizado, verifica que las reglas estén configuradas como deseas.
No estoy seguro de haber copiado la clave de aplicación correcta
Regresa a Configuración → Web Widget en Superchat, abre el widget que creaste y copia el script completo nuevamente. La clave de aplicación es todo lo que aparece después de applicationKey= y antes de la comilla de cierre.