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()

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()

• 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:

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()

<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()

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