Cómo instalar un mapa de calor en tu sitio de WordPress (una línea de código, 3 minutos)

Resumen del artículo

Añadir un mapa de calor a WordPress solo requiere pegar una única línea de código

Hay tres formas de hacerlo: (1) el campo de configuración de cabecera de tu tema, (2) un plugin de inserción de código, o (3) editar header.php directamente

El éxito significa que el contador realmente aumenta para tu sitio en el panel de HeatMapX, no solo "sin errores"

¿Te preocupa que añadir un mapa de calor implique lidiar con código? En WordPress, realmente es solo una línea de código de etiqueta. Esta guía repasa tres formas de añadirlo, desde la opción más fácil para principiantes hasta un enfoque más avanzado.

Paso 1: Obtén tu clave de sitio

Primero, regístrate en HeatMapX (hay un plan gratuito disponible), registra tu sitio y obtén tu clave de sitio. No se requiere tarjeta de crédito.

Una vez que tengas tu clave de sitio, usa la etiqueta de abajo, reemplazando YOUR_SITE_KEY con la clave real que te dieron.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Pega esta etiqueta en el <head> de tu sitio usando uno de los tres métodos siguientes.

Método 1 (recomendado para principiantes): la configuración de cabecera de tu tema

Muchos temas populares, como Astra o GeneratePress, incluyen un campo de configuración —a menudo bajo "Advanced" o "Custom Scripts"— donde puedes insertar código directamente en la sección <head>.

En el panel de administración de WordPress, abre el personalizador o el panel de configuración de tu tema activo
Busca un campo etiquetado algo así como "Header Scripts", "Custom Code" o "Advanced"
Pega la etiqueta de arriba en ese campo y guarda

Como no necesitas tocar ningún archivo del tema, esta es la opción más segura si lo haces por primera vez.

Método 2: un plugin de inserción de código

Si tu tema no tiene un campo de cabecera, puedes usar un plugin como WPCode (anteriormente Insert Headers and Footers).

Desde la pantalla de Plugins, busca e instala un plugin de inserción de código como WPCode, y luego actívalo
Abre la configuración del plugin y busca el campo "Header"
Pega la etiqueta de arriba y guarda

La ventaja de este enfoque es que la etiqueta sobrevive a un cambio de tema. Es una buena opción si estás planeando rediseñar tu sitio más adelante.

Método 3 (avanzado): editar header.php en un tema hijo

Si te sientes cómodo editando código directamente, puedes añadir la etiqueta directamente en los archivos de tu tema.

Primero configura un tema hijo para tu tema activo (editar el tema principal directamente significa que tu cambio se borrará la próxima vez que el tema se actualice; se requiere un tema hijo)
Abre header.php en el tema hijo y pega la etiqueta justo antes de wp_head(), o justo antes de la etiqueta de cierre </head>
Guarda el archivo

Si editas el tema principal directamente, la próxima actualización del tema sobrescribirá tu cambio y la etiqueta desaparecerá. Si eliges este método, realiza siempre la edición a través de un tema hijo.

Cómo confirmar que realmente está funcionando

Una vez que hayas añadido la etiqueta, navega por algunas páginas de tu propio sitio. Pero aquí está la parte importante.

Que una página cargue sin errores no es lo mismo que confirmar que el seguimiento realmente funciona. Incluso si la consola de tu navegador no muestra nada incorrecto, una clave de sitio mal escrita puede significar que nunca llega ningún dato a HeatMapX.

La única comprobación fiable es abrir el panel de HeatMapX, encontrar tu sitio en la lista de sitios y confirmar que su contador realmente ha aumentado. Después de visitar algunas páginas, si el contador aumenta, tu instalación está funcionando.

Preguntas frecuentes

P. ¿Esto ralentizará mi sitio? R. La etiqueta se carga de forma asíncrona y es ligera, por lo que el impacto en la velocidad de carga de la página es mínimo.

P. Uso un plugin de caché, ¿hay algo a tener en cuenta? R. Si usas un plugin de caché como WP Super Cache o W3 Total Cache, asegúrate de borrar (purgar) la caché después de añadir la etiqueta. Si se sigue sirviendo una versión antigua en caché, la etiqueta recién añadida no tendrá efecto.

P. Añadí la etiqueta, pero el contador en el panel no aumenta R. La causa más común es una clave de sitio no coincidente: pegar la clave de un sitio diferente, o que se pierda un carácter al copiarla. Verifica la clave contra la que aparece en tu panel de HeatMapX.

Para terminar

Añadir un mapa de calor a WordPress se reduce a pegar una línea de código. HeatMapX es gratis para empezar, así que pruébalo y descubre cómo experimentan realmente tus visitantes tu sitio.