Cómo añadir un tooltip a tu web con Google Tag Manager sin programador
Una pista contextual con Google Tag Manager: una frase junto al elemento donde dudan los visitantes, colocada con un clic en el editor visual y mostrada justo cuando ayuda.
- Tiempo
- ● 10 minutos
- Precio
- Plan Free
- Quién lo hace
- Quien pueda publicar en GTM
Ejemplo: un tooltip con Google Tag Manager
En la página de ajustes de un SaaS, la pestaña de claves API genera preguntas a soporte. El tooltip explica “Las claves se muestran una sola vez: guárdalas en tu gestor de contraseñas” cada vez que alguien hace clic en la pestaña con data-tour="api-keys".
Gratis en el plan Free de Clew, sin tarjeta y sin límite de tiempo: un sitio y hasta 3 tours o tooltips publicados. Las reglas de audiencia y los tests A/B llegan con Pro.
Cómo añadir el tooltip 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 tooltip 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
Pega el tooltip al elemento
En Clew abre Flujos → + Nuevo flujo, deja Tooltips paso a paso y pulsa Editar en tu sitio. En tu página pulsa Elegir elemento, haz clic en el campo o botón y escribe un título corto y una frase. Ajusta Posición si la posición automática tapa algo importante.
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 Formato Tooltips paso a paso Dónde mostrarlo (URL de la página) Sección por prefijo /settingsCuándo mostrarlo Al hacer clic en un elemento: [data-tour="api-keys"]Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia En cada visita 
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: tooltip 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.
El modo de consentimiento puede retrasarlo
Si el contenedor usa Consent Mode y la etiqueta espera al consentimiento, el tooltip aparece solo cuando el visitante acepta. Decídelo según tu política de privacidad.
Mejor id y atributos data
Si Elegir elemento propone una cadena larga de clases, elige el padre más cercano con id o pide un atributo data-tour: un selector estable mantiene la pista viva tras las actualizaciones del tema.
Preguntas y respuestas
¿Por qué cada vez?
Porque es ayuda, no un anuncio: con Al hacer clic en un elemento y En cada visita solo aparece cuando el usuario abre esa pestaña.
¿GTM retrasa el tooltip?
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.
¿El tooltip es gratis?
Sí, en el plan Free: hasta 3 tours y tooltips publicados en un sitio.
¿Puede abrirse solo al hacer clic?
Sí. Elige Al hacer clic en un elemento, indica el selector del icono o enlace que lo abre y pon En cada visita.
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 crear una guía interactiva de producto con Google Tag Manager sin programador
- Cómo añadir un aviso de paywall con Google Tag Manager sin programador