Como Evitar Envio Duplicado de Formulários com Google Tag Manager 

O problema com envios duplicados de formulários é mais comum do que se imagina. Isso pode distorcer as métricas, gerar dados redundantes e até prejudicar a experiência do usuário. Muitas vezes, o reenvio ocorre quando uma página de agradecimento é recarregada ou quando há problemas de conexão. Felizmente, com o Google Tag Manager (GTM), é possível implementar uma solução simples e eficaz para evitar essa questão, utilizando ferramentas como o Armazenamento Local para controlar os envios.

O Problema dos Envios Duplicados

Imagine que um usuário envia um formulário corretamente, mas como a página de "Obrigado" demora alguns segundos para carregar, ele clica em "Enviar" novamente. Essa interação gera múltiplas submissões, criando inconsistências nos relatórios e prejudicando a qualidade dos dados.

Os envios duplicados geralmente acontecem em:

• Formulários que redirecionam para uma página de confirmação.

• Ambientes com baixa conectividade.

• Situações em que os usuários clicam mais de uma vez no botão de "Enviar".

Resolver isso manualmente no backend é possível, mas pode ser trabalhoso. A boa notícia é que o Google Tag Manager permite que você implemente soluções front-end eficazes, como o uso do localStorage, para um controle mais eficiente.

Solução com Armazenamento Local

O Que é o Armazenamento Local?

O localStorage é uma ferramenta do navegador que armazena dados localmente no dispositivo do usuário. Ele pode ser usado para registrar informações, como os IDs dos formulários já enviados, evitando que o mesmo formulário seja submetido novamente.

Etapas para Implementação no Google Tag Manager

Para evitar envios duplicados com o Google Tag Manager, siga estas etapas:

1. Criando uma Variável para Capturar o ID do Formulário

• No GTM, crie uma variável definida pelo usuário que capture o identificador único do formulário (por exemplo, um ID ou nome exclusivo) e a URL da página.

• Essa variável será usada para validar se o formulário já foi enviado ou não.

2. Adicionando uma Tag HTML Personalizada

• Após definir o ID personalizado, crie uma tag HTML personalizada.

• O objetivo dessa tag é verificar se o ID do formulário já está no armazenamento local antes de permitir o envio.

• Código exemplo para a tag personalizada:

<script>
  var formId = '<ID_DO_FORMULÁRIO>'; // Substitua pelo ID real do formulário
  var alreadySubmitted = localStorage.getItem(formId);

  if (alreadySubmitted) {
    alert('Formulário já enviado!');
  } else {
    localStorage.setItem(formId, 'true');
  }
</script>

Essa lógica usa o localStorage para armazenar o estado do envio. Se o formulário já estiver marcado como enviado, um alerta será exibido, e o novo envio será bloqueado.

3. Configurando o Fluxo de Disparos

• Crie um gatilho (trigger) que será associado ao envio do formulário. Configure-o para disparar sempre que o formulário for enviado pela primeira vez.

• Certifique-se de que o sistema funcione adequadamente em conjunto com a tag HTML personalizada.

Detectando Envios Duplicados

Para reforçar a solução, utilize uma variável JavaScript personalizada que checa, em tempo real, se o formulário foi enviado.

Exemplo de código:

function () {
  var formId = '<ID_DO_FORM>';
  return localStorage.getItem(formId) ? true : false;
}

• Explicação: Essa variável acessa o localStorage para verificar se o formulário foi enviado previamente com base no seu ID. Se já houver registro, ela retorna "verdadeiro".

Observação: No caso de formulários compartilhados entre diferentes subdomínios, o localStorage não poderá compartilhar dados. Para isso, considere o uso de cookies, que são mais aplicáveis em cenários multissubdomínios.

Pontos de Atenção

• Limitação do localStorage: O armazenamento local funciona apenas no nível do domínio. Portanto, se você estiver lidando com subdomínios, precisará de alternativas como cookies ou outras soluções que suportem compartilhamento de dados.

• Validação e Testes: Sempre realize testes rigorosos para garantir que o ID do formulário seja registrado corretamente e que a tag esteja funcionando sem efeitos colaterais para o usuário.

Conclusão

Implementar soluções para evitar envios duplicados de formulários não é apenas uma melhoria técnica, mas também uma forma de assegurar uma melhor experiência do usuário e dados mais limpos para análise. Usar o Google Tag Manager, junto com o armazenamento local, é uma forma prática e eficaz de resolver essa questão, sem precisar realizar alterações no backend. Com essas práticas, você garante a integridade do fluxo de dados e melhora o desempenho das suas campanhas.

Está precisando de ajuda? Conte com a Obra para fazer um diagnóstico dos eventos do seu site ou ecommerce.