6 Min. Lesedauer

Webflow-Integration

Fügen Sie Zenovay in unter drei Minuten zu jeder Webflow-Website hinzu. Webflows erstklassige Custom Code-Unterstützung macht dies zu einer der saubersten Integrationen eines CMS — einfügen, veröffentlichen, fertig.

Webflow Custom Code erfordert einen bezahlten Site Plan (Basic, CMS, Business oder Ecommerce) für die Website selbst. Workspace-Pläne allein sind nicht ausreichend.

Schnellstart

Schritt	Wo	Was Sie tun
1	Zenovay Dashboard	Kopieren Sie Ihr Tracking-Snippet
2	Webflow Designer → Site settings → Custom code	Fügen Sie es in Head code ein
3	Auf `*.webflow.io` oder Ihrer eigenen Domain veröffentlichen	Klicken Sie auf Publish
4	Zenovay Dashboard	Echtzeit-Besucher erscheinen innerhalb von ~30 Sekunden

Methode 1: Seitenweiter Custom Code (Empfohlen)

Webflow ermöglicht es Ihnen, HTML in den <head> jeder Seite Ihrer Website über Site Settings einzufügen. Dies ist der empfohlene Ansatz für jede Analyse- oder Marketing-Pixel-Integration.

Schritt für Schritt

Öffnen Sie Ihr Projekt im Webflow Designer.
Klicken Sie auf das Zahnrad-Symbol in der linken Seitenleiste, um Site Settings zu öffnen.
Gehen Sie zum Tab Custom Code.
Fügen Sie im Feld Head code Folgendes ein:

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

Scrollen Sie nach unten und klicken Sie auf Save Changes.
Kehren Sie zum Designer zurück und klicken Sie auf Publish (oben rechts) → wählen Sie Ihre Domains → Publish to Selected Domains.

Überprüfen

Öffnen Sie Ihre veröffentlichte Website im Inkognito-Modus und zeigen Sie den Quelltext an — Sie sollten <script defer data-tracking-code=...> nahe dem Anfang von <head> sehen. Ihr Besuch sollte in der Zenovay Echtzeit-Ansicht innerhalb von 30 Sekunden erscheinen.

Methode 2: Seitenspezifischer Custom Code

Wenn Sie nur eine Teilmenge von Seiten verfolgen möchten (z. B. Landing Pages, nicht das Docs-Unterverzeichnis), unterstützt Webflow seitenspezifischen Head Code:

Wählen Sie im Designer die Seite im linken Pages-Panel aus.
Klicken Sie auf das Zahnrad-Symbol neben dem Seitennamen → Page Settings.
Scrollen Sie zu Custom Code → Inside <head> tag.
Fügen Sie dasselbe Snippet dort ein.
Speichern und veröffentlichen.

Seitenspezifischer Custom Code wird nach dem seitenweiten Code angehängt. Wenn Sie also in beide Bereiche einfügen, werden Besuche doppelt gezählt. Wählen Sie einen Bereich.

Benutzerdefinierte Ereignisse verfolgen

Nachdem das Skript geladen ist (es ist verzögert, warten Sie also auf DOMContentLoaded), können Sie window.zenovay() aus einem beliebigen Inline-Skript oder Webflow-Interaktionen-Custom-Code aufrufen:

CTA-Klick verfolgen

Fügen Sie ein HTML Embed-Element neben Ihrer CTA-Schaltfläche ein:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta]');
    if (!cta) return;
    cta.addEventListener('click', () => {
      if (window.zenovay) {
        window.zenovay('track', 'cta_clicked', {
          location: cta.dataset.zvCta,
          page: window.location.pathname,
        });
      }
    });
  });
</script>

Fügen Sie dann data-zv-cta="hero-primary" zu Ihrer Schaltfläche im Designer hinzu (über den Abschnitt Custom attributes in den Element-Einstellungen).

Formular-Absendungen verfolgen

Webflow-native Formulare senden ein submit-Ereignis aus, auf das Sie reagieren können:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form[data-name]').forEach(form => {
      form.addEventListener('submit', () => {
        if (window.zenovay) {
          window.zenovay('track', 'form_submitted', {
            form_name: form.getAttribute('data-name'),
            page: window.location.pathname,
          });
        }
      });
    });
  });
</script>

Eingeloggte Benutzer identifizieren (Memberstack, Outseta, Memberspace)

Wenn Sie ein Webflow-Mitgliedschafts-Add-on verwenden, identifizieren Sie den Besucher, sobald seine Sitzung bekannt ist. Mit Memberstack:

