Cómo instalar un mapa de calor con Google Tag Manager (sin tocar el código, en 5 minutos)

Resumen rápido

Con GTM puedes instalar un mapa de calor sin tocar el código de tu sitio en absoluto

Cinco pasos: crear una etiqueta HTML personalizada → añadir un activador All Pages → publicar

El éxito se mide porque los números se mueven en tu panel de HeatMapX, no solo con "no hay errores"

Si tu sitio ya gestiona etiquetas a través de Google Tag Manager (GTM), esta es la forma más limpia de añadir el seguimiento de mapas de calor: todo ocurre dentro de la interfaz de GTM, sin cambios de código. Esta guía lo explica paso a paso.

Antes de empezar: obtén tu clave de sitio

Regístrate en HeatMapX (hay un plan gratuito, sin tarjeta de crédito), registra tu sitio y obtendrás una clave de sitio.

Una vez que la tengas, usarás una etiqueta con esta forma; sustituye YOUR-SITE-KEY por tu clave real:

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

Importante: pega la etiqueta completa, no solo la URL. El atributo data-site-key="..." le indica a HeatMapX a qué sitio pertenecen los datos; si lo eliminas, o pegas solo la URL de src, no se registrará nada.

La configuración en GTM (5 pasos)

Abre la consola de GTM (tagmanager.google.com) y selecciona el contenedor (workspace) de tu sitio
Ve a "Etiquetas" → "Nueva" en el menú de la izquierda y elige "HTML personalizado" como tipo de etiqueta
Pega la etiqueta completa de arriba en el campo HTML
En el activador, elige "All Pages (Vista de página)", dale a la etiqueta un nombre reconocible (por ejemplo, HeatMapX) y guarda
Pulsa "Enviar / Publicar" en la esquina superior derecha para poner el cambio en producción

Y listo: el seguimiento ya funciona en todas las páginas de tu sitio.

¿Quieres comprobarlo antes de publicar? (Modo Vista previa)

Haz clic en "Vista previa" en GTM para probar la etiqueta en tu propio navegador antes de publicar. Abre tu sitio a través de la pantalla de vista previa (Tag Assistant); si tu etiqueta de HeatMapX aparece en "Fired", está funcionando.

Si la etiqueta no se dispara — checklist

¿Pulsaste Publicar? Guardar por sí solo no pone los cambios en producción. Esta es la causa más habitual
¿El activador es All Pages? Un activador limitado a una página concreta significa que las demás páginas no se rastrearán
¿Un banner de consentimiento de cookies (modo de consentimiento) lo está bloqueando? Con algunas herramientas de gestión del consentimiento, las etiquetas HTML personalizadas se retienen hasta que el visitante da su consentimiento. Revisa la configuración de consentimiento de la etiqueta y cómo la categoriza tu CMP
¿El data-site-key es correcto? Pegar la clave de otro sitio envía tus datos al sitio equivocado

Deja que Claude Code te guíe

Si prefieres no navegar por la interfaz de GTM tú mismo, puedes pedirle a un agente de IA como Claude Code que te guíe. Copia el prompt de abajo, sustituye tu propia clave de sitio y pégalo.

I want to deploy the HeatMapX heatmap tracking tag via Google Tag Manager.
Walk me through the GTM interface one step at a time, waiting for my reply at each step.

The tag to use (Custom HTML, All Pages trigger):
<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

Si no usas GTM y quieres la etiqueta directamente en el código de tu sitio, esta versión permite que Claude Code haga las ediciones de archivos por ti:

Install the HeatMapX heatmap tracking tag in this project.
Make sure the following tag is included right before </head> on every page, and tell me which files you changed.

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

HeatMapX está diseñado para que extraer y analizar tus datos también funcione desde Claude Code (integración CLI); consulta la página "CLI & Skills" de tu panel una vez que esté todo configurado.

Verifica que funciona: los números deben moverse

Después de instalarlo, navega por unas cuantas páginas de tu propio sitio y luego abre tu panel de HeatMapX. Si "Sesiones hoy" está subiendo para tu sitio, el seguimiento está activo.

La señal de éxito no es "sin errores": es que los números se mueven en el panel. Si nada se mueve, repasa la checklist anterior en orden.