Detectando Interação Mínima do Usuário no Google Tag Manager

Jonatas Pinto Ferreira — Mon, 27 Jan 2025 18:18:39 +0000

Ao analisar o comportamento dos usuários em um site, um dos principais desafios é identificar quando um usuário realmente interage com a página. Neste post, exploraremos uma técnica simples em JavaScript para detectar interações mínimas dos usuários e integrá-la ao Google Tag Manager (GTM) para rastrear essas interações de forma eficaz.

Por que Rastrear Interação Mínima do Usuário?

Detectar interações mínimas do usuário é particularmente útil para:

Diferenciar entre usuários ativos e passivos.
Melhorar a precisão das análises ao garantir que eventos sejam disparados apenas por engajamento real.
Ativar tags de marketing ou rastreamento no GTM apenas após o usuário demonstrar interesse genuíno.

Interações mínimas incluem ações como movimentos do mouse, cliques ou rolagem — essencialmente qualquer atividade pequena que indique que o usuário não está inativo.

A Solução em JavaScript

Aqui está o código que detecta interação mínima do usuário e envia um evento para o dataLayer do GTM:

<script>
    (function () {
      var fired = false;
      var listener = function () {
        if (fired === true) {
          return false;
        }

        console.log("minimal-user-interaction: ok");
        dataLayer.push({ "minimal-user-interaction": true });
        dataLayer.push({ event: "minimal-user-interaction" });

        fired = true;
        return true;
      };

      document.addEventListener("focus", listener, { once: true });
      document.addEventListener("mousemove", listener, { once: true });
      document.addEventListener("mousewheel", listener, { once: true });
      document.addEventListener("mouseout", listener, { once: true });
      document.addEventListener("mouseup", listener, { once: true });
      document.addEventListener("contextmenu", listener, { once: true });
      document.addEventListener("keydown", listener, { once: true });
      document.addEventListener("click", listener, { once: true });
      document.addEventListener("scroll", listener, { once: true });
      document.addEventListener("touchstart", listener, { once: true });
    })();
</script>

Como Funciona

1. Inicialização de Variáveis

A variável fired garante que o evento seja disparado apenas uma vez, mesmo que o usuário realize múltiplas interações.

2. A Função de Gatilho

A função listener:

Verifica se o evento de interação já foi disparado.
Registra uma mensagem de confirmação no console.
Envia dados para o dataLayer para uso no GTM.
Define fired como true para evitar execuções duplicadas.

3. Eventos Monitorados

Vários eventos são monitorados no document para detectar interações comuns do usuário, como:

mousemove: Quando o cursor se move.
click: Quando o usuário clica em qualquer lugar da página.
scroll: Quando o usuário rola a página.
touchstart: Quando um evento de toque ocorre (ex.: em dispositivos móveis).

A opção { once: true } garante que cada listener seja removido após a primeira execução, otimizando o desempenho.

Integração com o Google Tag Manager

Para fazer isso funcionar com o GTM:

Envie Eventos para o dataLayer
- O método dataLayer.push() no código adiciona dois dados:
  - { "minimal-user-interaction": true }: Um indicador de que houve interação.
  - { event: "minimal-user-interaction" }: Um evento personalizado que pode acionar tags no GTM.
Configure um Gatilho no GTM
- Crie um gatilho no GTM para ouvir o evento minimal-user-interaction:
  - Tipo de Gatilho: Evento Personalizado.
  - Nome do Evento: minimal-user-interaction.
Ative Tags Baseadas na Interação
- Vincule o gatilho a quaisquer tags que você deseje disparar apenas após a interação do usuário, como eventos do Google Analytics ou tags de remarketing.

Casos de Uso Práticos

Esta técnica pode ser particularmente úteis em cenários como:

Medição de Engajamento: Disparar eventos analíticos apenas para usuários ativos, melhorando a confiabilidade dos dados.
Carregamento Preguiçoso (Lazy Loading): Carregar recursos pesados ou scripts de terceiros somente quando o usuário interagir com a página.
Rastreamento de Conversão: Garantir que tags de rastreamento sejam disparadas apenas após engajamento real do usuário.

Considerações Finais

Rastrear interação mínima do usuário é uma forma simples e poderosa de melhorar a configuração analítica do seu site. Ao combinar esta técnica em JavaScript com o Google Tag Manager, você pode capturar insights mais significativos e otimizar o desempenho do seu site.

O que achou? Você já implementou soluções semelhantes em seus projetos? Compartilhe sua experiência ou opinião.

DEV Community: Jonatas Pinto Ferreira