O que o rastreamento de cliques registra em um site e quais cliques ele perde

O que é rastreamento de cliques em um site?

Em um site, rastreamento de cliques é a prática de registrar qual elemento o visitante clicou, em qual página e em que momento, e então enviar esse registro a uma ferramenta de analytics para que os cliques possam ser contados, comparados e associados a conversões. Um pequeno script escuta o evento click do navegador, lê o que foi clicado e envia um payload curto a um endpoint de coleta. Rastreie os cliques nos elementos que decidem se um visitante converte, como o botão de cadastro, a chave de preços e o link de checkout, antes de rastrear qualquer outra coisa.

O rastreamento de cliques é a camada de dados por baixo de vários relatórios que parecem diferentes. Uma meta conta os cliques em um botão. Um mapa de calor pinta os cliques por posição. Uma etapa de funil pode ser um clique. O método que você escolhe decide quais desses relatórios os dados conseguem alimentar.

O que o navegador conta como clique?

O navegador dispara um evento click quando um botão do ponteiro é pressionado e solto dentro do mesmo elemento, quando um gesto de toque cai sobre ele ou quando um usuário de teclado o ativa, então um único listener cobre mouse, toque e teclado. A referência do MDN afirma que "click fires after both the mousedown and mouseup events have fired, in that order," e lista "a touch gesture" e "pressing the Space key or Enter key while the element is focused" como equivalentes.

A regra do teclado tem uma pegadinha que quebra o rastreamento em controles personalizados. O MDN observa que a equivalência de Enter e Espaço "only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute." Uma <div tabindex="0"> estilizada como botão não recebe nenhum click do teclado, então os usuários de teclado somem da contagem de cliques dela. Use um <button> ou um <a> de verdade para tudo o que você pretende rastrear.

O evento também conta repetições. O MDN diz que a propriedade detail guarda "the number of times the target was clicked," então ela marca 2 em um clique duplo e 3 em um clique triplo. Esse contador é a matéria-prima da detecção de rage clicks.

Quais são as três formas de rastrear cliques?

Os três métodos são um evento nomeado em elementos escolhidos, um único listener delegado que registra todos os cliques da página e a captura de coordenadas, que guarda em que ponto da tela cada clique caiu. Cada um responde a uma pergunta diferente e falha de um jeito diferente.

Os eventos nomeados são o método por trás do rastreamento de eventos, em que o nome do evento carrega a ação e as propriedades carregam os detalhes. O listener delegado é o que os fornecedores chamam de autocapture. A captura de coordenadas alimenta o mapa de calor de sites, que agrega posições de muitas visitas em uma única imagem. Uma divisão prática é usar eventos nomeados para o punhado de cliques que importa e session replay para o resto.

O que um evento de clique deve registrar?

Um evento de clique deve registrar o identificador estável do elemento, a página em que aconteceu, o destino no caso de links e um timestamp, e nada que o visitante tenha digitado. Esses quatro campos respondem "o quê, onde, para onde e quando" sem guardar nada pessoal.

Deixe de fora o texto do link em páginas que exibem dados da conta, e nunca leia valores de campos de formulário próximos, porque um botão com o nome de um cliente no rótulo envia esse nome a cada clique. Um atributo data-track dedicado é o identificador mais seguro, já que ele só muda quando alguém o muda de propósito.

O listener abaixo usa um único handler para o documento inteiro, filtra os elementos que têm data-track e envia com navigator.sendBeacon():

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

A opção capture: true roda o handler na descida pelo DOM, antes de qualquer handler no próprio botão. Assim, um componente que chama event.stopPropagation() no seu próprio handler de clique não consegue esconder o clique do rastreador.

Por que alguns cliques rastreados nunca chegam ao relatório?

Os cliques somem quando a página é descarregada antes de a requisição ser enviada, quando um bloqueador descarta a requisição ou quando o elemento clicado nunca bateu com o listener. Os links carregam o risco extra da primeira causa, porque o clique que inicia uma navegação é também o clique que desmonta a página que o está enviando.

O MDN descreve o problema diretamente: "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." A resposta dele é o navigator.sendBeacon(), que "asynchronously sends an HTTP POST request containing a small amount of data to a web server" e foi feito para esse caso. A comparação sendBeacon vs fetch keepalive cobre os limites de tamanho e quando o fetch com keepalive: true se encaixa melhor.

Siga as causas nesta ordem quando as contagens parecerem baixas:

1. Compare com um total conhecido. Os cliques em um botão de checkout não podem passar das pageviews do checkout. Uma proporção muito abaixo do esperado indica perda, não falta de interesse.
2. Teste o caso do link. Clique no elemento com o painel de rede aberto e "Preserve log" ativado. Uma requisição que aparece como cancelada é o problema do descarregamento.
3. Teste o teclado. Navegue com Tab até o elemento e pressione Enter. Nenhum evento significa uma div focável no lugar de um botão.
4. Teste com um bloqueador ativo. Uma requisição que some sob um bloqueador de conteúdo se perde para essa fatia de visitantes em todos os relatórios.
5. Confira o seletor. Uma definição escrita com base em um nome de classe para de bater depois de um redesign, e a contagem cai a zero sem nenhum erro.

Como o GA4 rastreia cliques sem código extra?

