Pular para o conteúdo principal

Microsoft Clarity

Clarity é a ferramenta gratuita da Microsoft pra session replay + heatmaps. Não envia eventos de conversão — só grava sessões anônimas pra análise de UX.

Configuração por brand​

{ clarityId: "abcd1234" }  // ← string ou null
BrandclarityId
Todas as brandsnull (não configurado)

Nenhuma brand tem Clarity ligado hoje — nenhum override seta clarityId, então todas herdam o null do base. A integração existe e funciona; só não está em uso.

Funcionamento​

Quando clarityId é setado:

  1. useAnalyticsBootstrap agenda initClarity(clarityId) via scheduleThirdPartyDeferred — a lane dos scripts não-críticos/observacionais, que roda em idle OU primeira interação OU timeout de segurança, o que vier primeiro. Fica fora do caminho crítico de FCP/LCP.
  2. Script Clarity é injetado no head.
  3. Clarity grava automaticamente toda interação (clicks, scrolls, navegação SPA, formulários — campos sensíveis são auto-mascarados).

:::note Não é scheduleThirdParty com priority: "low" Esta página descrevia o agendamento como scheduleThirdParty(..., { priority: "low" }). O priority hoje é mantido só por compatibilidade de call site e não afeta ordenação; a lane real do Clarity é a scheduleThirdPartyDeferred. Ver GTM → As três lanes de carregamento. :::

Session replay captura a sessão inteira independente de um atraso pequeno no start — é por isso que o Clarity pode ficar na lane deferred sem perda.

O que Clarity captura​

  • Session replay (vídeo de cada sessão)
  • Heatmaps de cliques e scroll
  • Rage clicks (cliques rápidos repetidos = frustração)
  • Dead clicks (clique que não faz nada)
  • Performance metrics
  • NÃO captura: input text de campos password, campos masked, dados financeiros

Como debuggar​

Clarity dashboard​

clarity.microsoft.com → escolhe o project → vê sessões em tempo real (latência ~30 min).

Console / Network​

window.clarity  // SDK Clarity global

Network → filtra clarity.ms.

Anti-patterns​

  1. Desativar Clarity em prod sem aviso. Usado por times de UX/produto pra investigação de bug. Aviso interno antes de desativar.
  2. Logar PII em campo não-mascarado. Verifique que campos sensíveis (CPF, telefone, endereço) tenham data-clarity-mask="true" ou estejam em <input type="password">.