O que é o Microsoft Clarity e como integrá-lo com o Google Analytics 4

No outro dia expliquei para você como “ver” a jornada completa de um usuário no GA4.

Coloco “ver” entre aspas porque, na verdade, o que você via era uma lista com todos os eventos e páginas que um usuário tinha visto no seu site. Mas você não visualizava a navegação em si, ou seja, uma gravação do que essa pessoa tinha feito.

Mas isso também se consegue, só que não com o GA4.

Há várias alternativas e, neste artigo, vou falar sobre uma das melhores: Microsoft Clarity.

Aqui explico tudo para você em vídeo:

E abaixo tem tudo em texto.

O que é o Microsoft Clarity?

É a ferramenta de análise do comportamento do usuário da Microsoft.

Isso significa que a ferramenta ajuda você a entender a interação do usuário com o seu site, por isso poderíamos dizer que ela é quase mais uma ferramenta de UX do que de analítica digital.

É muito boa, fácil de implementar e utilizar e, além disso, é gratuita.

Vá, tem tudo.

Dito isto, não substitui o GA4; é um complemento, porque oferece funcionalidades que o GA4 não tem.

Para que serve o MS Clarity

Sim, acabei de explicar o que é o Clarity e que funcionalidades tem, mas para que serve realmente?

Serve para ver e rever o que os usuários fizeram no seu site.

E você pode vê-lo de forma agregada, com os mapas de calor ou também um a um, com a gravação da sessão de cada usuário.

Funcionalidades

Como eu digo, a ferramenta tem as duas principais funcionalidades já referidas.

Vou explicar um pouco mais sobre cada uma.

Mapas de calor

São representações de uma página específica do site em que se mostram principalmente:

• Os elementos mais clicados pelos usuários.
• As partes da página que atraem mais atenção.
• O grau de scroll (até onde os usuários descem).

Acho que é evidente como isto é útil para coisas como os menus (que links recebem mais cliques), perceber se há elementos não clicáveis que o usuário pensa que são clicáveis ou o que desperta interesse (é uma imagem? Um copy? Um produto específico?).

A parte dos cliques em links pode ser medida no GA4 sem problema, mas para as outras duas você precisa de uma ferramenta como esta.

Para ver o mapa de calor você só precisa clicar no ícone da chama de qualquer um dos elementos:

Você também pode ir à seção correspondente do menu superior e filtrar por aí:

Gravação da sessão

O conceito é semelhante ao relatório Explorador de usuários do GA4 de que falei no outro dia, só que agora você vê a sessão em si, não uma lista de eventos:

Ao ver como o usuário interage com a sua página, você pode perceber diretamente se ele faz o que você quer / espera ou não.

E, se não fizer, tentar entender por quê. E alterar o seu site, se for o caso.

Cuidado com as gravações de sessões, porque viciam. Você começa a ver duas e, de repente, já está há meia hora vendo vídeos um atrás do outro, tipo TikTok.

Para ver as gravações tem as mesmas duas opções de antes:

• Clicar no ícone em forma de câmera de qualquer elemento dos gráficos.
• Ir à seção correspondente do menu.

Além disso, há uma coisa que pouquíssimas ferramentas permitem: visualizar em tempo real o que o usuário está fazendo no seu site neste momento:

À esquerda, a minha sessão atual no site. À direita, o que vou fazendo (com um atraso de cerca de um segundo)

Uma maravilha.

Sobretudo quando IT detecta algo estranho e você vai lá e mostra em tempo real XD.

Principais casos de uso

Bem, já sabe o que pode fazer, mas quando é recomendável usá-lo e com que objetivo?

Na minha opinião, há vários casos de uso bastante recomendáveis, que são estes.

Checkout

A joia da coroa.

Se você tem um ecommerce ou vende algum tipo de serviço que exige formulários mais ou menos longos (telecomunicações, bancos…) recomendo duas coisas:

1. Comece a ver as gravações desta página (incluindo usuários em dispositivos móveis e desktop). Analise os principais problemas que seus usuários enfrentam. Proponha melhorias.
2. Calcule taxas de conversão do checkout (usuários que compram / usuários que entram) com uma ferramenta como o GA4. Assim você pode verificar se as melhorias propostas são mesmo melhorias.

Opcionalmente, e de forma um pouco mais complexa, você pode enviar eventos de erro sempre que ocorrer um em um campo do checkout. Dessa forma, você poderá quantificar quais campos não ficam claros para seus usuários.

Landing pages principais / Páginas de venda

Estas páginas são importantes por vários motivos:

• As landing pages porque são o primeiro contato de um usuário com o seu site. Se não funcionarem e seus usuários saírem, todo o investimento publicitário será como jogar dinheiro fora.
• As páginas de venda porque são as que têm de convencer o usuário a pôr o cartão a passear. Ou pelo menos a se cadastrar.

Com isso, nos dois casos volto a sugerir duas coisas, ambas nesta ferramenta:

1. Observe as gravações dessas páginas. Assim como no checkout.
2. Veja os mapas de calor: os usuários clicam onde você espera? Prestam atenção onde você quer? Se não, por quê? O que você pode mudar?

