Implementação do Clarity

Owned by Diego Santos Nery
Last updated: May 14, 2024
2 min read

A implentação do Clarity é simples. Começa com a criação da conta no site da ferramenta https://clarity.microsoft.com/ .

Dentro da conta é clicar em Novo projeto.

 

image-20240514-205323.png

Para sites colocar o nome e a URL. Já para aplicativos móveis informar a plataforma, o nome e o pacote.

 

Clarity 1-20240514-155724.png

 

No caso do Clube, criamos um projeto de site. Dentro da página do projeto te dá a opção de instalar manualmente ou de acordo com a plataforma automaticamente.

 

Como o web clubduratex é um projeto em React, o caso foi fazer manualmente. Ao se clicar abre a página abaixo.

 

Foi feita a instalação o react-microsoft-clarity no 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');

O id-da-conta está nessa parte destacada do script gerado que podemos vê abaixo, só adicionar a linha de código acima e subir a aplicação.

 

Leva em torno de 2 horas para aparecer os dados da sua página.