Webflow: configurando Zenovay en un goal de envío de formulario de Webflow

Los formularios de Webflow pueden rastrearse como goals de Zenovay con uno de los dos enfoques siguientes. Elige el que coincida con el comportamiento de redirección de tu formulario.

Paso 0 — Instalar el tracker

Si aún no lo hiciste, pega el script de tracking de Zenovay en Webflow bajo Project Settings → Custom Code → Head Code:

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

Publica el sitio y confirma en tu dashboard de Zenovay que llegan pageviews.

Enfoque 1 — Goal por coincidencia de URL (simple)

Úsalo cuando tu formulario redirige a una página de gracias tras el envío.

1. En Webflow, configura Form Settings → Redirect URL a una página de éxito única, p. ej. /contact-thanks.
2. En Zenovay, ve a la pestaña Journeys, luego a la subpestaña Goals.
3. Haz clic en Añadir goal y elige Page Visit como tipo de goal (coincide con la URL de la página).
4. Elige un tipo de coincidencia y patrón — por ejemplo, Exact match con /contact-thanks (o lo que hayas configurado como redirección).
5. Guarda.

Cada visita a la página de gracias cuenta ahora como conversión. Es el enfoque más simple y fiable.

Enfoque 2 — Evento personalizado (sin redirección)

Úsalo cuando tu formulario se queda en la misma página y muestra un mensaje de éxito inline.

Webflow reemplaza el formulario con un bloque de éxito .w-form-done tras el envío AJAX exitoso. Observa que ese bloque se haga visible y envía un evento personalizado de Zenovay. Añade esto a Project Settings → Custom Code → Footer Code:

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => {
      // Webflow valida del lado cliente; el mensaje de éxito aparece tras el AJAX.
      // Escuchamos el bloque de éxito para que se vuelva visible.
      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>

La llamada de evento personalizado es window.zenovay('track', '<event_name>', { ...properties }) — el primer argumento es el comando literal 'track', luego el nombre de tu evento, luego un objeto de propiedades opcional.

Luego crea un goal de evento personalizado en Zenovay:

1. Abre el dashboard de tu sitio, ve a la pestaña Journeys → subpestaña Goals, y haz clic en Añadir goal.
2. Elige Custom event como tipo de goal.
3. Establece el nombre del evento en form_submitted (debe coincidir con el nombre que envías en el script).

Si quieres rastrear solo un formulario, envía un nombre de evento distinto por formulario (p. ej. contact_form_submitted) y crea un goal para cada uno.

Verificar que funciona

Envía el formulario en tu sitio live. En ~30 segundos:

• Debe aparecer una nueva actividad en la pestaña Live View del dashboard de tu sitio.
• El contador del goal debe avanzar bajo la pestaña Journeys → Goals, junto al goal que creaste.

Errores comunes

• El formulario falla la validación — el Enfoque 1 no dispara porque no hay redirección. El Enfoque 2 no dispara porque el bloque de éxito se queda oculto. Es el comportamiento correcto — sólo quieres contar envíos exitosos.
• Formularios Webflow CMS — mismo enfoque; el atributo data-name puede diferir del nombre del formulario en el editor.
• Múltiples formularios en una página — ambos enfoques lo manejan. En el Enfoque 2, la propiedad form_id (o un nombre de evento por formulario) te permite distinguirlos en el dashboard.

Artículos relacionados

• Instalar el script de tracking
• Crear goals
• Goals por coincidencia de URL