6 Min. Lesedauer

Framer-Integration

Fügen Sie Zenovay über Site Settings → Custom Code zu jeder Framer-Website hinzu. Das Snippet wird nur auf der veröffentlichten Website ausgeführt — die Vorschau ignoriert Custom Code, was normal ist.

Custom Code ist auf allen bezahlten Framer-Plänen (Mini und höher) verfügbar. Kostenlose Framer-Websites können keine Skripte von Drittanbietern hinzufügen.

Schnellstart

Schritt	Wo	Was Sie tun
1	Zenovay Dashboard	Kopieren Sie Ihr Tracking-Snippet
2	Framer → Site Settings → General → Custom Code	Fügen Sie es in Start of `<head>` tag ein
3	Veröffentlichen	Klicken Sie oben rechts auf Publish
4	Zenovay Dashboard	Echtzeit-Besucher erscheinen innerhalb von ~30 Sekunden

Methode 1: Seitenweiter Custom Code (Empfohlen)

Framers Custom Code-Panel fügt HTML direkt in jede veröffentlichte Seite ein. Dies ist der empfohlene Ansatz für jede Analyse- oder Marketing-Tag-Integration.

Schritt für Schritt

Öffnen Sie Ihr Projekt in Framer.
Klicken Sie auf Site Settings (Zahnrad-Symbol oben im linken Panel).
Öffnen Sie den Tab General, falls er noch nicht geöffnet ist.
Scrollen Sie zu Custom Code.
Fügen Sie in Start of <head> tag Folgendes ein:

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

Klicken Sie außerhalb des Feldes, um automatisch zu speichern.
Klicken Sie oben rechts im Editor auf Publish. Custom Code gilt nicht für die Vorschau-URL — nur für die live veröffentlichte Website.

Überprüfen

Öffnen Sie die veröffentlichte Framer-URL (*.framer.app oder Ihre eigene Domain) 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

Für seitenspezifisches Tracking (z. B. nur Ihre Kampagnen-Landing-Pages) stellt Framer auch seitenspezifischen Custom Code zur Verfügung:

Wählen Sie die Seite im Pages-Panel aus.
Öffnen Sie das rechte Seitenpanel und scrollen Sie zu Custom Code.
Fügen Sie das Snippet in Start of <head> tag für diese Seite ein.
Veröffentlichen.

Seitenspezifischer Custom Code wird nach dem seitenweiten Code angehängt. Fügen Sie den Tracker nicht in beiden Bereichen ein — es kommt zur doppelten Zählung.

Benutzerdefinierte Ereignisse verfolgen

Framer rendert Seiten als React SPA, aber der Tracker verarbeitet die SPA-Navigation automatisch (er hört auf history.pushState). Für benutzerdefinierte Ereignisse können Sie window.zenovay() aus jedem Framer Code Override oder Code Component aufrufen.

CTA-Klick mit einem Code Override verfolgen

Erstellen Sie einen neuen Code Override in Framer:

import type { ComponentType } from 'react';

export function withCtaTracking(Component): ComponentType {
  return (props) => {
    return (
      <Component
        {...props}
        onClick={(e) => {
          props.onClick?.(e);
          // @ts-ignore – global injected by tracker
          window.zenovay?.('track', 'cta_clicked', {
            location: props.id || 'unknown',
            page: typeof window !== 'undefined' ? window.location.pathname : '',
          });
        }}
      />
    );
  };
}

Wenden Sie den Override auf Ihren CTA-Frame über Frame → Code Overrides → withCtaTracking an.

Formular-Absendungen verfolgen

Framer Forms senden über einen versteckten Iframe ab. Hören Sie auf das submit-Ereignis des Formulars in einem Code Override oder in einem globalen Override, der an den Seitenursprung angehängt ist:

import { useEffect } from 'react';

export function useTrackFormSubmits() {
  useEffect(() => {
    const handler = (e: Event) => {
      const form = e.target as HTMLFormElement;
      if (!form?.matches('form')) return;
      // @ts-ignore
      window.zenovay?.('track', 'form_submitted', {
        form_id: form.id || form.getAttribute('name') || 'unnamed',
        page: window.location.pathname,
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

Eingeloggte Benutzer identifizieren (bei Verwendung von Framer Auth oder einem Drittanbieter)

Wenn Sie Framer mit einem externen Auth-Anbieter (Memberstack, Outseta, Clerk usw.) verbunden haben, rufen Sie window.zenovay('identify', ...) aus dem onSignIn-Callback des Auth-Anbieters auf. Es gibt kein natives Auth in Framer, in das Sie sich direkt einklinken könnten.

Plan-Voraussetzungen

Plan	Custom Code	Eigene Domain
Free	❌	❌
Mini	✅	✅
Basic	✅	✅
Pro	✅	✅
Business	✅	✅

Häufige Stolpersteine

Vorschau ignoriert Custom Code. Dies ist die häufigste Überraschung. Die Framer-Editor-Vorschau (die Play-Schaltfläche) rendert die Seite ohne Ihren Custom Code. Sie müssen auf Publish klicken und die Live-URL testen — beim Testen der Vorschau wird immer angezeigt, dass kein Zenovay-Skript geladen wurde.

Localhost / eigene Domains. Wenn Sie eine eigene Domain über Framers Hosting verwenden, funktioniert Custom Code genauso wie auf *.framer.app. Wenn Sie Framer als statisches HTML exportieren, um es selbst zu hosten, müssen Sie das Snippet manuell in Ihre exportierte index.html einfügen — Framers statischer Export enthält derzeit keinen Custom Code im Bundle.

SPA-Navigation wird verarbeitet. Framer basiert auf React. Der Zenovay-Tracker (ab Version 2) hört auf history.pushState und löst bei jedem Routenwechsel einen Seitenaufruf aus, sodass Sie window.zenovay('trackPageView') nicht manuell aufrufen müssen.

Lazy-geladene Abschnitte. Framers Muster „beim Scrollen einblenden" wirkt sich nicht auf den Tracker aus — das Skript befindet sich in <head> und wird beim ersten Rendering unabhängig von der Sichtbarkeit der Abschnitte ausgeführt.

Test-Modus-Rauschen. Framers CMS-Vorschau lädt Seiten mit dem Query-String ?framer-publish=true. Wenn Sie Editor-Traffic ausschließen möchten, filtern Sie diesen Query-String auf Dashboard-Ebene über gespeicherte Segmente heraus.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Lösung
Vorschau zeigt keine Daten	Custom Code wird nur auf der veröffentlichten Website ausgeführt	Klicken Sie auf Publish und testen Sie die Live-URL
Keine Daten im kostenlosen Plan	Custom Code bei Free deaktiviert	Upgraden Sie auf Mini oder höher
Einige Seiten werden verfolgt, andere nicht	Seitenspezifischer Custom Code überschreibt	Auf seitenweiten Custom Code umsteigen
Doppelte Seitenaufrufe	Snippet im seitenweiten und im seitenspezifischen Slot	Einen Bereich wählen
Ereignisse werden ausgelöst, aber keine Seitenaufrufe	Tracker-Version älter als v2 (keine SPA-Unterstützung)	Snippet erneut aus dem Dashboard kopieren

Datenschutz & Compliance

Für Cookie-freies Tracking fügen Sie data-cookieless="true" hinzu:

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