Por que Alguns Formulários Não Disparam Eventos no Google Tag Manager?

Ao configurar o rastreamento de formulários no Google Tag Manager (GTM), você pode enfrentar um problema comum: os eventos não são disparados como esperado. Essa situação muitas vezes ocorre devido ao uso do método event.preventDefault() ou formulários configurados incorretamente, que altera o comportamento padrão do navegador. Neste artigo, vamos explicar por que isso acontece, como afeta o Google Tag Manager e o que você pode fazer para garantir que seus eventos sejam rastreados corretamente.

Antes de Tudo: Verifique o action e o method

Para que um formulário funcione corretamente e seja rastreado pelo GTM (ou até mesmo por scripts manuais), ele precisa estar configurado com os atributos básicos:

• •action: A URL para onde os dados serão enviados.Exemplo: <form action="/enviar-dados">
• •method: O método HTTP usado para enviar os dados (GET ou POST).Exemplo: <form method="POST">

Se qualquer um desses atributos estiver ausente ou configurado de maneira incorreta, o formulário não funcionará como esperado, e o GTM pode não conseguir rastreá-lo.

O que é o Comportamento Padrão de um Formulário?

Em um formulário HTML, ao clicar no botão "Enviar", o navegador executa o comportamento padrão de:

1. •Enviar os dados do formulário para a URL especificada no atributo action.
2. •Recarregar a página ou redirecionar para outra URL.

Esse processo é conhecido como form submission (submissão do formulário). No entanto, muitos desenvolvedores utilizam o método event.preventDefault() para personalizar a forma como os dados do formulário são processados.

Como event.preventDefault() Afeta o GTM?

O método event.preventDefault() impede que o navegador execute o comportamento padrão do formulário. Em termos práticos, isso significa que:

• •O formulário não é enviado automaticamente.
• •Nenhum evento nativo de submissão (submit) é registrado pelo navegador.

Como o Google Tag Manager depende de eventos do navegador para disparar gatilhos baseados em envio de formulário, ele pode não detectar a ação se event.preventDefault() for usado. Isso explica por que muitos formulários dinâmicos ou personalizados acabam não disparando eventos no Google Tag Manager.

Como contornar a situação?

Para garantir que seus formulários personalizados disparem eventos corretamente no Google Tag Manager, você pode seguir estas práticas:

1. •Dispare um evento personalizado do Google Tag Manager Após usar event.preventDefault(), dispare manualmente um evento para o GTM:

javascriptCopiar
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();

  // Lógica personalizada
  const formData = new FormData(event.target);
  console.log('Dados do formulário:', Object.fromEntries(formData));

  // Envia um evento personalizado para o GTM
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'form_submission',
    formId: 'myForm'
  });
});

1. •Simule o evento do envio do formulário com form.submit()

htmlCopiar
<form id="myForm" action="/enviar-dados" method="POST">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name" required />
  <button type="submit">Enviar</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    // Impede o comportamento padrão
    event.preventDefault();

    // Lógica personalizada
    const name = document.getElementById('name').value;
    console.log(`Nome digitado: ${name}`);

    // Simula o envio do formulário após a lógica
    if (name) {
      console.log('Simulando o envio do formulário...');
      this.submit(); // Força o envio
    } else {
      alert('Por favor, preencha o nome antes de enviar.');
    }
  });
</script>

O uso de event.preventDefault() em formulários pode impactar diretamente o rastreamento de eventos no Google Tag Manager, já que ele impede que o navegador dispare o comportamento padrão de submissão. Para garantir que seus eventos sejam rastreados corretamente, é fundamental adicionar eventos personalizados ao dataLayer ou usar alternativas como rastrear cliques em botões.

Com essas dicas, você poderá resolver problemas de rastreamento de formulários e melhorar suas estratégias de monitoramento no GTM.

Lucian Fialho

Fundador e CTO da Métricas Boss, com sólido background em tecnologia, tendo passado por empresas como Comprafacil.com e Leader.com. Atuou no desenvolvimento de lojas como Globo, Olimpíadas do Rio, Ipiranga Shop, entre outras.

Publicado em 21 de janeiro de 2025