Observe, analise, faça alterações e meça —bounce e taxas de conversão, por exemplo—.

Novas funcionalidades ou alterações importantes

Quando você implementa uma alteração importante no site, ou lança algo novo, não faz ideia de como vai funcionar.

Ainda menos se você não fez testes com usuários, que costuma ser o mais habitual.

Por isso, depois de alguns dias, o melhor que você pode fazer —além de comparar os resultados com os objetivos— é ver os mapas de calor e as gravações dos usuários dessa nova seção. Sobretudo se não estiver funcionando como você esperava.

Assim você poderá verificar coisas como:

• Se o tráfego está chegando ou não.
• Se chega tráfego, mas ele não faz o que você espera.
• Se o usuário lê e faz scroll.
• Possíveis erros.

Ou seja, você vai restringir os motivos pelos quais a coisa não está funcionando como esperava.

Com o Microsoft Clarity é muito simples fazer este tipo de análise.

Aliás, se você gosta do que está lendo, mas ainda não decidiu implementá-lo no seu site, saiba que pode experimentá-lo sem instalar aqui.

Páginas com erros

É possível que você já tenha algum tipo de medição de erros implementada no GA4. As mais comuns são erros de JavaScript ou eventos de erro em formulários.

Bem, o que tem de fazer é ver no GA4 em que páginas esses erros ocorrem e se acontecem com algum tipo específico de navegador / dispositivo.

Feito isto, o passo seguinte é tentar replicá-lo você mesmo.

Se você não conseguir, será preciso ver gravações de usuários com esse tipo de dispositivo ou navegador, para perceber o que fazem para o site falhar.

Depois de descoberto o erro, vem a parte fácil: corrigi-lo. XD

Menus

Embora você possa criar eventos para quantificar os cliques em cada elemento de um menu no GA4, é muito mais rápido usar um mapa de calor.

Assim, rapidamente, você vai perceber quais seções despertam mais interesse nos seus usuários.

Excelente em qualquer site e ideal para analisar os links para diferentes categorias num ecommerce.

Filtros em ecommerce

E, falando de ecommerce, não é tão comum rastrear o uso de filtros no GA4. Por isso, um mapa de calor, embora muitas vezes não mostre quais opções o usuário escolheu, indicará quais são os filtros mais usados.

Ótimo quando tem muitos filtros e quer dividi-los em dois níveis: os habituais —no primeiro nível— e os avançados —escondidos atrás de um clique num link—.

Vantagens do Microsoft Clarity

Você já sabe o que pode começar a medir com a ferramenta, o que ela pode oferecer e por que recomendo que comece quanto antes.

Mas, se ainda não convenci você, aqui está um resumo das vantagens que considero mais importantes:

• É muito fácil de instalar e usar. É potente. E é gratuito.
• Não afeta o desempenho do seu site.
• Oferece gravações de usuários e mapas de calor ilimitados.
• Não há limites de tráfego, pelo que serve para todo o tipo de projetos.
• Você pode adicioná-lo a projetos ilimitados.
• Não há amostragem de dados. Ou seja, a ferramenta mostra todas as gravações dos seus usuários e os mapas de calor se baseiam em dados não amostrados.
• Cumpre o GDPR e o CCPA.
• Não é necessário criar mapas para cada página que você queira rastrear. A ferramenta faz isso automaticamente.
• Você pode analisar duas versões da mesma página web comparando os dois mapas de calor lado a lado.
• Você pode aplicar filtros às gravações de sessões (países, páginas…). Assim você consegue restringir o que quer ver.
• Você também pode integrar o Microsoft Clarity com o GA4. Fazendo isso, você pode ver os dados do GA4 no Clarity. Agora explico como.
• Por último, e apesar de a usar menos do que devia, fica a saber que pode fazer perguntas sobre os dados do Clarity à IA da Microsoft, que tentará responder e tirar conclusões corretas. Assim não tem de ver todas as sessões, o que considero ao mesmo tempo bom (poupa tempo) e mau (vai perder detalhes):

Como implementar o Microsoft Clarity no seu site

Para começar a usar a ferramenta você só precisa fazer duas coisas.

Passo 1. Criar uma conta

A primeira coisa é criar uma conta aqui:

https://clarity.microsoft.com

Você pode criá-la diretamente com sua conta do Google ou da Microsoft.

Passo 2. Adicionar o código ao seu site

Você tem três alternativas, todas bastante simples.

#1. Integração direta com alguns (muitos) CMS:

Você sabe, o típico plugin que você instala no WordPress (por exemplo) e em que só precisa inserir o ID da sua conta e pronto.

Fácil, mas há um problema: você não controla facilmente os cookies e é possível que algum cookie seja colocado antes de o usuário aceitar o banner.

Sim, dá para fazer, removendo os cookies da configuração da ferramenta e adicionando JavaScript, mas não é simples para todo mundo.

#2. Através do GTM

Por isso, prefiro esta segunda opção, para que você possa controlar quando os cookies são inseridos, por exemplo, via Consent Mode.

Além disso, como não podia deixar de ser, o Google Tag Manager tem um modelo para isso:

