Como Integrar Microsoft Clarity em um Blog Hugo com Análise de Usuário e Mapas de Calor

5 minute
1062 palavras
Categorias:
Technology Blog Setup
Tags:
#Hugo #Microsoft Clarity #Website Analytics #SEO #Static Websites

Introdução

O Microsoft Clarity é uma ferramenta gratuita de análise de sites que fornece mapas de calor do comportamento do usuário, gravações de sessão e dados detalhados de análise para ajudar webmasters a entender melhor o comportamento do usuário, otimizar o conteúdo do site e melhorar a experiência do usuário. Depois de configurar seu próprio site de blog, você pode querer rastrear o comportamento do usuário, e esta ferramenta pode ajudá-lo a analisar as ações do usuário. Para sites de blog estáticos construídos com Hugo, integrar o Clarity é simples e pode ser feito em apenas alguns passos.

Pré-requisitos

Antes de começar, você precisará de:

  1. Um site de blog Hugo configurado com sucesso. Você pode consultar artigos anteriores para ver os tutoriais correspondentes.
  2. Uma conta do Microsoft Clarity (pode ser registrada no site oficial do Clarity).
  3. Conhecimentos básicos de arquivos de configuração e temas do Hugo.

Passo 1: Obter o Código de Rastreamento do Clarity

  1. Cadastre-se e Crie um Projeto:

    • Visite o site oficial do Microsoft Clarity e faça login com sua conta Microsoft.

    • Crie um novo projeto, insira a URL do seu site de blog (por exemplo, https://heyjude.blog).

    • Depois de salvar o projeto, o Clarity gerará um snippet de código de rastreamento 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>
      Click to expand and view more

    • Copie o your_project_id (ID do projeto) deste código, pois você precisará dele mais tarde.

Passo 2: Adicionar o Código de Rastreamento do Clarity ao Blog Hugo

Como já construímos nosso próprio blog baseado em Hugo, sabemos que o Hugo é um gerador de sites estáticos e todo o conteúdo da página é gerado através de arquivos de modelo no diretório layouts. Precisamos incorporar o código de rastreamento do Clarity na tag <head> do site.

Método 1: Adicionar Com Base no Tema Usado

Geralmente, usamos temas prontos para criar nossos blogs, e alguns temas já podem incluir código do Clarity, exigindo apenas a substituição do nosso ID do projeto. Neste caso, o blogueiro usa o tema hugo-narrow, que inclui o código do Clarity, e apenas o ID do projeto precisa ser substituído na configuração.

YAML 
  analytics:
    enabled: true
    baidu:
      enabled: false
      id: "your-baidu-analytics-id"
    clarity:
      enabled: true
      id: "your_project_id"
Click to expand and view more

Isso completa a implantação.

Método 2: Editar Diretamente o head.html do Tema

  1. Localizar o Arquivo head.html no Tema:

    • Abra o diretório themes/your-theme/layouts/partials/ do projeto Hugo e encontre head.html ou um arquivo similar (o nome do arquivo pode variar com diferentes temas, como header.html).
    • Se o seu tema não tiver head.html, você pode verificar o arquivo layouts/_default/baseof.html.

  2. Adicionar o Código de Rastreamento do Clarity:

    • Cole o snippet de código de rastreamento fornecido pelo Clarity dentro da tag <head> do arquivo head.html. Por exemplo:

      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 }}
      Click to expand and view more

    • Nota: Usamos a declaração condicional {{ if not .Site.IsServer }} para evitar carregar o código do Clarity no modo de desenvolvimento local (hugo server) e evitar interferir com os dados de teste locais.

  3. Salvar e Testar:

    • Depois de salvar o arquivo, execute hugo server -D para visualizar o site localmente.
    • Implante o site em produção (por exemplo, GitHub Pages ou Vercel) e depois visite o painel do Clarity para confirmar se os dados estão sendo registrados.

Método 3: Adicionar Através do Arquivo de Configuração do Hugo

Se você preferir não modificar diretamente os arquivos do tema (por exemplo, para facilitar as atualizações do tema), você pode adicionar o código do Clarity através do arquivo de configuração do Hugo.

  1. Editar config.toml ou config.yaml:

    • Abra o arquivo config.toml (ou config.yaml) no diretório raiz do projeto Hugo.

    • Adicione o snippet de código de rastreamento do Clarity sob a seção [params]. Por exemplo, em 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>
    """
      Click to expand and view more

    • Se usar config.yaml, adicione:

      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>
      Click to expand and view more

  2. Modificar o Modelo do Tema para Incluir HTML Personalizado:

    • Em themes/your-theme/layouts/partials/head.html, adicione o seguinte código para referenciar o customHeadHTML do arquivo de configuração:

      HTML 
      {{ if .Site.Params.customHeadHTML }}
    {{ .Site.Params.customHeadHTML | safeHTML }}
{{ end }}
      Click to expand and view more

    • Isso garante que o código de rastreamento do Clarity seja carregado corretamente na tag <head>.

Passo 3: Verificar se o Clarity Está Funcionando Corretamente

  1. Implantar o Site:

    • Gere arquivos estáticos usando hugo e implante na sua plataforma de hospedagem (por exemplo, GitHub Pages, Vercel ou Netlify).
    • Certifique-se de que o código de rastreamento do Clarity esteja corretamente incorporado nos arquivos HTML gerados (você pode verificar a tag <head> usando as ferramentas de desenvolvedor do navegador).

  2. Verificar o Painel do Clarity:

    • Faça login no painel do Clarity e aguarde alguns minutos (geralmente 2 horas) para ver se há dados de visitas de usuários, mapas de calor ou gravações de sessão.
    • Se não houver dados, verifique:
      • Se o ID do projeto está correto.
      • Se o código de rastreamento está corretamente incorporado na tag <head>.
      • Se o site foi implantado no domínio público.

Passo 4: Otimização e Considerações

  1. Evitar Interferências no Desenvolvimento Local:

    • Como mencionado acima, use {{ if not .Site.IsServer }} para evitar interferências nos dados de rastreamento no modo de desenvolvimento local.

  2. Privacidade e Conformidade:

    • O Clarity coleta dados de comportamento do usuário, portanto, certifique-se de que a política de privacidade do seu site mencione o uso do Clarity para análise.
    • Se o seu blog for direcionado a usuários da UE, cumpra os requisitos do GDPR, que pode envolver adicionar um aviso de consentimento de cookies.

  3. Integração com o Google Analytics:

    • Os recursos de mapas de calor e gravações de sessão do Clarity complementam a análise de tráfego do Google Analytics. Você pode usar ambos para obter dados de análise abrangentes.

  4. Verificação Regular de Dados:

    • Revise periodicamente os mapas de calor e as gravações de sessão do painel do Clarity para analisar o comportamento de cliques do usuário e a profundidade de rolagem da página, otimizando assim o layout do conteúdo do blog.

Referências

Copyright Notice

Author: heyjude

Link: https://heyjude.blog/pt/posts/hugo_clarity_integration/

License: 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.

Artigos Relacionados

Ver mais artigos

Comments

Iniciar busca

Digite palavras-chave para buscar

↑↓
↵
ESC
⌘K Atalho