click tracking / css / html / javascript / nojs / seo

Sem rastreamento de cliques JS

Por quê

Ser capaz de rastrear como um usuário interage com seu aplicativo é importante para você desenvolver uma experiência tranquila.
Estar acessível a todos os ambientes também é importante.

No entanto, isso levou a uma pergunta: como você mede a interação de um usuário que não tem JS habilitado?

Como

Todas as técnicas a seguir giram em torno dessa única otimização do navegador:
ela não solicitará uma imagem usada em CSS se seu estado não for aplicável no momento

Usando elementos HTML que podem manter / alterar o estado (âncoras, entradas, botões), você pode inferir que uma interação ocorreu.

Lembre-se do seguinte: devido à maneira como os navegadores armazenam os recursos em cache, cada interação será rastreada apenas uma vez por sessão . Ou seja, você só poderá saber se uma ação foi acionada em uma determinada sessão, não quantas vezes ela aconteceu.

Como funciona?

Dê uma olhada neste JS Fiddle para ter uma ideia de como ele funciona.

Requisitos

  • Tenha seu próprio GIF de rastreamento. Se você tiver uma conta do Google Analytics, poderá usar o GIF de rastreamento GA com os parâmetros adequados. Para esses exemplos, usamos uma imagem de espaço reservado.
  • Se você já está rastreando usando JS, marque sua página com a presença ou ausência de JS. Isso geralmente é feito com uma classe ‘js’ ou ‘no-js’ no elemento HTML. Use Modernizr ou defina uma classe ‘no-js’ e remova-a com JS. Restrinja o seletor abaixo a ‘.no-js’ se for esse o caso.

Técnica # 1 (âncora + passar o mouse + ativo)

a:hover:active:after{
    content: url(http://lorempixel.com/20/20/cats/1/?kpi1);
}
<a href="http://ink.sapo.pt" target="_blank">Click me!</a>

Prós

  • Fácil de usar
  • Pode ser usado para rastrear links externos

Contras

  • Pode acionar falsos positivos, pois você pode acionar um mouse para baixo sem um clique (clique com o botão direito, mouse para baixo no elemento e mouseup fora do elemento).
  • Não funciona na navegação do teclado.

Técnica # 2 (botão + foco + ativo)

button:focus:active:after{
    content: url(http://lorempixel.com/20/20/cats/1/?kpi2);
}
<button>Click me!</button>

Prós

  • Funciona com navegação de teclado

Contras

  • Pode acionar falsos positivos, pois você pode acionar um mouse para baixo sem clicar (clique com o botão direito, mouse para baixo no elemento e mouseup fora do elemento)

Técnica # 3 (botão de opção)

input:checked:after {
    content: url(http://lorempixel.com/20/20/cats/1/?kpi3);
}
<input id="kpi3" type="radio" value="" />
<label for="kpi3">Click me</label>

Prós

  • Funciona com navegação de teclado
  • Sem falsos positivos para o clique direito

Contras

  • Difícil de usar
  • Muito estreito

Variante # 4 (KPI múltiplo)

Você pode usar várias imagens de fundo CSS3 para selecionar vários pontos de extremidade de uma vez. Observe que isso reduzirá a compatibilidade do navegador.

button:focus:active:after{
    content: '';
   background-image: url(http://lorempixel.com/20/20/cats/1/?kpi4), url(http://lorempixel.com/20/20/cats/1/?kpi5);

}
<button>Multiple Images!</button>

o que

O que você pode rastrear

  • Visualizações de página (usando a imagem no corpo)
  • Clica em âncoras
  • Clica em botões
  • Links ativos (através do uso de: target)
  • Elementos de formulário ativos
  • Algumas métricas de dispositivo (por meio do uso criativo de consultas de mídia)

O que você não pode rastrear

  • Quantos cliques ocorreram
  • Quando um elemento se torna visível na janela de visualização
  • Informações do usuário (IP, localização, referenciador, agente do usuário, etc). Embora você possa inferir isso se você controlar o bug / gif de rastreamento e se puder gerar dinamicamente o lado do servidor CSS.

Quando

A usabilidade é marginal, mas quando você tem apenas componentes ricos em CSS, como um controle deslizante CSS3 , Tabs CSS3 ou até mesmo um CSS Modal , por que não ter um CSS único para rastrear a interação também?

Use-o com sabedoria e divirta-se rastreando!

Related Posts