Cómo Integrar Microsoft Clarity en un Blog Hugo con Análisis de Usuario y Mapas de Calor

6 minuto
1110 palabras
Categorías:
Technology Blog Setup
Etiquetas:
#Hugo #Microsoft Clarity #Website Analytics #SEO #Static Websites

Introducción

Microsoft Clarity es una herramienta gratuita de análisis de sitios web que proporciona mapas de calor del comportamiento del usuario, grabaciones de sesión y datos detallados de análisis para ayudar a los webmasters a comprender mejor el comportamiento del usuario, optimizar el contenido del sitio web y mejorar la experiencia del usuario. Después de configurar tu propio sitio web de blog, es posible que desees rastrear el comportamiento del usuario, y esta herramienta puede ayudarte a analizar las acciones del usuario. Para sitios web de blog estáticos construidos con Hugo, integrar Clarity es sencillo y se puede hacer en solo unos pocos pasos.

Requisitos Previos

Antes de comenzar, necesitarás:

  1. Un sitio web de blog Hugo configurado exitosamente. Puedes consultar artículos anteriores para ver los tutoriales correspondientes.
  2. Una cuenta de Microsoft Clarity (se puede registrar en el sitio web oficial de Clarity).
  3. Conocimientos básicos de archivos de configuración y temas de Hugo.

Paso 1: Obtener el Código de Seguimiento de Clarity

  1. Regístrate y Crea un Proyecto:

    • Visita el sitio web oficial de Microsoft Clarity e inicia sesión con tu cuenta de Microsoft.

    • Crea un nuevo proyecto, ingresa la URL de tu sitio web de blog (por ejemplo, https://heyjude.blog).

    • Después de guardar el proyecto, Clarity generará un fragmento de código de seguimiento como este:

      HTML 
      <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "your_project_id");
</script>
      Haz clic para expandir y ver más

    • Copia el your_project_id (ID del proyecto) de este código, ya que lo necesitarás más adelante.

Paso 2: Agregar el Código de Seguimiento de Clarity al Blog de Hugo

Dado que ya hemos construido nuestro propio blog basado en Hugo, sabemos que Hugo es un generador de sitios estáticos y todo el contenido de la página se genera a través de archivos de plantilla en el directorio layouts. Necesitamos incrustar el código de seguimiento de Clarity en la etiqueta <head> del sitio web.

Método 1: Agregar Basado en el Tema Utilizado

Por lo general, usamos temas preexistentes para crear nuestros blogs, y algunos temas ya pueden incluir código de Clarity, requiriendo solo el reemplazo de nuestro ID del proyecto. En este caso, el bloguero utiliza el tema hugo-narrow, que incluye el código de Clarity, y solo se necesita reemplazar el ID del proyecto en la configuración.

YAML 
  analytics:
    enabled: true
    baidu:
      enabled: false
      id: "your-baidu-analytics-id"
    clarity:
      enabled: true
      id: "your_project_id"
Haz clic para expandir y ver más

Esto completa el despliegue.

Método 2: Editar Directamente el head.html del Tema

  1. Localizar el Archivo head.html en el Tema:

    • Abre el directorio themes/your-theme/layouts/partials/ del proyecto de Hugo y busca head.html o un archivo similar (el nombre del archivo puede variar con diferentes temas, como header.html).
    • Si tu tema no tiene head.html, puedes verificar el archivo layouts/_default/baseof.html.

  2. Agregar el Código de Seguimiento de Clarity:

    • Pega el fragmento de código de seguimiento proporcionado por Clarity dentro de la etiqueta <head> del archivo head.html. Por ejemplo:

      HTML 
      {{ if not .Site.IsServer }}
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "your_project_id");
</script>
{{ end }}
      Haz clic para expandir y ver más

    • Nota: Usamos la declaración condicional {{ if not .Site.IsServer }} para evitar cargar el código de Clarity en el modo de desarrollo local (hugo server) y así evitar interferir con los datos de prueba locales.

  3. Guardar y Probar:

    • Después de guardar el archivo, ejecuta hugo server -D para previsualizar el sitio web localmente.
    • Despliega el sitio web en producción (por ejemplo, GitHub Pages o Vercel) y luego visita el panel de Clarity para confirmar si los datos se están registrando.

