Webflow: configurando o Zenovay num goal de envio de formulário Webflow

Formulários do Webflow podem ser rastreados como goals do Zenovay usando uma das duas abordagens abaixo. Escolha a que combina com o comportamento de redirecionamento do seu formulário.

Passo 0 — Instalar o tracker

Se ainda não fez, cole o script de tracking do Zenovay no Webflow em Project Settings → Custom Code → Head Code:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Publique o site e confirme no seu dashboard do Zenovay que pageviews estão chegando.

Abordagem 1 — Goal por casamento de URL (simples)

Use quando seu formulário redireciona para uma página de obrigado após o envio.

1. No Webflow, defina Form Settings → Redirect URL para uma página de sucesso única, por ex. /contact-thanks.
2. No Zenovay, vá à aba Journeys e depois à subaba Goals.
3. Clique em Adicionar goal e escolha Page Visit como tipo de goal (coincide com a URL da página).
4. Escolha um tipo de correspondência e padrão — por ex. Exact match com /contact-thanks (ou o que você definiu como redirecionamento).
5. Salve.

Cada visita à página de obrigado agora conta como conversão. É a abordagem mais simples e confiável.

Abordagem 2 — Evento personalizado (sem redirect)

Use quando seu formulário fica na mesma página e mostra uma mensagem de sucesso inline.

O Webflow substitui o formulário por um bloco de sucesso .w-form-done após uma submissão AJAX bem-sucedida. Observe esse bloco ficar visível e envie um evento personalizado do Zenovay. Adicione isto em Project Settings → Custom Code → Footer Code:

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => {
      // O Webflow valida no client-side; a mensagem de sucesso aparece após o AJAX.
      // Escutamos o bloco de sucesso para se tornar visível.
      const successEl = form.parentElement.querySelector('.w-form-done');
      if (!successEl) return;

      const observer = new MutationObserver(() => {
        if (successEl.style.display !== 'none' && successEl.offsetHeight > 0) {
          window.zenovay && window.zenovay('track', 'form_submitted', {
            form_id: form.getAttribute('data-name') || form.id || 'unknown'
          });
          observer.disconnect();
        }
      });
      observer.observe(successEl, { attributes: true, childList: true, subtree: true });
    });
  });
});
</script>

A chamada de evento personalizado é window.zenovay('track', '<event_name>', { ...properties }) — o primeiro argumento é o comando literal 'track', depois o nome do seu evento, depois um objeto de propriedades opcional.

Depois crie um goal de evento personalizado no Zenovay:

1. Abra o dashboard do seu site, vá à aba Journeys → subaba Goals, e clique em Adicionar goal.
2. Escolha Custom event como tipo de goal.
3. Defina o nome do evento como form_submitted (deve corresponder ao nome que você envia no script).

Se quiser rastrear apenas um formulário, envie um nome de evento distinto por formulário (por ex. contact_form_submitted) e crie um goal para cada.

Verificando que funciona

Envie o formulário no seu site no ar. Em ~30 segundos:

• Uma nova atividade deve aparecer na aba Live View do dashboard do seu site.
• O contador do goal deve avançar sob a aba Journeys → Goals, ao lado do goal que você criou.

Armadilhas comuns

• O formulário falha na validação — a Abordagem 1 não dispara porque não há redirecionamento. A Abordagem 2 não dispara porque o bloco de sucesso fica escondido. É o comportamento correto — você só quer contar envios bem-sucedidos.
• Formulários do Webflow CMS — mesma abordagem; o atributo data-name pode diferir do nome do formulário no editor.
• Múltiplos formulários numa página — ambas as abordagens lidam com isso. Na Abordagem 2, a propriedade form_id (ou um nome de evento por formulário) permite distingui-los no dashboard.

Leitura relacionada

• Instalando o script de tracking
• Criando goals
• Goals por casamento de URL