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 — dies ist das erwartete Verhalten.
Custom Code wird nur auf der veröffentlichten Framer-Website wirksam. Die Vorschau ignoriert Custom Code immer. Testen Sie stets die Live-URL, nicht die Editor-Vorschau.
Schnellstart
- Kopieren Sie Ihr Tracking-Snippet aus dem Zenovay Dashboard.
- Öffnen Sie in Framer Site Settings → General → Custom Code.
- Fügen Sie es in Start of
<head>tag ein. - Klicken Sie oben rechts auf Publish.
Installation
Seitenweiter Custom Code (empfohlen)
- Öffnen Sie Ihr Projekt in Framer.
- Klicken Sie auf Site Settings (Zahnrad-Symbol oben im linken Panel).
- Öffnen Sie den Tab General.
- Scrollen Sie zu Custom Code.
- Fügen Sie dieses Snippet in Start of
<head>tag 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 auf Publish.
Seitenspezifischer Custom Code
Für Tracking nur auf bestimmten Seiten:
- Wählen Sie die Seite im Pages-Panel aus.
- Öffnen Sie die rechten Seiteneinstellungen.
- Scrollen Sie zu Custom Code → Start of
<head>tag. - Fügen Sie das Snippet ein.
- Veröffentlichen.
Kombinieren Sie nicht seitenweite und seitenspezifische Snippets — es kommt zur doppelten Zählung.
Installation überprüfen
- Öffnen Sie die veröffentlichte Framer-URL (
*.framer.appoder Ihre eigene Domain) im Inkognito-Modus. - Zeigen Sie den Quelltext an und suchen Sie nach
<script defer data-tracking-code=...>im<head>. - Prüfen Sie die Zenovay Echtzeit-Ansicht — Ihr Besuch erscheint innerhalb von ~30 Sekunden.
SPA-Navigation wird automatisch verarbeitet
Framer rendert Seiten als React SPA. Der Zenovay-Tracker (v2+) hört auf history.pushState, history.replaceState und popstate und löst bei jedem Routenwechsel automatisch einen Seitenaufruf aus. Sie müssen window.zenovay('page') nicht manuell aufrufen.
Benutzerdefinierte Ereignisse über Code Overrides verfolgen
Erstellen Sie einen Code Override, der eine beliebige Framer-Komponente umschließt:
import type { ComponentType } from 'react';
export function withCtaTracking(Component): ComponentType {
return (props) => (
<Component
{...props}
onClick={(e) => {
props.onClick?.(e);
// @ts-ignore — global injected by tracker
window.zenovay?.('track', 'cta_clicked', {
location: props.id || 'unknown',
page: window.location.pathname,
});
}}
/>
);
}
Anwenden über Frame → Code Overrides → withCtaTracking.
Formular-Absendungen verfolgen
Hängen Sie einen delegierenden Listener an document an, um jede native Formular-Absendung zu erfassen:
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',
});
};
document.addEventListener('submit', handler, true);
return () => document.removeEventListener('submit', handler, true);
}, []);
return null;
}
Fehlerbehebung
Vorschau zeigt keine Daten. Custom Code wird nur auf der veröffentlichten Website ausgeführt. Testen Sie stets die Live-URL.
Keine Daten im kostenlosen Plan. Custom Code erfordert einen bezahlten Framer-Plan (Mini und höher).
Editor-Traffic verunreinigt Analysen. Framers CMS-Vorschau lädt mit ?framer-publish=true. Filtern Sie diesen Query-String mithilfe von gespeicherten Segmenten in Ihrem Dashboard heraus.
Ereignisse werden ausgelöst, aber Seitenaufrufe nicht bei Routenwechsel. Sie verwenden eine ältere Tracker-Version. Kopieren Sie das Snippet erneut aus Ihrem Zenovay Dashboard, um den v2-Tracker zu erhalten, der die SPA-Navigation automatisch verarbeitet.
Plan-Voraussetzungen
| Plan | Custom Code |
|---|---|
| Free | ❌ |
| Mini | ✅ |
| Basic / Pro / Business | ✅ |
Datenschutz
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>
Nächste Schritte
- Lesen Sie den vollständigen Framer-Integrations-Leitfaden auf docs.zenovay.com für erweiterte Code Override-Muster.
- Richten Sie Konversionsziele ein.
- Brauchen Sie Hilfe? Kontaktieren Sie [email protected].