Monitorando as atividades dos seus usuários usando o Microsoft Clarity em aplicações React
Começarei esse post com uma frase do Satya Nadella:
Em um mundo onde o poder da computação é quase ilimitado, a atenção humana é realmente um commodity cada vez mais escassa.
Satya Nadella, CEO da Microsoft
Como disse o Satya Nadella, manter a atenção e o engajamento do usuário é uma commodity extremamente valiosa, e como fazer isso? Um dos principais pontos é entender qual é o comportamento do seu usuário!
Coletar dados de como o usuário está se comportando dentro da sua aplicação é uma ferramenta poderosa para decisões de experiência do usuário e marketing.
Ferramentas como a Hotjar que facilitam esse trabalho são caras. Então hoje venho trazer uma alternativa para esse problema!
A Microsoft, aquela pequena empresa que vale mais de US$ 2,45 trilhões de dólares, está engajada na criação de ferramentas Open-Source, para a nossa alegria!
E uma dessas ferramentas, criadas por eles disponível gratuitamente, é o Clarity:
O Clarity é uma ferramenta fácil de usar que captura como pessoas reais realmente usam seu site. A configuração é fácil e você começará a receber dados em minutos.
Quais ferramentas o Clarity oferece?
Mapas de calor (Heatmap)
Essa é uma ótima funcionalidade para entender qual parte da sua aplicação gera mais engajamento dos seus usuários no site.
Os mapas de calor mostram os locais de maior e menor interação do usuário com a página, em uma escala de cores. Quanto mais “quente” (vermelho), maior é o número de visitantes que interagem com aquela área do site.
Temos 3 tipos de interação:
Click — Mostra as áreas mais clicadas da página.
Scroll — Mostra até onde o usuário rolou a página.
Area — Mostrar o total de cliques em qualquer área que você escolher.
A partir desses dados, você pode tomar uma melhor decisão sobre onde posicionar um elemento importante do seu site e perceber áreas que estão sendo mais valorizadas ou ignoradas.
Leia mais sobre os Mapas de calor aqui:
https://clarity.microsoft.com/heatmaps
Gravações de sessão (Session Recordings)
Observar como os usuários navegam em seu site e quando você os perde é algo poderoso, ter esses dados de uma forma extremamente rápida se torna um verdadeiro aliado para as tomadas de decisões.
Leia mais sobre o Gravações de sessão aqui:
https://clarity.microsoft.com/session-recordings
Insights
O Clarity oferece um dashboard com insights importantes, com eles você consegue descobrir rapidamente onde os usuários se frustram e transforme esses problemas em oportunidades.
Leia mais sobre os Insights aqui:
https://clarity.microsoft.com/insights
Google Analytics
Você consegue conectar sua conta do Google Analytics e ter todos os seus dados em um só lugar!
Leia mais sobre o Google Analytics + Clarity aqui:
https://clarity.microsoft.com/google-analytics
Agora vamos ao que importa, como fazer a instalação na aplicação React
A configuração é extremamente simples:
1º Passo: Criar uma conta
O primeiro passo é criar uma conta acessando esse link:
https://clarity.microsoft.com/
2º Passo: Criar um projeto
Para criar um projeto, basta informar algumas informações como Nome e URL do site:
3º Passo: Fazer a instalação do Script
Para isso basta selecionar a opção Instalar manualmente (Install manually):
4º Passo: Copiar o código gerado
Copie o código JavaScript gerado:
5º Passo: Fazer a instalação na aplicação
Para fazer a instalação basta colar o código que copiamos no passo anterior no arquivo index.html, ou _document.tsx, caso esteja usando o NextJS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React + Clarity</title>
<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_clarity_id");
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Pronto, é isso!
Agora sua aplicação já está enviando dados para o Clarity, simples né?!
Coloquei o código de exemplo nesse repositório do GitHub, qualquer dúvida você pode consultar por lá!
⚠️ Ah, um ponto bem importante! Lembre-se de colocar um aviso na sua política de cookies avisando os usuários sobre a coleta dos dados!
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
