Webflow : configurer Zenovay sur un goal de soumission de formulaire Webflow

Les formulaires Webflow peuvent être suivis comme goals Zenovay via l'une des deux approches ci-dessous. Choisissez celle qui correspond au comportement de redirection de votre formulaire.

Étape 0 — Installer le tracker

Si ce n'est pas déjà fait, collez le script de tracking Zenovay dans Webflow sous Project Settings → Custom Code → Head Code :

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

Publiez le site et vérifiez dans votre dashboard Zenovay que les pageviews arrivent.

Approche 1 — Goal URL-match (simple)

Utilisez celle-ci quand votre formulaire redirige vers une page de remerciement après soumission.

1. Dans Webflow, définissez Form Settings → Redirect URL vers une page de succès unique, par ex. /contact-thanks.
2. Dans Zenovay, allez dans l'onglet Journeys, puis dans le sous-onglet Goals.
3. Cliquez sur Ajouter goal et choisissez Page Visit comme type de goal (celui-ci correspond à l'URL de la page).
4. Choisissez un type de correspondance et un pattern — par ex. Exact match avec /contact-thanks (ou ce que vous avez configuré comme redirection).
5. Sauvegardez.

Chaque visite à la page de remerciement compte désormais comme une conversion. C'est l'approche la plus simple et fiable.

Approche 2 — Événement personnalisé (sans redirection)

Utilisez celle-ci quand votre formulaire reste sur la même page et affiche un message de succès inline.

Webflow remplace le formulaire par un bloc de succès .w-form-done après une soumission AJAX réussie. Écoutez ce bloc pour qu'il devienne visible et envoyez un événement personnalisé Zenovay. Ajoutez ceci dans Project Settings → Custom Code → Footer Code :

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => {
      // Webflow valide côté client ; le message de succès apparaît après l'AJAX.
      // On écoute le bloc de succès pour qu'il devienne 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>

L'appel d'événement personnalisé est window.zenovay('track', '<event_name>', { ...properties }) — le premier argument est la commande littérale 'track', puis le nom de votre événement, puis un objet de propriétés optionnel.

Créez ensuite un goal d'événement personnalisé dans Zenovay :

1. Ouvrez le dashboard de votre site, allez dans l'onglet Journeys → sous-onglet Goals, et cliquez sur Ajouter goal.
2. Choisissez Custom event comme type de goal.
3. Définissez le nom de l'événement sur form_submitted (il doit correspondre au nom que vous envoyez dans le script).

Si vous souhaitez suivre un seul formulaire, envoyez un nom d'événement distinct par formulaire (par ex. contact_form_submitted) et créez un goal pour chacun.

Vérifier que ça marche

Soumettez le formulaire sur votre site live. En ~30 secondes :

• Une nouvelle activité doit apparaître dans l'onglet Live View du dashboard de votre site.
• Le compteur du goal doit avancer sous l'onglet Journeys → Goals, à côté du goal que vous avez créé.

Pièges courants

• Le formulaire échoue à la validation — Approche 1 ne se déclenche pas car il n'y a pas de redirection. Approche 2 ne se déclenche pas car le bloc de succès reste caché. C'est le bon comportement — vous ne voulez compter que les soumissions réussies.
• Formulaires Webflow CMS — même approche ; l'attribut data-name peut différer du nom du formulaire dans l'éditeur.
• Plusieurs formulaires sur une page — les deux approches gèrent ça. Dans l'Approche 2, la propriété form_id (ou un nom d'événement par formulaire) vous permet de les distinguer dans le dashboard.

Articles liés

• Installer le script de tracking
• Créer des goals
• Goals URL-match