6 Min. Lesedauer

Webflow Integration

Füge Zenovay zu jeder Webflow-Website in weniger als drei Minuten hinzu. Webflow's Custom Code Funktion ermöglicht die Installation ohne Framework-Setup: Snippet einfügen, veröffentlichen, fertig.

Webflow Custom Code erfordert einen bezahlten Site Plan (Basic, CMS, Business oder Ecommerce) auf der Website selbst. Nur Workspace-Pläne reichen nicht aus.

Schnellstart

Schritt	Wo	Was Du tust
1	Zenovay Dashboard	Kopiere Dein Tracking-Snippet
2	Webflow Designer → Site Settings → Custom Code	Füge es in Head code ein
3	Veröffentliche auf Deiner `*.webflow.io` oder Custom Domain	Klicke Publish
4	Zenovay Dashboard	Echtzeitbesucher erscheinen in ~30 Sekunden

Methode 1: Website-weiter Custom Code (Empfohlen)

Webflow ermöglicht die Injection von HTML in den <head> jeder Seite auf Deiner Website über Site Settings. Dies ist der unterstützte Ansatz für beliebige Analytics- oder Marketing-Pixel.

Schritt-für-Schritt

Öffne Dein Projekt im Webflow Designer.
Klicke das Zahnrad-Symbol in der linken Seitenleiste, um Site Settings zu öffnen.
Gehe zum Tab Custom Code.
Füge in das Feld Head code ein:

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

Tracking-Skript-Karte mit dem Snippet in HTML-, React-, Next.js- und First-Party-Tabs — Finde Dein Tracking-Snippet in Zenovay: öffne Domains, wähle Deine Website und gehe zu ihrer General-Seite.

Scrolle nach unten und klicke Save Changes.
Kehre zum Designer zurück und klicke Publish (oben rechts) → wähle Deine Domains → Publish to Selected Domains.

Überprüfung

Öffne Deine veröffentlichte Website im Inkognito-Modus und zeige die Quelle an – Du solltest das <script defer data-tracking-code=...> oben in <head> sehen. Dein Besuch sollte in der Zenovay Echtzeitansicht innerhalb von 30 Sekunden erscheinen.

Methode 2: Seiten-spezifischer Custom Code

Falls Du nur eine Teilmenge von Seiten verfolgen möchtest (z.B. Landing Pages, nicht das Docs-Verzeichnis), unterstützt Webflow Head code pro Seite:

Wähle im Designer die Seite im linken Pages Panel.
Klicke das Zahnrad-Symbol neben dem Seitennamen → Page Settings.
Scrolle zu Custom Code → Inside <head> tag.
Füge das gleiche Snippet ein.
Speichere und veröffentliche.

Seiten-spezifischer Custom Code wird nach Website-weitem Code angehängt, daher wirst Du doppelt zählen, falls Du an beiden Stellen einfügst. Wähle einen Umfang.

Tracking von benutzerdefinierten Events

Nach dem Laden des Skripts (es ist deferred, also warte auf DOMContentLoaded), kannst Du window.zenovay() von jedem Inline-Skript oder Webflow-Interaktionen mit benutzerdefiniertem Code aufrufen:

Verfolge einen CTA-Klick

Lege ein HTML Embed Element neben Deinen CTA-Button:

<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üge dann data-zv-cta="hero-primary" zu Deinem Button im Designer hinzu (über den Custom attributes Abschnitt in den Element-Einstellungen).

Verfolge Formularübermittlungen

Webflow native Formulare senden ein submit Event, das Du überwachen kannst:

<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>

Identifiziere angemeldete Benutzer (Memberstack, Outseta, Memberspace)

Falls Du ein Webflow-Membership-Add-on nutzt, identifiziere 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>

Tracking von Webflow Ecommerce

Falls Du über Webflow Ecommerce verkaufst, löse ein purchase Event auf der Bestellbestätigungs-Seite aus (/order-confirmation/[order-id]):

Füge ein HTML Embed zu Deinem Order Confirmation Seiten-Template hinzu.
Füge 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', // passe dies an, wenn Dein Shop eine andere Währung nutzt
      });
    }
  });
</script>

Nutze für hohe Genauigkeit bei der Umsatzzuordnung (Erstattungen, Steuern, Abos) Server-seitige Webhooks zu Zenovay von Deinem Stripe oder Webflow Ecommerce Konto – Client-seitige Verfolgung kann Bestellungen verpassen, falls der Käufer den Tab schließt.

Plan-Anforderungen

Webflow Starter (kostenlos): Custom Code ist deaktiviert. Führe ein Upgrade auf einen bezahlten Site Plan durch.
Webflow Basic / CMS / Business / Ecommerce: Custom Code ist vollständig aktiviert.
Nur Workspace Plan: nicht ausreichend – Du brauchst einen Site Plan auf der tatsächlichen Website.

Häufige Probleme

Site Settings vs. Page Settings. Website-weiter Head code gilt für jede Seite einschließlich 404-, Such- und Passwort-Seiten. Seiten-spezifischer Head code gilt nur für diese Seite. Falls Du einen Tracker für die ganze Website möchtest, nutze Site Settings – vermische Umfänge nicht.

Webflow entfernt <script> Tags in .webflow.io Vorschauen, wenn Dein Plan Custom Code nicht enthält. Stelle sicher, dass Du auf einem bezahlten Site Plan bist, bevor Du testest.

Das Snippet wird nach Webflow's Interaktionen ausgeführt. Zenovay ist deferred, daher wird es nach dem ersten Render geladen. Das ist beabsichtigt – es bedeutet, dass wir das Rendern nicht blockieren. Falls Du ein Event vor dem Laden von Zenovay auslösen möchtest, queue es: window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

<script> innerhalb von HTML Embed Elementen wird ausgeführt. Webflow erlaubt es, aber sei Dir bewusst, dass Du versehentlich doppelt installieren kannst, falls Du das Snippet in ein Embed statt in Site Settings → Custom Code einfügst. Nutze Site Settings für den Tracker; nutze Embeds nur für seiten-spezifische Event-Verfolgung.

Webflow's veröffentlichtes HTML ist stark am Edge gecacht. Erlaube 1–2 Minuten nach Publish bevor Du testest. Erzwinge einen Refresh mit Cmd/Ctrl+Shift+R.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Behebung
Keine Daten	Custom Code ist im Plan deaktiviert	Upgrade auf einen bezahlten Site Plan
Keine Daten	Website nicht veröffentlicht, seit das Snippet hinzugefügt wurde	Klicke Publish im Designer
Nur halb verfolgt	Seiten-spezifischer Head code überschreibt Site-Level	Verschiebe Snippet nur zu Site Settings
Doppelte Seitenaufrufe	Snippet in Site Settings und HTML Embed eingefügt	Entferne eine
Events werden nicht ausgelöst	Custom Event Script wurde vor Zenovay Laden ausgeführt	Umhülle mit `DOMContentLoaded`

Datenschutz & Compliance

Füge data-cookieless="true" zum Snippet hinzu, um vollständig im Cookie-freien Modus zu laufen (keine Cookies, kein lokaler Speicher) – erforderlich für viele EU/UK-Deployments vor jeder Zustimmung:

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

Siehe Privacy Compliance für die vollständige Übersicht.