DIGITAL SOP 049: Implementación y análisis de mapas de calor en su sitio web

Última actualización / revisión: 02/11/2024

Tiempo de ejecución: 30 minutos – 1 hora

Objetivo: Incorporar con éxito Heatmaps en tu estrategia de analítica.

Resultado ideal: Su empresa ahora está registrando, registrando y analizando correctamente sus mapas de calor.

Requisitos previos:

Para seguir completamente este SOP, necesitará configurar Google Tag Manager en su sitio web. Si no tiene configurado Google Tag Manager en su sitio web, deberá seguir el procedimiento cubierto en SOP 004 (versión web) para sitios de WordPress, SOP 065 (versión web) para sitios Shopify, o SOP 066 (versión web) para sitios de Squarespace.

Por qué es importante: El análisis de comportamiento en la página brinda a su equipo información visual adicional que no se recopila ni interpreta fácilmente con herramientas de análisis tradicionales como Google Analytics.

Dónde se hace: En Google Tag Manager, Hotjar y Google Spreadsheets.

Una vez hecho esto: Configurará un mapa de calor cada vez que desee obtener más información sobre el comportamiento de su usuario en una página o conjunto de páginas diferente.

Quién lo hace: El responsable de Analytics u Optimización de la Tasa de Conversión (CRO).

 

Recursos incluidos en este SOP

Hoja de referencia de diagnóstico de mapas de clics y mapas de desplazamiento

 Información sobre mapas de desplazamiento y mapas de clics

Evaluación de la necesidad de una herramienta Clickmap o Scrollmap

1. ¿Quiere analizar datos cuantitativos, analizar métricas específicas durante períodos de tiempo determinados o realizar un seguimiento de los principales eventos en su sitio web?
   1. En caso afirmativo, una herramienta como Google Analytics es más adecuada para su análisis. Aunque en algunos casos puedes obtener indicadores similares visualmente a través de un mapa de calor, normalmente este tipo de resultados.
      1. Si aún no tiene Google Analytics en su sitio web, puede configurarlo siguiendo el SOP 009 (versión web) para WordPress o SOP 067 (versión web) para Shopify.
      2. Si tiene Google Analytics pero no ha configurado los objetivos y eventos correctos para realizar un seguimiento de su negocio, puede hacerlo siguiendo el SOP 021 (versión web).

2. ¿Quiere analizar cómo interactúan sus usuarios dentro de una página o subconjunto de páginas específico?
   1. En caso afirmativo, en algunos casos es posible que puedas hacerlo con Google Analytics. Pero, sobre todo, los datos serán mucho más fáciles de analizar mirando visualmente los mapas de desplazamiento y los mapas de clics.

Decidir qué páginas grabar

1. Identifique las páginas principales de su sitio web y configure mapas de calor a nivel de página para ellas; esas son las páginas por las que pasarán la mayoría de los usuarios antes de realizar la acción que desea que realicen, por ejemplo:

• Página principal;
• Página de inicio de generación de leads;
• Página de precios;
• Página de ventas;
• Página de pago o pasos de pago;

2. Identifique páginas de apoyo que brinden pistas sobre lo que podría estar pasando por la mente de su usuario:

• Ejemplo:
  • Página de preguntas frecuentes: si utiliza elementos de estilo acordeón, le brindará información sobre qué preguntas son más comunes, lo que le permitirá mejorar el texto de su página de destino al ver visualmente en qué preguntas se hace clic con más frecuencia.
  • Página de selección de categorías: si tiene una página donde los usuarios hacen clic en categorías específicas de su sitio web, puede evaluar rápida y visualmente qué categorías son más populares entre ese conjunto de usuarios.
  • Portafolio: si utiliza un portafolio de una sola página, verifique si los usuarios están viendo sus mejores proyectos, identifique si están intentando hacer clic en alguno de ellos para identificar los más interesantes.
  • Página de funciones: identifique las funciones que más interesan a los usuarios.

3. Si está en el proceso de rediseñar una página específica o una plantilla:

• Cree un mapa de calor de la versión anterior;
• Cree un mapa de calor de la nueva versión;

4. Analice páginas de alto potencial con bajo rendimiento:

• Alto volumen/alta tasa de rebote: abra Google Analytics → En la barra lateral, haga clic en 'Comportamiento' → 'Contenido del sitio' → 'Todas las páginas' → Ordenar por 'Vistas de página únicas' → Identifique las páginas donde la tasa de rebote es inusualmente alta en comparación con la otros.

Crear y configurar una cuenta con Hotjar

1. Haga clic en aquí y registra tu correo electrónico.
2. Ingrese sus datos, acepte los términos de servicio y haga clic en el botón "Comenzar". Si elige registrarse con su cuenta de Google, se le dirigirá directamente a la configuración de Hotjar.

