Como configurar manualmente o Clarity com ReactJS

Há alguns textos atrás eu escrevi sobre essa nova ferramenta que veio aí para ser uma opção além do famoso Hotjar. Hoje venho com um texto um pouco mais técnico.

Se você ainda não sabe as vantagens do Clarity, dá uma olhadinha no outro texto: Motivos para usar o Clarity da Microsoft

Apesar da documentação do Clarity ser muito fácil de entender, principalmente para quem não coda muito ou precisa instalar em plataformas sem ajuda de um programador, senti falta de uma explicação melhor para quem precisa configurar em alguma outra linguagem, no meu caso, em Reactjs.

Por isso, resolvi trazer aqui como fiz isso para ajudar alguém aí que precise ;)

A primeira coisa que você precisa fazer é instalar o react-microsoft-clarity no seu projeto usando o seguinte comando:

npm install react-microsoft-clarity --save

Após a instalação, importe no arquivo App do seu projeto:

import { clarity } from 'react-microsoft-clarity';

Depois, adicione dentro da function App a seguinte linha de código:

clarity.init('id-da-conta');

Agora acesse o Clarity e vá em Setting > Configuração e escolha a opção Instalar Manualmente. Na próxima página teremos o script onde temos a informação que precisamos.

Na imagem abaixo está indicado qual é o id dentro desse script.

Esse script é o que o Clarity usa de exemplo ;)

Copie o id do seu script e cole dentro do comando. No caso do script do exemplo, o nosso código ficaria assim:

clarity.init('ckyi29i4x1');

Recomendo colocar um “if production” antes de chamar o comando do Clarity, para não pegar dados do seu ambiente de desenvolvimento. Para isso, sugiro usar variáveis de ambiente. Você pode ver como criar essas variáveis em Usando variáveis de ambiente com React.

Depois de criada sua variável de ambiente, nosso código final ficaria assim:

if (process.env.NODE_ENV === 'production') clarity.init('ckyi29i4x1');

Pronto, agora é só subir em produção. Em pouco tempo o Clarity já começa a coletar dados do seu site ou plataforma.

Caso tenham qualquer dúvida, sugestão ou feedback, deixe aí nos comentários ;)

→ Siga o nosso blog pelo Medium e fique por dentro de tudo o que acontece no Ateliê de Software.

Dê um alô pra gente! E nos acompanhe nas redes sociais:

→ E-mail: contato@atelie.software
→ Site
→ Facebook
→ Instagram
→ LinkedIn