Popups, tours y checklists con Google Tag Manager
Si tu web ya tiene Google Tag Manager, alguien de marketing puede añadir popups, tours de producto y checklists sin ningún release: instala Clew una vez como etiqueta Custom HTML y crea todo en el editor de Clew.
- Tiempo
- ● 10 minutos
- Quién lo hace
- Quien pueda publicar en tu contenedor de GTM
- Pasos
- 8
Paso a paso
- Paso 01
Copia tu código de Clew
Regístrate o inicia sesión en Clew y abre Admin → Resumen. Mientras el widget no se conecte, verás la tarjeta “El widget aún no ha dado señales.” con tu línea personal: haz clic para copiarla. Se parece al código de abajo, pero con tu clave real.
<!-- Clew: sustituye PEGA_AQUI_TU_CLAVE por la clave del sitio de Admin > Resumen --> <script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>
Paso 1 · ilustración esquemática - Paso 02
Abre tu contenedor y crea una etiqueta
Entra en tagmanager.google.com, abre el contenedor instalado en tu sitio y haz clic en Tags → New (en la interfaz en español: Etiquetas → Nueva). Revisa el nombre del contenedor: muchos equipos tienen uno para pruebas y otro para producción.
Paso 2 · ilustración esquemática - Paso 03
Elige el tipo Custom HTML
Pon nombre a la etiqueta arriba, por ejemplo
Clew widget. Haz clic en Tag Configuration y elige Custom HTML en el grupo Custom. En español aparece como HTML personalizado.
Paso 3 · ilustración esquemática - Paso 04
Pega la línea
Pega tu línea del paso 1 en el campo HTML. Deja sin marcar Support document.write: Clew no lo necesita.
Paso 4 · ilustración esquemática - Paso 05
Actívala en All Pages
Haz clic en Triggering, elige All Pages (tipo Page View) y pulsa Save. La etiqueta debe cargarse en todo el sitio: Clew decide en qué páginas y a quién mostrar cada tour.
Paso 5 · ilustración esquemática - Paso 06
Compruébalo en la vista previa
Haz clic en Preview (Vista previa), escribe la URL de tu sitio y conecta. En Tag Assistant,
Clew widgetdebe aparecer en Tags Fired. Si está en Tags Not Fired, revisa el activador.
Paso 6 · ilustración esquemática - Paso 07
Envía y publica
De vuelta en el espacio de trabajo, pulsa Submit (Enviar), ponle nombre a la versión, por ejemplo
Añadir widget de Clew, y pulsa Publish (Publicar). Hasta que publiques, nada cambia en el sitio real.
Paso 7 · ilustración esquemática - Paso 08
Comprueba que funciona
Abre cualquier página de tu sitio en una ventana normal y vuelve a Admin → Resumen en Clew. En menos de un minuto la tarjeta se pone verde: “El widget está activo.” Ya puedes crear tu primer tour directamente sobre tu sitio.
Paso 8 · ilustración esquemática
Qué conviene saber de GTM
Modo de consentimiento
Si el contenedor usa Consent Mode, abre en la etiqueta Advanced Settings → Consent Settings y configúralo como exija tu política de privacidad. Una etiqueta que espera consentimiento solo se dispara cuando el visitante acepta.
Varios sitios en un contenedor
Cada sitio de Clew tiene su propia clave. Si un contenedor sirve a varios dominios, crea una etiqueta por sitio y usa, en lugar de All Pages, un activador Page View con la condición Page Hostname equals tu dominio.
¿Aún no tienes GTM?
Instalar GTM implica añadir su código a todas las páginas: el mismo esfuerzo que añadir Clew directamente. Usa mejor la guía para constructores de sitios o la guía para asistentes de IA.
Problemas frecuentes y preguntas
¿Custom HTML o una plantilla de la galería?
Custom HTML. Ejecuta la línea oficial tal y como la da Clew y no habrá nada que actualizar más adelante.
¿Cambia algo en Clew si se instala con GTM?
No. El widget carga un instante después del propio contenedor y luego funciona igual que con la instalación directa: segmentación, analítica y editor visual incluidos.
El panel sigue diciendo “El widget aún no ha dado señales.”
Abre una página del sitio publicado en una ventana normal del navegador y recarga el panel al cabo de un minuto. Si no cambia: comprueba que el cambio está publicado y no solo guardado; que sustituiste el marcador por tu clave real; y en las herramientas de desarrollo del navegador, pestaña Network, busca widget/…js: debe responder 200. Un 404 significa que la clave es incorrecta.
Mi sitio tiene Content Security Policy
Dos directivas y nada más: script-src https://tryclew.io y connect-src https://tryclew.io. El widget no usa eval, ni URL blob:, ni workers, y añade su hoja de estilos por CSSOM en vez de como marcado, así que style-src 'unsafe-inline' no hace falta en Chrome, Edge, Firefox 101+ ni Safari 16.4+. Los navegadores más antiguos reciben un elemento <style> de reserva: si aún los admites y tu style-src no lleva 'unsafe-inline', allí los tours se verán sin estilos. Para copiar y pegar: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
¿Puedo fijar la versión del widget y usar <code>integrity=</code>?
Sí. La línea de las guías — /widget/PEGA_AQUI_TU_CLAVE.js — es la continua: siempre sirve el widget actual, y por eso no puede llevar un hash de Subresource Integrity (los bytes cambian). Junto a ella, cada versión se sirve también en una dirección inmutable con hash del contenido. Consulta https://tryclew.io/api/v1/widget-version?site=TU_CLAVE y recibirás version, path e integrity; ponlos en la etiqueta: <script src="https://tryclew.io/widget/v/<version>/TU_CLAVE.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Una URL fijada no cambia nunca, así que el navegador rechaza el archivo si difiere un solo byte. Actualizas la versión cuando quieras: consulta el mismo endpoint en tu script de despliegue. Nada más cambia: los tours se siguen publicando desde el editor de Clew sin tocar el sitio.
¿Un bloqueador de anuncios se come el widget?
No. Nuestro dominio no está en ninguna de las listas grandes —EasyList, EasyPrivacy, AdGuard, uBlock Origin—, así que los tours, los tooltips y las checklists aparecen también para quien usa un bloqueador. Lo delicado son las estadísticas: EasyPrivacy bloquea toda petición ping de terceros, por eso el widget envía sus eventos como una petición normal, que esas listas sí dejan pasar. Para quedar fuera del alcance de cualquier lista personalizada, sirve el widget desde tu propio dominio: apunta https://tu-sitio/clew/* a https://tryclew.io/* en tu CDN o nginx y cambia la línea por <script src="/clew/widget/TU_CLAVE.js" async></script>. El widget consultará la API con el mismo prefijo y todo será de primera parte.
¿Funciona en aplicaciones de una sola página (React, Vue, Next.js)?
Sí. Carga la línea una vez, en el HTML raíz o el layout raíz. El widget detecta por sí mismo los cambios de ruta en el cliente (History API y cambios de hash), así que no lo añadas por ruta ni lo dispares con un activador “History Change”: una segunda copia se ignora, pero es trabajo inútil.
¿Y el banner de consentimiento de cookies?
Clew guarda una cookie propia y entradas en localStorage para recordar qué tours completó cada visitante y contar las finalizaciones. No envía datos a redes publicitarias. Si puede ejecutarse antes del consentimiento lo decide tu política de privacidad; si tu herramienta de consentimiento lo bloquea hasta que el visitante acepta, los tours simplemente empiezan después.
Uso un plugin de caché u optimización
Vacía la caché después de instalar; si no, los visitantes seguirán recibiendo páginas antiguas sin la línea. Si el plugin retrasa, combina o difiere JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), excluye tryclew.io/widget de esas optimizaciones.
¿Hará más lento mi sitio?
No. La línea lleva async: el navegador descarga el widget en paralelo y lo ejecuta sin bloquear la página. El widget no tiene dependencias.
¿Puede mi app avisar a Clew de que un paso del onboarding está hecho?
Sí, y es una sola línea. Una tarea del checklist puede llevar una regla que la marque sin que el visitante haga clic: una página a la que llega, un clic en un elemento que indiques con un selector CSS, o un evento que dispare tu propio código — Clew.complete('invited'), donde invited es la clave que escribiste junto a la tarea en el editor. Llámalo en el momento en que la tarea está realmente hecha, por ejemplo cuando tu API confirma la invitación. Es seguro llamarlo en cualquier momento y devuelve false si no hay ningún checklist con esa clave en la página. El nombre antiguo TutorKit sigue funcionando.
Otras formas de instalar
Asistentes de IA para programar
Un prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 y Replit que coloca la línea en el archivo raíz correcto.
Abrir guía →Sin códigoConstructores web y CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda o HTML: dónde está el campo de código del head y qué pulsar.
Abrir guía →