Pixelflow
Framer

Framer Setup (ohne Plugin)

Diese Anleitung zeigt Ihnen, wie Sie die Facebook Conversions-API auf Framer einrichten, indem Sie das PixelFlow-Skript manuell zum benutzerdefinierten Code Ihrer Website hinzufügen. Diese Methode ermöglicht Ihnen die direkte Kontrolle über die Skriptplatzierung ohne Verwendung des Plugins.

Wünschen Sie eine einfachere Einrichtung? Das PixelFlow Framer-Plugin bietet eine automatische Installation und Verwaltung über den Framer Marketplace.

Voraussetzungen

  • Framer-Projektzugriff mit Berechtigungen zum Bearbeiten der Website-Einstellungen

  • Aktives PixelFlow-Konto (starten Sie eine kostenlose 7-Tage-Testversion)

  • Admin-Zugriff auf den Meta Business Manager mit Ihrer Pixel-ID und Ihrem Zugriffs-Token

  • Entfernen Sie alle vorhandenen Facebook-Pixel-Skripte, um doppeltes Tracking zu vermeiden

1. Erstellen Sie Ihre Website im PixelFlow-Dashboard

  1. Loggen Sie sich in Ihr PixelFlow-Dashboard ein

  2. Klicken Sie auf Add New Site oder navigieren Sie zum Pixel Setup-Assistenten

  3. Wählen Sie Framer als Ihre Plattform aus

  4. Geben Sie Ihre Website-Domain ein (beginnend mit https://)

  5. Wählen Sie Ihre Währung (optional, wird für das E-Commerce-Tracking verwendet)

  6. Klicken Sie auf Continue

Ihre Framer-Website ist nun in PixelFlow registriert und bereit für die Skript-Installation.

2. Verbinden Sie Ihren Meta-Pixel

  1. Geben Sie Ihren Pixel-Namen ein (ein beliebiger Name zur Identifizierung)

  2. Fügen Sie Ihre Pixel-ID hinzu (diese finden Sie im Facebook Events Manager)

  3. Fügen Sie Ihr Meta Pixel Access Token hinzu (generieren Sie dieses in den Einstellungen des Events Managers)

  4. Bestätigen Sie, dass Sie alle vorhandenen nativen Meta-Pixel entfernt haben

  5. Klicken Sie auf Save oder Add Pixel

Benötigen Sie Hilfe beim Finden der Zugangsdaten? Schauen Sie sich unsere Anleitung an: So finden Sie Ihr Pixel und generieren Ihr Zugriffs-Token.

PixelFlow lädt sowohl Ihren Facebook-Pixel als auch die Conversions-API gleichzeitig mit automatischer Event-Deduplizierung, sodass Sie bestehende Pixel-Skripte sicher entfernen können.

3. Kopieren Sie Ihr PixelFlow-Skript

Im Installationsschritt des PixelFlow-Dashboards:

  1. Sie sehen ein benutzerdefiniertes Skript, das für Ihre Website generiert wurde

  2. Klicken Sie auf Copy Script, um das gesamte Code-Snippet in Ihre Zwischenablage zu kopieren

Das Skript wird in etwa so aussehen:

<script src="https://cdn.pixelflow.so/script.js?pixel=YOUR_PIXEL_ID"></script>

4. Skript zum benutzerdefinierten Code in Framer hinzufügen

Nun fügen Sie das PixelFlow-Skript zum Bereich für benutzerdefinierten Code Ihrer Framer-Website hinzu:

  1. Klicken Sie im Framer-Projekt-Editor auf das Menü-Symbol (drei Punkte) in der oberen Symbolleiste

  2. Wählen Sie Site Settings aus dem Dropdown-Menü

  3. Wählen Sie Custom Code und klicken Sie auf das „+“-Symbol

  1. Geben Sie PixelFlow als Namen ein

  2. Wählen Sie End of <head> für die Platzierung

  1. Wählen Sie All für die Seite und Once für die Ausführung

  2. Fügen Sie das PixelFlow-Code-Snippet in das Feld Code ein und drücken Sie auf Add

5. Veröffentlichen Sie Ihre Framer-Website

  1. Klicken Sie im Framer-Editor auf die Schaltfläche Publish in der oberen Symbolleiste

  2. Klicken Sie auf Update, um Ihre Änderungen auf Ihrer Live-Site zu veröffentlichen

Skript bereitgestellt! Das PixelFlow-Skript ist nun auf Ihrer Live-Framer-Website aktiv und wird auf jeder Seite geladen.

Automatische Updates: Ihr Skript wird automatisch aktualisiert, wenn PixelFlow Verbesserungen veröffentlicht. Besucher erhalten Updates sofort, während aktive Nutzer sie innerhalb von 1 Minute erhalten, wenn der Cache aktualisiert wird.

6. Überprüfen Sie Ihre Einrichtung

Testen Sie, ob die Events korrekt erfasst werden:

  1. Öffnen Sie Ihre Live-Site in einem neuen Browserfenster oder im Inkognito-/Privatmodus

  2. Navigieren Sie durch einige Seiten (Startseite, dann herumklicken)

  3. Warten Sie 2–3 Minuten, bis die Events verarbeitet wurden

  4. Überprüfen Sie die Seite Events in Ihrem PixelFlow-Dashboard

  5. Vergewissern Sie sich, dass PageView-Events mit den korrekten URLs erscheinen

  6. Prüfen Sie den Facebook Events Manager sowohl auf „Browser“ als auch auf „Server“ Events

Sehen Sie Events? Einrichtung abgeschlossen! PixelFlow trackt nun Seitenaufrufe auf Ihrer Framer-Website.

Detaillierte Schritte zur Verifizierung und Fehlerbehebung finden Sie unter So testen und verifizieren Sie Ihr PixelFlow CAPI-Setup.

7. Zusätzliches Tracking konfigurieren

Sobald die Seitenaufrufe funktionieren, können Sie weitere Events tracken:

Formularabsendungen und Button-Klicks tracken:

  • Verwenden Sie Event-Klassen in den Framer Code Overrides

  • Siehe Event-Klassen in Framer für eine detaillierte Einrichtung mit TypeScript-Beispielen

Bestimmte Seitenbesuche oder URLs tracken:

  • Konfigurieren Sie Tracking-URLs in Ihrem PixelFlow-Dashboard

  • Siehe So tracken Sie Events für die Einrichtungsanweisungen

Kalenderbuchungen tracken:

  • Verbinden Sie Calendly oder TidyCal für automatische Lead-/Schedule-Events

  • Konfigurieren Sie dies in Ihrem PixelFlow-Dashboard unter Integrations

Sämtliches Tracking ist in jedem PixelFlow-Plan unbegrenzt – keine Limits für Events, Pixel oder Subdomains.

Fehlerbehebung

Symptom

Wahrscheinliche Ursache

Lösung

Keine Events im PixelFlow-Dashboard sichtbar

Skript nicht veröffentlicht oder an falscher Stelle hinzugefügt

Überprüfen Sie, ob sich das Skript im „End of head tag“ befindet und Sie Ihre Framer-Website veröffentlicht haben. Prüfen Sie die Browser-Konsole (F12) auf Fehler.

Events erscheinen nicht im Facebook Events Manager

Falsche Pixel-ID oder Zugriffs-Token

Überprüfen Sie, ob die Anmeldedaten im PixelFlow-Dashboard mit denen im Facebook Events Manager übereinstimmen. Generieren Sie das Zugriffs-Token bei Bedarf neu.

Doppelte Events werden angezeigt

Altes Pixel-Skript noch vorhanden

Entfernen Sie alle vorhandenen Facebook-Pixel-Skripte aus dem benutzerdefinierten Code oder den Framer-Integrationen. PixelFlow kümmert sich sowohl um Pixel als auch um CAPI.

Skript verursacht Verzögerungen beim Seitenaufbau

Skript an falscher Position oder Code-Konflikt

Das PixelFlow-Skript ist nur 11 KB groß und lädt asynchron. Stellen Sie sicher, dass es nur im „End of head“ platziert ist. Prüfen Sie auf andere schwere Skripte.

Buttons oder Elemente verschwinden nach dem Hinzufügen des Skripts

Konflikt mit Framer Code Overrides

Dies ist selten, kann aber bei benutzerdefiniertem Code vorkommen. Versuchen Sie, kürzliche Code Overrides zu entfernen, um das Problem einzugrenzen. Buchen Sie einen kostenlosen Setup-Call für Hilfe.

Niedrige Bewertung der Event-Matching-Qualität in Meta

Fehlende Nutzerdaten in den Events

Fügen Sie Event-Klassen zu Formularen hinzu, um E-Mail, Telefon und Name zu erfassen. Siehe Event-Klassen in Framer.

DSGVO-Konformität

Wenn Sie das Laden des Skripts bis zur Einwilligung des Nutzers verzögern müssen:

  1. Verwenden Sie das integrierte Cookie-Banner von Framer (kostenlos in den Website-Einstellungen)

  2. Verbinden Sie es mit dem Google Tag Manager

  3. Konfigurieren Sie den GTM so, dass PixelFlow erst nach der Marketing-Einwilligung geladen wird

Siehe Cookie-Einwilligung in Framer für detaillierte Schritte zur Integration.

PixelFlow ist DSGVO-kompatibel und respektiert die Cookie-Einwilligungseinstellungen, wenn diese ordnungsgemäß konfiguriert sind.

Vergleich Plugin vs. Manuelle Einrichtung

Nutzen Sie das Plugin, wenn Sie Folgendes wünschen:

  • Automatische Installation über den Framer Marketplace

  • Ein visueller Assistent für die geführte Einrichtung

  • Ein Aktivierungs-/Deaktivierungs-Schalter ohne Bearbeitung des Codes

  • Automatische Synchronisierung mit dem PixelFlow-Dashboard

Nutzen Sie die manuelle Einrichtung, wenn Sie:

  • Die direkte Kontrolle über die Skriptplatzierung bevorzugen

  • Den gesamten benutzerdefinierten Code an einem Ort verwalten möchten

  • Keine zusätzlichen Plugins installieren möchten

  • Eine Integration mit einem benutzerdefinierten Einwilligungsmanagement benötigen

Beide Methoden bieten identische Tracking-Funktionen und Performance – das 11-KB-Skript ist dasselbe.

Hilfe erhalten

Wenn Sie Probleme mit Ihrer manuellen Framer-Einrichtung haben:

  • Überprüfen Sie, ob Ihr Skript im „End of head tag“ steht und Ihre Website veröffentlicht ist

  • Verifizieren Sie Ihre Meta-Pixel-Zugangsdaten sowohl in PixelFlow als auch in Facebook

  • Nutzen Sie die Entwickler-Tools des Browsers (F12), um auf JavaScript-Fehler zu prüfen

  • Überprüfen Sie die Events-Seite in PixelFlow auf Fehlermeldungen

  • Kontaktieren Sie den Support unter [email protected] oder buchen Sie einen kostenlosen Setup-Call

Bitte halten Sie bei der Kontaktaufnahme Folgendes bereit:

  • Ihre Framer-Website-URL

  • Einen Screenshot Ihres Bereichs für benutzerdefinierten Code, der das Skript zeigt

  • Alle Fehlermeldungen aus der Browser-Konsole

  • Die Information, ob Sie Events in PixelFlow oder Facebook sehen

War das hilfreich?