Método 3: Agregar a través del Archivo de Configuración de Hugo

Si prefieres no modificar directamente los archivos del tema (por ejemplo, para facilitar las actualizaciones del tema), puedes agregar el código de Clarity a través del archivo de configuración de Hugo.

  1. Editar config.toml o config.yaml:

    • Abre el archivo config.toml (o config.yaml) en el directorio raíz del proyecto de Hugo.

    • Agrega el fragmento de código de seguimiento de Clarity bajo la sección [params]. Por ejemplo, en config.toml:

      TOML 
      [params]
    customHeadHTML = """
    <script type='text/javascript'>
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src='https://www.clarity.ms/tag/'+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, 'clarity', 'script', 'your_project_id');
    </script>
    """
      Haz clic para expandir y ver más

    • Si usas config.yaml, agrega:

      YAML 
      params:
  customHeadHTML: |
    <script type='text/javascript'>
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src='https://www.clarity.ms/tag/'+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, 'clarity', 'script', 'your_project_id');
    </script>
      Haz clic para expandir y ver más

  2. Modificar la Plantilla del Tema para Incluir HTML Personalizado:

    • En themes/your-theme/layouts/partials/head.html, agrega el siguiente código para hacer referencia al customHeadHTML del archivo de configuración:

      HTML 
      {{ if .Site.Params.customHeadHTML }}
    {{ .Site.Params.customHeadHTML | safeHTML }}
{{ end }}
      Haz clic para expandir y ver más

    • Esto asegura que el código de seguimiento de Clarity se cargue correctamente en la etiqueta <head>.

Paso 3: Verificar que Clarity Funcione Correctamente

  1. Desplegar el Sitio Web:

    • Genera archivos estáticos usando hugo y despliégalo en tu plataforma de hosting (por ejemplo, GitHub Pages, Vercel o Netlify).
    • Asegúrate de que el código de seguimiento de Clarity esté correctamente incrustado en los archivos HTML generados (puedes verificar la etiqueta <head> usando las herramientas de desarrollo del navegador).

  2. Verificar el Panel de Clarity:

    • Inicia sesión en el panel de Clarity y espera unos pocos minutos (generalmente 2 horas) para ver si hay datos de visitas de usuarios, mapas de calor o grabaciones de sesión.
    • Si no hay datos, verifica:
      • Si el ID del proyecto es correcto.
      • Si el código de seguimiento está correctamente incrustado en la etiqueta <head>.
      • Si el sitio web ha sido desplegado en el dominio público.

Paso 4: Optimización y Consideraciones

  1. Evitar Interferencias en el Desarrollo Local:

    • Como se mencionó anteriormente, usa {{ if not .Site.IsServer }} para evitar interferencias en los datos de seguimiento en el modo de desarrollo local.

  2. Privacidad y Cumplimiento:

    • Clarity recopila datos del comportamiento del usuario, por lo que debes asegurarte de que la política de privacidad de tu sitio web mencione el uso de Clarity para análisis.
    • Si tu blog está dirigido a usuarios de la UE, cumple con los requisitos de GDPR, lo que puede implicar agregar un mensaje de consentimiento de cookies.

  3. Integración con Google Analytics:

    • Las funciones de mapas de calor y grabaciones de sesión de Clarity complementan el análisis de tráfico de Google Analytics. Puedes usar ambos para obtener datos de análisis completos.

  4. Revisión Regular de Datos:

    • Revisa periódicamente los mapas de calor y las grabaciones de sesión del panel de Clarity para analizar el comportamiento de clics del usuario y la profundidad de desplazamiento de la página, optimizando así el diseño del contenido del blog.

Referencias

Aviso de derechos de autor

Autor: heyjude

Enlace: https://heyjude.blog/es/posts/hugo_clarity_integration/

Licencia: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

Artículos relacionados

Ver más artículos

Comentarios

Comenzar búsqueda

Ingrese palabras clave para buscar artículos

↑↓
↵
ESC
⌘K Atajo