O GA4 rastreia dois tipos de clique em link automaticamente pela medição otimizada: cliques de saída e downloads de arquivos, e não rastreia cliques em botões que ficam no seu próprio domínio. A central de ajuda do Google diz que o evento click dispara "each time a user clicks a link that leads away from the current domain and to another website" e coleta "link_classes, link_domain, link_id, link_url, outbound (boolean)." O evento file_download dispara "when a user clicks a link leading to a file (with a common file extension)."

Todo o resto, incluindo o botão de cadastro e a chave de preços, precisa de um evento personalizado. Os guias sobre como rastrear links de saída e downloads de arquivos cobrem os dois casos automáticos em detalhe.

O que os padrões de clique revelam sobre páginas quebradas?

Cliques repetidos em um elemento e cliques que não produzem resposta são os dois padrões que apontam para uma página quebrada em vez de falta de interesse. Um rage click é uma rajada de cliques no mesmo elemento, e um dead click é um clique depois do qual nada muda na página. Os dois parecem engajamento em uma contagem bruta de cliques, e é por isso que um relatório de cliques sem o contexto da sessão exagera o quanto uma página funciona bem. O guia rage clicks vs dead clicks lista os limites que cada fornecedor publica.

A Flowsery cobre as duas metades do trabalho. Os eventos personalizados rastreiam qualquer interação com uma chamada de API em JavaScript, incluindo cliques em botões, envios de formulário e downloads de arquivos, e o rastreamento de metas transforma esses eventos em taxas de conversão na página de rastreamento de metas e eventos. A gravação de sessões reproduz o movimento do cursor, cliques, rolagens e preenchimento de formulários, e a IA da Flowsery sinaliza rage clicks, dead clicks e erros de JavaScript em cada sessão gravada, depois os agrupa em problemas ordenados por quantas sessões afetaram. O rastreamento roda sem cookies e sem banner de consentimento.

Perguntas frequentes

Qual é a diferença entre rastreamento de cliques e mapa de calor?

O rastreamento de cliques é a coleta dos registros de clique, e o mapa de calor é uma forma de exibi-los. Um mapa de cliques agrega as posições x e y de muitos cliques em uma sobreposição colorida sobre uma imagem da página. Eventos de clique nomeados não carregam posição nenhuma e alimentam metas e funis.

O rastreamento de cliques conta toques no celular?

Sim. Um gesto de toque em um elemento dispara o mesmo evento click que pressionar e soltar o mouse, então um único listener conta os dois. Os cliques no celular precisam da sua própria visualização de mapa de calor, já que as coordenadas mudam com o layout mais estreito.

Por que meus cliques em links de saída estão subcontados?

A página começa a ser descarregada assim que o visitante segue o link, e o navegador pode descartar uma requisição comum durante o descarregamento. Enviar o evento com navigator.sendBeacon() ou com fetch usando keepalive: true permite que a requisição sobreviva à página. Os bloqueadores de conteúdo removem mais uma fatia que nenhum método de envio recupera.

Devo rastrear todos os cliques ou só os importantes?

Rastreie como eventos nomeados os cliques ligados a uma conversão e deixe o resto para o session replay ou para um mapa de calor. Eventos nomeados em todos os elementos geram um schema que ninguém mantém. Um listener delegado em tudo gera volume, com seletores que quebram no próximo redesign.

O rastreamento de cliques coleta dados pessoais?

Um registro de clique guarda um identificador de elemento, um caminho de página e um timestamp, e nada disso identifica uma pessoa. Os dados pessoais entram quando o payload inclui o texto do link ou valores de formulário que exibem dados de um cliente, ou quando os cliques são ligados a um identificador persistente. Envie um valor fixo de data-track em vez do texto visível para manter o registro anônimo.

O GA4 consegue rastrear cliques em botões automaticamente?

Não. A medição otimizada do GA4 registra cliques em links que saem do seu domínio e em links para tipos de arquivo comuns. Um botão que fica no seu próprio site precisa de um evento personalizado enviado pelo seu próprio código ou por um gerenciador de tags.

Por que um <div tabindex="0"> não registra cliques do teclado?

Segundo a MDN, a equivalência de teclado para Enter e a barra de espaço só se aplica a elementos com um manipulador de evento de teclado padrão, o que exclui elementos que só se tornaram focáveis via tabindex. Um <div tabindex="0"> estilizado como botão nunca dispara um evento click quando um usuário de teclado pressiona Enter ou espaço, então esses usuários somem da contagem de cliques. Use um <button> ou <a> real para tudo o que planeja rastrear.

O que a propriedade detail do evento de clique mede?

A propriedade detail guarda o número de vezes que o elemento foi clicado, então marca 2 num clique duplo e 3 num clique triplo. Esse contador é a matéria-prima da detecção de rage clicks. Um evento nomeado que também registra detail pode sinalizar cliques repetidos em um elemento sem precisar de outro listener.

Qual é a diferença entre um rage click e um dead click?

Um rage click é uma sequência de cliques no mesmo elemento, e um dead click é um clique após o qual nada muda na página. Os dois parecem engajamento numa contagem bruta de cliques, por isso um relatório de cliques sem contexto de sessão pode ler uma página quebrada como uma página popular.

O que a opção capture: true faz em um listener de clique?

Ela faz o manipulador de rastreamento rodar na descida pelo DOM, antes de qualquer manipulador de clique anexado ao próprio elemento. Um componente que chama event.stopPropagation() no próprio manipulador ainda é registrado, porque o rastreador já rodou antes desse manipulador disparar.