3. Se le pedirá que ingrese sus datos personales.
4. Ingrese su 'Función', seleccione 'Sí' si desea utilizar esta cuenta para administrar clientes, o 'No' si es solo para su sitio web, el nombre de su organización y haga clic en 'Siguiente'.
5. La siguiente página le preguntará "¿Dónde desea instalar Hotjar?" Ingrese la URL de su sitio → Haga clic en el botón 'Continuar'.

6. Hotjar ahora detectará si tiene instalado Google Tag Manager.

7. En el siguiente paso, seleccione "Ver plataformas" y seleccione Google Tag Manager.

Instalación de Hotjar usando Google Tag Manager

1. Después de hacer clic en "Administrador de etiquetas de Google", Hotjar lo redirigirá a su cuenta de Google para que pueda acceder a su cuenta; verifique las tres y haga clic en "Continuar".

2. Conceda acceso a Hotjar a su cuenta de Google Tag Manager y haga clic en "Continuar".

3. Seleccione su cuenta GTM y su contenedor de etiquetas GTM en el menú desplegable, luego haga clic en el botón "Crear y publicar etiqueta".

4. Haga clic en el botón "Confirmar y crear".

5. El siguiente paso es verificar su instalación, simplemente haga clic en el botón. Este paso puede tardar más de 60 segundos.

6. Agregue su URL para verificar la instalación.

7. Puede haber algunos retrasos o resultados fallidos en la verificación, simplemente vuelva a intentarlo. Eventualmente, lo redireccionará al Panel de Hotjar, lo que significa que Google Tag Manager se ha integrado exitosamente con Hotjar.

Verifique la etiqueta Hotjar en Google Tag Manager

1. Ir a  http://tagmanager.google.com  e inicie sesión con los datos de su cuenta.
2. Seleccione el 'Nombre del contenedor' que está configurado en su sitio web.

3. Haga clic en 'Etiquetas' en la barra lateral izquierda de su espacio de trabajo.

4. En sus etiquetas más recientes, verá el 'Código de seguimiento AUTO Hotjar' que Hotjar agregó automáticamente en los pasos anteriores.
   

   

5. [Opcional] Es posible que desees cambiar el nombre de la etiqueta para que coincida con la convención de nomenclatura utilizada en tu cuenta GTM.
   1. Nota: Al crear nuevas etiquetas, se recomienda definir una convención de nomenclatura desde el principio, esto mantendrá su Administrador de etiquetas de Google perfectamente organizado y fácil de mantener durante muchos años.[Nombre abreviado de la herramienta]_[Usar para esta etiqueta] es un buen comienzo.
      1. por ejemplo: “HJ_TrackingCode”

Configurar y ver mapas de calor

1. Una vez que haya agregado su código de seguimiento de Hotjar. Hotjar registrará automáticamente las sesiones de los usuarios y los mapas de calor en su sitio. Esto se conoce como seguimiento continuo. Ya no es necesario configurar mapas de calor para una página individual.
2. Para ver mapas de calor existentes en su sitio. Haga clic en el icono 'Mapas de calor' en la barra lateral.

3. Lo dirigirá a la página del panel de Heatmap. Haga clic en "Nuevo mapa de calor".

4. Ingrese la URL de su página para ver el mapa de calor.

Nota: Solo podrás ver mapas de calor en páginas donde esté instalado el código de seguimiento de Hotjar. Es posible que el mapa de calor no esté disponible hasta 24 horas después de la instalación, ya que recopilan sesiones de usuario y generan un mapa de calor para su sitio.

5. Entonces deberías poder ver el mapa de calor generado en tu página.

6. Luego tiene la opción de establecer diferentes reglas de página para ver diferentes mapas de calor en su sitio.

Excluir el tráfico interno de sus mapas de calor

1. Si tiene una dirección IP estática, ya está conectado a la red que desea excluir de sus mapas de calor (por ejemplo, la red de su oficina) y no está utilizando una VPN, vaya a "Excluir una dirección IP de una red".

2. Si no está seguro de alguno de estos: vaya a "Excluir una dirección IP de una red"

Excluyendo su dirección IP actual:

1. En su navegador vaya a  https://insights.hotjar.com/settings/ip
2. Desplácese hacia abajo hasta "Bloqueo de IP" y haga clic en "Bloquear su IP actual".

Luego, "Guardar cambios".

Excluyendo una dirección IP de una red:

1. Identifique las direcciones IP que desea excluir:

1. Opción 1: Pregunta al responsable de la red de tu oficina o a tu ISP (Proveedor de Servicios de Internet):
   1. ¿La dirección IP de nuestra red es estática? Si su dirección IP no es estática, excluirla de sus Heatmaps no será una solución a largo plazo.
   2. ¿Cuál es nuestra dirección IP externa? Esta es la dirección IP que necesita. Toma nota de ello.

2. Opción 2: Compruébelo usted mismo (o envíe estas instrucciones a alguien cuya red desee excluir, como la red doméstica de un empleado si trabaja de forma remota):

