Cómo crear una guía interactiva de producto con Google Tag Manager sin programador
Una ayuda que enseña en vez de contar con Google Tag Manager: un checklist de temas prácticos, cada uno abre la página correcta y guía al usuario con tooltips.
- Tiempo
- ● 30 minutos
- Precio
- Prueba gratis de 14 días, sin tarjeta
- Quién lo hace
- Quien pueda publicar en GTM
Ejemplo: una guía interactiva con Google Tag Manager
Un SaaS de automatización de marketing recibe cada semana las mismas preguntas sobre integraciones. Un checklist “¿Cómo…?” se abre al pulsar el botón de ayuda (data-tour="help"); temas como “Conectar un CRM” abren /app/integrations?tutorial=connect-crm y el tour empieza ahí.
Este formato forma parte del plan Pro. Cada cuenta nueva empieza con una prueba gratis de 14 días con todos los formatos y reglas de audiencia, sin tarjeta. Al terminar no se borra nada y lo publicado se sigue mostrando; los tours y tooltips siguen gratis en el plan Free.
Cómo crear la guía interactiva con Google Tag Manager, paso a paso
- Paso 01
Copia tu snippet de Clew
Crea una cuenta gratis (o inicia sesión), añade tu sitio y abre Admin → Resumen. Haz clic en la línea de la tarjeta del widget para copiarla: ya lleva la clave real de tu sitio en lugar del marcador.
<!-- 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
Crea una etiqueta Custom HTML en GTM
En tagmanager.google.com abre tu contenedor, Tags → New → Tag Configuration → Custom HTML, y pega la línea de Clew. Llama a la etiqueta
Clew widget.
Paso 2 · ilustración esquemática - Paso 03
Actívala en All Pages
En Triggering elige All Pages y guarda. Cárgala en todas partes: en qué página aparece el guía interactiva de producto se decide en Clew, no en GTM.
Paso 3 · ilustración esquemática - Paso 04
Preview y después Submit y Publish
Comprueba en Preview que
Clew widgetestá en Tags Fired y luego Submit → Publish. Nada llega al sitio real antes de publicar.
Paso 4 · ilustración esquemática - Paso 05
Crea los tours y después el checklist de la guía
Primero crea un tour Tooltips paso a paso por tema con Editar en tu sitio y Elegir elemento, y apunta el Slug (se usa en los enlaces) de cada uno. Después crea un Checklist de onboarding: un punto por tema y, en URL del enlace, la dirección de la página más
?tutorial=y el slug del tour.
Paso 5 · ilustración esquemática - Paso 06
Elige dónde, cuándo y a quién se muestra
En el mismo editor, completa Dónde mostrarlo (URL de la página), Cuándo mostrarlo, Segmentación de audiencia y Frecuencia. Estos son los ajustes del ejemplo de arriba:
Ajuste Valor Checklist Formato Checklist de onboarding Dónde mostrarlo (URL de la página) Sección por prefijo /appCuándo mostrarlo Al hacer clic en un elemento: [data-tour="help"]Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia En cada visita Tour de producto Formato Tooltips paso a paso Dónde mostrarlo (URL de la página) Sección por prefijo /app/integrationsCuándo mostrarlo Al cargar la página Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia Una vez por visitante 
Paso 6 · ilustración esquemática - Paso 07
Publica y compruébalo en el sitio real
Pon Estado en Publicado y guarda. Abre la página en una ventana privada: Clew recuerda quién ya vio un elemento de “una vez”, así que tu navegador habitual puede saltárselo. Las vistas, finalizaciones y abandonos aparecen en las estadísticas.
Paso 7 · ilustración esquemática
Errores comunes: guía interactiva de producto con Google Tag Manager
No uses un activador History Change
El widget sigue solo la navegación de las apps de una página. Un segundo activador en History Change solo vuelve a cargar el script para nada.
Que no se pierdan los parámetros de la URL
Algunos sitios redirigen y eliminan los parámetros (por ejemplo, al forzar la barra final). Abre cada enlace de tema una vez: si ?tutorial= desaparece de la barra de direcciones, enlaza la URL final.
El botón de ayuda necesita un selector estable
Al hacer clic en un elemento escucha los clics en el selector que indiques. Usa un id o un atributo data-tour en el botón de ayuda, no una clase que un cambio de estilos pueda renombrar.
Preguntas y respuestas
¿Soporte puede enviar un enlace a un tour en el chat?
Sí: cualquier enlace con ?tutorial=<slug> a una página con el widget inicia ese tour.
¿GTM retrasa el guía interactiva de producto?
El widget carga un instante después del contenedor. Solo un elemento Al cargar la página en la primera vista de página podría aparecer una fracción de segundo más tarde que con una instalación directa.
¿Cuánto cuesta?
Los tours son gratis; el checklist de la guía forma parte de Pro. Cada cuenta nueva tiene una prueba de 14 días con ambos, sin tarjeta.
¿El mismo tour puede mostrarse solo a usuarios nuevos?
Sí. Un tour abierto con ?tutorial= ignora sus reglas, así que ese mismo tour puede tener su propia regla de URL y Una vez por visitante para los que llegan por primera vez.
Qué más puedes añadir con Google Tag Manager
- Cómo añadir un popup a tu web con Google Tag Manager sin programador
- Cómo crear un tour de producto con Google Tag Manager sin programador
- Cómo añadir un checklist de onboarding con Google Tag Manager sin programador
- Cómo configurar el onboarding de usuarios con Google Tag Manager sin programador
- Cómo añadir un tooltip a tu web con Google Tag Manager sin programador
- Cómo añadir un aviso de paywall con Google Tag Manager sin programador