Zum Hauptinhalt springen
Kostenlos5 minutesEinsteiger

Wie installiere ich Zenovay auf Webflow?

Schritt-für-Schritt-Anleitung zum Hinzufügen des Zenovay-Trackers zu einer Webflow-Site über das integrierte Custom-Code-Panel. Kein Plugin erforderlich.

webflowinstallationcmsno-codetracking
Zuletzt aktualisiert:

Webflow macht das Hinzufügen von Zenovay einfach — es ist kein Plugin zu installieren. Sie fügen das Tracker-Tag in das „Head Code"-Panel der Site ein und veröffentlichen.

Schritte

  1. Tracking-Code kopieren

    Melden Sie sich bei app.zenovay.com an, öffnen Sie Ihr Website-Dashboard und gehen Sie zu Einstellungen → Allgemein. Ihr Tracking-Snippet wird dort angezeigt — kopieren Sie den Tracking-Code (er sieht etwa so aus: zv_abc123xyz).

  2. Webflow-Site-Einstellungen öffnen

    Klicken Sie im Webflow-Designer auf den Projektnamen oben links und wählen Sie Site settings. Wechseln Sie dann zum Tab Custom code.

  3. Tracker in Head Code einfügen

    Fügen Sie im Feld Head code Folgendes ein:

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

    Ersetzen Sie YOUR_TRACKING_CODE durch den Wert aus Schritt 1.

  4. Änderungen speichern

    Klicken Sie oben im Panel auf Save changes.

  5. Site veröffentlichen

    Klicken Sie oben rechts auf Publish und wählen Sie Ihre Live-Domain. Der Tracker wird nur auf der veröffentlichten Site ausgelöst, nicht auf dem webflow.io-Staging — Staging-Besuche verschmutzen Ihre Daten jedoch ebenfalls nicht.

Funktionsprüfung

  1. Öffnen Sie Ihre Live-Webflow-Site in einem Inkognito-Fenster.
  2. Warten Sie 30 Sekunden.
  3. Öffnen Sie Ihr Website-Dashboard und wählen Sie den Tab Live View — Ihr Besuch sollte mit der korrekten Standortangabe erscheinen.

Falls nicht, siehe Installation überprüfen.

Conversions und Formularübermittlungen tracken

Webflows native Form-Submission- und Click-Events rufen Zenovay nicht automatisch auf. Um ein benutzerdefiniertes Event zu tracken (zum Beispiel eine „Demo angefragt"-Formularübermittlung), fügen Sie auf der Seite einen Embed-Block hinzu mit:

<script>
  document.querySelector('#your-form-id').addEventListener('submit', function() {
    window.zenovay('track', 'demo_requested', { form: 'hero_cta' });
  });
</script>

Ersetzen Sie #your-form-id durch den Selector des Formulars und demo_requested durch Ihren Eventnamen.

CSP- und Performance-Tipps

  • Webflow erlaubt den Tracker standardmäßig — keine CSP-Änderungen erforderlich, es sei denn, Sie haben über eine Webflow-Custom-Domain-Integration einen eigenen Content-Security-Policy-Header hinzugefügt.
  • Der Tracker wird mit defer geladen und blockiert Ihren initialen Render nicht.
  • Der Tracker ist ein kleines, einzelnes Skript und wird asynchron geladen, sodass er Ihre Lighthouse-Werte vernachlässigbar beeinflusst.

Weiterführende Lektüre

War dieser Artikel hilfreich?