Nota: asegúrese de no estar utilizando una VPN. Si no está seguro, ignórelo y pregúntele al responsable de TI de su organización. Si está utilizando su computadora personal (o conoce completamente el software de su computadora) y no ha instalado ningún software VPN, continúe con este método.

1. Conéctese a su red local. (Por lo general, sólo necesitas estar conectado al Wi-Fi de la red que deseas excluir)
2. Ir a  http://beta.speedtest.net/
3. Ubique su dirección IP en la página:

4. Llame a su ISP y pregúntele si la dirección IP de su red es estática.
   1. Nota: Si desea excluir su dirección IP local, la dirección IP de su oficina debe ser estática.

2. En su navegador vaya a  https://insights.hotjar.com/settings/ip
3. Ingrese un nombre interno para esa dirección IP
   1. Ejemplo: “La casa de Tommy”

4. Haga clic en "Guardar cambios".

5. ¡Eso es todo! Ahora repita este procedimiento para todas las redes que usted o sus empleados puedan utilizar para acceder a su sitio web.

Ejemplo: la red de su oficina, su red doméstica, las redes domésticas de sus empleados, etc.

Analiza tus grabaciones

1. Inicie sesión en su panel.
2. En la barra lateral, haga clic en "Grabaciones".

3. Abra el  Hoja de referencia de diagnóstico de mapas de clics y mapas de desplazamiento  .
4. Revise cada uno de los 'Indicadores' e identifique cuáles se aplican a su mapa de calor.
5. Registre los resultados de sus grabaciones siguiendo los pasos del siguiente capítulo.

Registra los resultados de tus grabaciones.

Importante: asegúrese de que no se hayan realizado cambios en las páginas que recopilan datos entre las fechas de "Inicio" y "Fin" de sus mapas de calor.

1. Ejemplo: si tu página de inicio tiene varias CTA y las cambias con frecuencia todos los días. Si los datos de los mapas de calor y los mapas de desplazamiento se recopilan durante todo un mes, sus datos no serán significativos ya que la página de destino cambió varias veces mientras se recopilaban los mapas de clics.

1. Abra el  Hoja de cálculo de información sobre mapas de desplazamiento y mapas de clics  .
2. Complete cada celda:
   1. Fecha de inicio: la fecha en que comenzó a recopilar datos.
   2. Fecha de finalización: la fecha en que su mapa de calor dejó de recopilar datos (ya sea porque lo detuvo o porque alcanzó la cantidad de páginas vistas configuradas).
   3. Segmento: si solo está registrando un segmento específico de su tráfico (por ejemplo, solo está recopilando datos sobre el tráfico de Facebook), ingréselo aquí.
   4. Página analizada: la URL de la página o grupo de páginas que se están registrando.
   5. Nivel: seleccione 'Página' si está grabando una sola página específica. Seleccione 'Plantilla' si no está evaluando el contenido de una página específica sino una plantilla.
   6. Razones para grabar: Si hubo una razón específica por la que sentiste que debías analizar esa página, ingrésala aquí. Normalmente, debería tener una razón para ello. Por ejemplo: es posible que necesites colocar otro botón de CTA en la parte central de la página si observas que los usuarios a menudo no se desplazan hacia abajo en la parte inferior de tu página de destino.
   7. Página original: guarde una captura de pantalla de su página original y cargue esa imagen en un servicio de almacenamiento en la nube como Google Drive para obtener un enlace para compartir.
      1. Si no tienes ninguna forma de crear esa captura de pantalla y estás usando Google Chrome, 'Impresionante captura de pantalla' es una buena herramienta que ofrece esa función de forma gratuita.
         8. Mapa de desplazamiento y mapa de clics:
            1. Inicie sesión en su  panel  .
            2. En la barra lateral, haga clic en "Grabaciones"

3. Seleccione sus grabaciones y haga clic en “Exportar”.

4. Guarde los archivos. Cargue esas imágenes en un servicio de almacenamiento en la nube como Google Drive y obtenga un enlace para compartir. (Fuera del alcance de este SOP)

9. Comentarios sobre los resultados: aquí es donde debe resumir sus hallazgos basándose en la  Hoja de referencia de diagnóstico de mapas de clics y mapas de desplazamiento  .
   1. Por ejemplo: 'Posibles elementos engañosos en los que se puede hacer clic. Los usuarios hacen clic en las imágenes en lugar del botón CTA.

10. Hipótesis: aquí es donde se le ocurre una posible razón para los hallazgos que acaba de registrar.
    1. Por ejemplo: "Los bordes de nuestras imágenes hacen que parezcan elementos en los que se puede hacer clic".

11. Siguiente paso: según su hipótesis, ingresa una posible solución para ese problema:
    1. Por ejemplo: "Deberíamos intentar eliminar los bordes de la imagen y resaltar mejor nuestra CTA".

¡Eso es todo! Ahora está listo para implementar cualquier cambio en las páginas y registrar y registrar su tráfico una vez más, hasta lograr el comportamiento deseado por parte de sus usuarios.