<script>
  window.$memberstackDom?.getCurrentMember().then(({ data: member }) => {
    if (member && window.zenovay) {
      window.zenovay('identify', {
        userId: member.id,
        email: member.auth?.email,
        plan: member.planConnections?.[0]?.planName,
      });
    }
  });
</script>

Webflow Ecommerce verfolgen

Wenn Sie über Webflow Ecommerce verkaufen, lösen Sie ein purchase-Ereignis auf der Bestellbestätigungsseite (/order-confirmation/[order-id]) aus:

Fügen Sie ein HTML Embed-Element zu Ihrer Bestellbestätigungs-Seitenvorlage hinzu.
Fügen Sie Folgendes ein:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const total = document.querySelector('[data-wf-order-total]')?.textContent;
    const orderId = window.location.pathname.split('/').pop();
    if (window.zenovay && total) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue: parseFloat(total.replace(/[^0-9.]/g, '')),
        currency: 'USD', // anpassen, wenn Ihr Shop eine andere Währung verwendet
      });
    }
  });
</script>

Für hochpräzise Umsatzzuordnung (Rückerstattungen, Steuern, Abonnements) verwenden Sie stattdessen serverseitige Webhooks von Ihrem Stripe- oder Webflow Ecommerce-Konto — clientseitiges Tracking kann Bestellungen verpassen, wenn der Käufer den Tab schließt.

Plan-Voraussetzungen

Webflow Starter (kostenlos): Custom Code ist deaktiviert. Upgraden Sie auf einen bezahlten Site Plan.
Webflow Basic / CMS / Business / Ecommerce: Custom Code ist vollständig aktiviert.
Nur Workspace-Plan: Nicht ausreichend — Sie benötigen einen Site Plan für die eigentliche Website.

Häufige Stolpersteine

Site Settings vs. Page Settings. Seitenweiter Head Code gilt für jede Seite einschließlich 404-, Such- und Passwortseiten. Seitenspezifischer Head Code gilt nur für diese Seite. Wenn Sie einen Tracker für die gesamte Website wünschen, verwenden Sie Site Settings — vermischen Sie keine Bereiche.

Webflow entfernt <script>-Tags in .webflow.io-Vorschauen, wenn Ihr Plan kein Custom Code einschließt. Stellen Sie sicher, dass Sie einen bezahlten Site Plan haben, bevor Sie testen.

Das Snippet wird nach den Webflow-Interaktionen ausgeführt. Zenovay ist verzögert, lädt also nach dem ersten Render. Dies ist beabsichtigt — es bedeutet, dass wir das Rendering nicht blockieren. Wenn Sie ein Ereignis auslösen möchten, bevor Zenovay geladen wird, stellen Sie es in die Warteschlange: window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

<script> innerhalb von HTML Embed-Elementen wird ausgeführt. Webflow erlaubt dies, aber beachten Sie, dass Sie versehentlich eine Doppelinstallation verursachen können, wenn Sie das Snippet in ein Embed statt in Site Settings → Custom Code einfügen. Verwenden Sie Site Settings für den Tracker; verwenden Sie Embeds nur für seitenspezifisches Ereignis-Tracking.

Webflows veröffentlichtes HTML wird stark am Edge gecacht. Warten Sie 1–2 Minuten nach Publish vor dem Testen. Erzwingen Sie eine Aktualisierung mit Cmd/Ctrl+Shift+R.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Lösung
Keine Daten	Custom Code im Plan deaktiviert	Upgraden Sie auf einen bezahlten Site Plan
Keine Daten	Website seit dem Hinzufügen des Snippets nicht veröffentlicht	Klicken Sie im Designer auf Publish
Nur die Hälfte der Seiten wird verfolgt	Seitenspezifischer Head Code überschreibt den seitenweiten	Verschieben Sie das Snippet nur in Site Settings
Doppelte Seitenaufrufe	Snippet in Site Settings und HTML Embed eingefügt	Entfernen Sie eine Instanz
Ereignisse werden nicht ausgelöst	Benutzerdefiniertes Ereignis-Skript wurde vor Zenovay-Ladevorgang ausgeführt	In `DOMContentLoaded` einschließen

Datenschutz & Compliance

Fügen Sie data-cookieless="true" zum Snippet hinzu, um im vollständig Cookie-freien Modus zu laufen (keine Cookies, kein Local Storage) — erforderlich für viele EU/UK-Deployments, bevor eine Einwilligung gespeichert wird:

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

Weitere Details finden Sie unter Datenschutz-Compliance.

Weiterführende Ressourcen

Brauchen Sie Hilfe? Kontaktieren Sie [email protected] oder besuchen Sie unser Help Center.