Webflow-Formulare lassen sich mit einem von zwei Ansätzen als Zenovay-Goals tracken. Wählen Sie den, der zum Redirect-Verhalten Ihres Formulars passt.
Schritt 0 — Den Tracker installieren
Falls noch nicht geschehen, fügen Sie das Zenovay-Tracking-Skript in Webflow unter Project Settings → Custom Code → Head Code ein:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
Veröffentlichen Sie die Website und bestätigen Sie im Zenovay-Dashboard, dass Pageviews ankommen.
Ansatz 1 — URL-Match-Goal (simpel)
Verwenden Sie diesen, wenn Ihr Formular nach dem Submit auf eine Danke-Seite weiterleitet.
- Setzen Sie in Webflow die Form Settings → Redirect URL auf eine eindeutige Erfolgsseite, z. B.
/contact-thanks. - Gehen Sie in Zenovay zu Journeys → Goals.
- Klicken Sie auf Goal hinzufügen und wählen Sie Page Visit als Goal-Typ.
- Wählen Sie einen Match-Typ und ein Muster — z. B. Exact match mit
/contact-thanks(oder was auch immer Sie als Redirect gesetzt haben). - Speichern.
Jeder Besuch der Danke-Seite zählt jetzt als Conversion. Das ist der einfachste und zuverlässigste Ansatz.
Ansatz 2 — Custom Event (kein Redirect)
Verwenden Sie diesen, wenn Ihr Formular auf der gleichen Seite bleibt und eine Inline-Erfolgsmeldung anzeigt.
Webflow ersetzt das Formular durch einen .w-form-done-Erfolgsblock nach erfolgreicher AJAX-Submission. Beobachten Sie, wie dieser Block sichtbar wird, und senden Sie ein Zenovay-Custom-Event. Fügen Sie dies zu Project Settings → Custom Code → Footer Code hinzu:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', () => {
// Webflow validiert client-seitig; die Erfolgsmeldung erscheint nach AJAX.
// Wir lauschen darauf, dass der Erfolgsblock sichtbar wird.
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>
Der Custom-Event-Aufruf ist window.zenovay('track', '<event_name>', { ...properties }) — das erste Argument ist der Literal-Befehl 'track', dann der Event-Name, dann ein optionales Properties-Objekt.
Erstellen Sie dann ein Custom-Event-Goal in Zenovay:
- Öffnen Sie das Dashboard Ihrer Website, gehen Sie zur Registerkarte Journeys → Goals, und klicken Sie auf Goal hinzufügen.
- Wählen Sie Custom event als Goal-Typ.
- Setzen Sie den Event-Namen auf
form_submitted(muss dem Namen im Skript entsprechen).
Wenn Sie nur ein Formular tracken möchten, senden Sie pro Formular einen eindeutigen Event-Namen (z. B. contact_form_submitted) und erstellen Sie für jedes ein Goal.
Verifizieren, dass es funktioniert
Reichen Sie das Formular auf Ihrer Live-Site ein. Innerhalb von ~30 Sekunden:
- Neue Aktivität sollte auf der Registerkarte Live View des Website-Dashboards erscheinen.
- Der Goal-Counter sollte auf der Registerkarte Journeys → Goals neben dem erstellten Goal hochzählen.
Häufige Fallstricke
- Formular schlägt Validierung fehl — Ansatz 1 feuert nicht, weil es keinen Redirect gibt. Ansatz 2 feuert nicht, weil der Erfolgsblock verborgen bleibt. Das ist korrektes Verhalten — nur erfolgreiche Submissions sollen zählen.
- Webflow-CMS-Formulare — gleicher Ansatz; das
data-name-Attribut kann vom Formularnamen im Editor abweichen. - Mehrere Formulare auf einer Seite — beide Ansätze handhaben das. In Ansatz 2 ermöglicht die Eigenschaft
form_id(oder ein Pro-Formular-Event-Name), sie im Dashboard zu unterscheiden.