Na verdade, há mais alguns modelos, mas o que mostro acima é o oficial da Microsoft.

Se você não gosta de usar modelos, também pode criar uma tag do tipo HTML e colar o código anterior.

#3. Adicionar o código manualmente

Seja alterando diretamente os arquivos do seu site, seja por alguma funcionalidade do tema do CMS ou por um plugin que permita adicioná-lo.

Pessoalmente, é a opção de que menos gosto. Mas é uma opção.

Passos seguintes

Depois de instalar a ferramenta no seu site de qualquer uma das três formas, o Clarity começará a coletar dados de todo o site, a menos que você tenha feito algo de propósito (como selecionar apenas algumas páginas no GTM).

E você poderá começar a observar as sessões dos seus usuários e os mapas de calor.

Mais fácil, impossível.

Alternativas ao Clarity

Bem, depois de conheceres a ferramenta, o que ela oferece e como implementá-la, pode ser que não gostes dela por algum motivo.

Se for esse o caso, deixo aqui as três que mais usei em diferentes projetos.

Hotjar

Muito boa e com um plano gratuito bastante decente. Mas claro, não quase ilimitado como o Clarity. Por isso passou a ser a minha segunda opção.

Também permite funcionalidades extra, como pedir feedback aos usuários através de um pequeno formulário incorporado no site.

Yandex Metrica

A versão russa do Google oferecia uma plataforma de analítica digital quase tão poderosa quanto a rival americana. Além de funcionalidades semelhantes às do Google Analytics, oferecia gravações e mapas de calor na versão gratuita.

Não era raro encontrar sites que implementavam esta ferramenta juntamente com a do Google.

Mas a tecnologia utilizada acabou por penalizá-los, e cada vez havia mais projetos em que não era possível implementá-la ou era complicado, pelo que foi entrando em declínio.

CrazyEgg

A primeira que usei, por isso tenho um carinho especial por ela.

Na época era muito boa, porque seu plano era bastante econômico. Foca nos mapas de calor e não tem (em janeiro de 2024) opção de gravações.

Além destas três, há muitas outras alternativas. Caras e baratas, com mais e menos funcionalidades. Portanto, se não gosta do que o Microsoft Clarity oferece (a sério?), dá uma volta pela net.

Bónus: como utilizar o Microsoft Clarity com o Google Analytics 4

Não é algo muito publicitado e talvez por isso não soubesses, mas o Clarity e o GA4 podem ser ligados.

Como ligar o Microsoft Clarity ao GA4

Para isso —partindo do princípio de que você tem o GA4 implementado no seu site—, entre na sua conta do Clarity e vá a Configurações > Configurações e clique no botão Começar:

Será solicitado que você faça login na conta do Google com a qual tem acesso ao GA4:

Que você dê as permissões necessárias:

E, por fim, que selecione a propriedade do GA4 à qual o quer ligar:

Feito isso, as duas contas já estarão vinculadas:

E você poderá ver dados do GA4 dentro do Clarity:

Mas falta um último toque: vamos criar uma dimensão personalizada no GA4 assim (se o Clarity não a tiver criado automaticamente, o que às vezes acontece):

O importante é que seja do tipo evento e que o parâmetro seja “claritydimension”. Como nome da dimensão, você pode usar o que preferir.

Vantagens de ligar o GA4 e o Clarity

Bem, depois de vinculá-los, vai querer saber que benefícios isso traz.

Além do que acabei de mencionar —ver os dados do GA4 no Clarity e filtrar com mais facilidade os segmentos de usuários que você quer analisar; basta clicar em qualquer elemento dos gráficos para aparecer abaixo a opção de ver o mapa de calor ou as gravações correspondentes—, acho que a maior vantagem é o contrário: ver dados do Clarity no GA4.

Foi para isso que criámos a dimensão personalizada no GA4.

Você pode usar esta dimensão nos relatórios padrão ou nos de Exploração:

O que ela mostra é a URL do Clarity que contém o segmento correspondente de usuários do Analytics.

Isso significa que você poderá visualizar o journey completo do usuário que interessa a você no site:

• Aquele que fez uma encomenda enorme.
• Ou o outro que dizia que algo não estava a funcionar.

Nada mal, não é?

Importante, para ver as URLs você terá de ordenar a tabela por esta dimensão:

Outro pequeno inconveniente é que a URL não é um link, então você terá de copiá-la e colá-la você mesmo em uma aba do navegador. Não seria difícil para o Google corrigir isso, embora eu não saiba se há interesse em fazê-lo…

Conclusões finais

E é tudo o que queria comentar sobre o Microsoft Clarity.

Nestas mais de 2500 palavras, concentrei-me nos principais aspectos que queria que você conhecesse: o que é o Clarity, suas vantagens, os casos de uso fundamentais e as formas de implementá-lo no seu projeto.

Não incluí algumas opções mais avançadas porque, sinceramente, não acho necessário. Com o que expliquei, você tem mais do que suficiente para brincar com a ferramenta por um bom tempo.

Porque parto do princípio de que já o implementaste, certo?

Se não, já está atrasado.

É útil, gratuito e potente. Alguém dá mais?