Pixelflow
Framer

Framer Setup (Über das Plugin)

Dieser Artikel führt Sie durch die Einrichtung der Facebook Conversions API auf Framer mithilfe des offiziellen PixelFlow-Plugins aus dem Framer Marketplace. Dies ist die empfohlene Methode für die automatische Einrichtung und Verwaltung.

Bevorzugen Sie eine manuelle Einrichtung? Wenn Sie das PixelFlow-Skript lieber direkt zu Ihrer Framer-Website hinzufügen möchten, ohne das Plugin zu verwenden, lesen Sie Framer Setup (Ohne Plugin).

Voraussetzungen

  • Zugriff auf das Framer-Projekt mit Berechtigungen zur Installation von Plugins

  • Administrator-Zugriff auf den Meta Business Manager mit Ihren Meta-Pixel-Anmeldedaten

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

1. Im PixelFlow-Dashboard anmelden oder registrieren

Bevor Sie mit dem Einrichtungsprozess beginnen, benötigen Sie ein PixelFlow-Konto.

  • Wenn Sie ein neuer Benutzer sind, erstellen Sie Ihr Konto während des Plugin-Authentifizierungsschritts (Schritt 4 unten)

  • Wenn Sie ein bestehender Benutzer sind, melden Sie sich während des Authentifizierungsschritts an

  • Eine kostenlose 7-Tage-Testversion startet automatisch, keine Kreditkarte erforderlich

Sie müssen das Dashboard nicht zuerst besuchen – die Authentifizierung erfolgt direkt über das Framer-Plugin, wenn Sie es öffnen.

2. Installation des PixelFlow Framer Plugins

  1. Besuchen Sie das PixelFlow Framer-Plugin im Framer Marketplace

  2. Klicken Sie auf Install Plugin oder Get Plugin

  3. Wählen Sie aus, in welches Framer-Projekt das Plugin installiert werden soll

Installation abgeschlossen: Das PixelFlow-Plugin ist nun in Ihrem Framer-Projekt verfügbar.

3. Öffnen Sie das PixelFlow-Plugin in Ihrem Framer-Projekt

  1. Suchen Sie in Ihrem Framer-Projekt-Editor das PixelFlow-Plugin in Ihrem Plugin-Panel

  2. Klicken Sie auf Open Plugin, um es zu starten

Das Plugin öffnet sich in einem Panel innerhalb Ihres Framer-Editors und zeigt den Authentifizierungsbildschirm.

4. Anmeldung beim Plugin

Wenn Sie das Plugin öffnen, sehen Sie ein Anmeldefenster, das Sie zur Authentifizierung bei PixelFlow auffordert.

Für bestehende PixelFlow-Benutzer:

  • Klicken Sie auf Login und geben Sie Ihre E-Mail und Ihr Passwort ein, ODER

  • Nutzen Sie Sign in with Google

Für neue Benutzer:

  1. Klicken Sie auf Start Free Trial

  2. Erstellen Sie Ihr Konto mit E-Mail und Passwort, ODER nutzen Sie Sign in with Google

  3. Registrierung abschließen

Nach erfolgreicher Authentifizierung wird kurzzeitig ein neuer Browser-Tab geöffnet und dann automatisch geschlossen, während er mit dem PixelFlow-Dashboard synchronisiert wird.

Sitzung läuft nach 5 Minuten ab: Sie haben 5 Minuten Zeit, um den Authentifizierungsprozess abzuschließen. Wenn es länger dauert, läuft die Sitzung ab und Sie müssen das Plugin erneut öffnen, um eine neue Sitzung zu generieren.

Google-Konto bereits in Gebrauch? Wenn eine Fehlermeldung erscheint, dass bereits ein Konto mit dieser E-Mail existiert, bedeutet dies, dass Sie zuvor ein PixelFlow-Konto mit E-Mail/Passwort erstellt haben. Melden Sie sich in diesem Fall mit E-Mail und Passwort statt über Google OAuth an.

5. Wizard öffnet sich automatisch: Autosync oder manueller Site Sync

Nach erfolgreicher Authentifizierung öffnet sich der PixelFlow-Einrichtungsassistent automatisch und führt Sie durch die restlichen Schritte.

Automatische Synchronisierung (empfohlen):

  • PixelFlow versucht, Ihre Framer-Projektinformationen automatisch zu erkennen

  • Bei Erfolg wird Ihre Website-Domain vorab ausgefüllt

Manuelle Eingabe (falls Autosync fehlschlägt):

  • Wenn die automatische Erkennung nicht funktioniert, wird eine Warnmeldung angezeigt

  • Geben Sie Ihre Website-Domain manuell ein (beginnend mit https://)

Der Assistent nutzt einen 4-stufigen Prozess mit visueller Navigation. Sie können nach Bedarf zwischen den Schritten wechseln.

6. Website-Domain und Währung hinzufügen

Konfigurieren Sie im ersten Schritt des Assistenten Ihre Website-Details:

  1. Geben Sie Ihren Domainnamen ein (beginnend mit https://)

  2. Wählen Sie Ihre Währung aus dem Dropdown-Menü (optional, wird für E-Commerce-Tracking verwendet)

  3. Klicken Sie auf Continue oder Next, um fortzufahren

Ihre Framer-Seite ist nun in PixelFlow registriert und erscheint in Ihrer Liste der Seiten im Dashboard.

7. Fügen Sie Ihr Meta-Pixel hinzu

PixelFlow lädt gleichzeitig sowohl Ihr Facebook-Pixel als auch die Facebook Conversions API mit automatischer Ereignis-Deduplizierung, um genaues Tracking zu gewährleisten. Das bedeutet, dass Sie alle vorhandenen Facebook-Pixel-Skripte von Ihrer Website entfernen können.

Verbinden Sie im zweiten Schritt des Assistenten Ihr Meta-Pixel:

  1. Fügen Sie Ihren Pixelnamen hinzu (ein beliebiger Name zur Identifizierung)

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

  3. Fügen Sie Ihren Meta Pixel Access Token hinzu (diesen generieren Sie im Facebook Events Manager unter Einstellungen)

  4. Aktivieren Sie das Kontrollkästchen, um zu bestätigen, dass Sie alle vorhandenen nativen Meta-Pixel entfernt haben

  5. Klicken Sie auf Add Pixel oder Save

Benötigen Sie Hilfe beim Finden Ihrer Pixel ID oder Ihres Access Tokens? Schauen Sie sich unsere einfache Anleitung an: How to Find Your Pixel and Generate your Access Token

8. PixelFlow aktivieren und Ihre Seite veröffentlichen

Aktivieren Sie im dritten Schritt des Assistenten das Tracking für Ihre Framer-Seite.

Aktivieren Sie das Plugin:

  1. Schalten Sie im PixelFlow-Plugin-Panel den Schalter Activate PixelFlow auf EIN

  2. Klicken Sie auf die Schaltfläche Publish Changes im Plugin

Veröffentlichen Sie Ihre Framer-Seite:

  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-Seite zu veröffentlichen

Veröffentlichung zur Aktivierung erforderlich: Das PixelFlow-Skript wird erst auf Ihrer Seite geladen, wenn Sie Ihr Framer-Projekt veröffentlichen. Das Klicken auf „Publish Changes“ im Plugin allein reicht nicht aus – Sie müssen auch Ihre Framer-Seite veröffentlichen.

Automatische Skript-Updates: Sobald Sie PixelFlow aktiviert haben, wird es automatisch aktualisiert, um neue Änderungen zu übernehmen. Neue Website-Besucher erhalten das Update sofort, bestehende Besucher innerhalb von maximal 1 Minute (wenn der Skript-Cache ungültig wird). Es ist keine weitere Aktion Ihrerseits erforderlich. Falls Sie das Skript jedoch vor dem 27. November 2024 hinzugefügt haben, müssen Sie es ein letztes Mal auf die neueste Version aktualisieren, die sich künftig selbst aktualisiert.

9. Interagieren Sie mit Ihrer Seite und sehen Sie Konfetti

Der letzte Schritt des Assistenten hilft Ihnen zu überprüfen, ob Ihre Einrichtung korrekt funktioniert.

  1. Besuchen Sie Ihre Live-Website in einem neuen Browserfenster oder im Inkognito-Modus

  2. Navigieren Sie durch einige Seiten Ihrer Website (z. B. Startseite, dann auf Links klicken)

  3. Kehren Sie zum PixelFlow-Assistenten zurück – dieser fragt automatisch alle 10 Sekunden Ereignisse ab

  4. Sobald das erste PageView-Ereignis erkannt wird, sehen Sie:

    • Eine Konfetti-Animation (lila, pinke und blaue Partikel aus der Bildschirmmitte)

    • Ein grünes Glückwunsch-Fenster: „Congratulations! Your Framer site is now connected to PixelFlow“

    • Der Assistent schließt sich automatisch

  5. Der Status Ihrer Seite in der Pixels-Tabelle auf Ihrer Übersichtsseite ändert sich zu „Connected“

Einrichtung abgeschlossen! PixelFlow zeichnet nun PageView-Ereignisse auf Ihrer Website auf. Die Ereignisse sollten innerhalb von 2–3 Minuten in Ihrem PixelFlow-Dashboard erscheinen.

Erscheinen keine Ereignisse? Wenn Sie nach ein paar Minuten keine Ereignisse sehen, prüfen Sie Folgendes:

  • Haben Sie Ihre Framer-Seite veröffentlicht, nachdem Sie PixelFlow im Plugin aktiviert haben?

  • Ist der Schalter „Activate PixelFlow“ im Plugin auf EIN?

  • Besuchen Sie die live veröffentlichte Seite (nicht die Framer-Vorschau)?

Zusätzliche Überprüfung:

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

  • Prüfen Sie im Facebook Events Manager, ob Ereignisse ankommen (suchen Sie nach „Browser“- und „Server“-Ereignissen)

Detaillierte Schritte zur Verifizierung finden Sie unter How to Test and Verify Your PixelFlow CAPI Setup.

10. Weiteres Tracking einstellen

Nachdem der Assistent geschlossen wurde, können Sie zusätzliche Ereignisse über PageViews hinaus konfigurieren.

Verfügbare Tracking-Optionen:

  • Event Classes: Verfolgen Sie Formularübermittlungen, Button-Klicks und benutzerdefinierte Interaktionen mithilfe von CSS-Klassen – siehe How to Track Events

  • Tracking URLs: Verfolgen Sie spezifische Seitenbesuche, Button-Klicks oder Link-Interaktionen

  • Calendly-Integration: Verfolgen Sie automatisch Lead- oder Termin-Ereignisse, wenn Benutzer Anrufe buchen

Tracking ist in jedem Plan unbegrenzt, ohne Limits für Events oder Pixel.

Greifen Sie auf diese Einstellungen über die Übersichtsseite Ihres PixelFlow-Dashboards oder die Seite „Events“ zu. Jede Website kann individuelle Tracking-Konfigurationen haben.

Fehlerbehebung

Symptom

Mögliche Ursache

Lösung

Anmeldefenster erscheint nicht oder schließt sich nicht

Popup-Blocker ist aktiviert

Lassen Sie Popups für PixelFlow in Ihren Browsereinstellungen zu und öffnen Sie das Plugin erneut

Fehler „Session expired“ oder „Session not found“

Authentifizierung hat länger als 5 Minuten gedauert

Schließen Sie das Plugin und öffnen Sie es erneut, um eine neue Sitzung zu generieren

„An account with this email already exists“

E-Mail ist bereits mit einem E-Mail/Passwort-Konto verknüpft

Melden Sie sich mit Ihrer E-Mail und Ihrem Passwort statt über Google OAuth an

Autosync schlägt fehl oder zeigt Warnung

Framer-Projektinformationen konnten nicht erkannt werden

Geben Sie Ihre Domain manuell im Assistenten ein. Falls das Problem bestehen bleibt, buchen Sie einen kostenlosen Setup-Call

Keine Events im PixelFlow-Dashboard

Plugin nicht aktiviert oder Seite nicht veröffentlicht

Stellen Sie sicher, dass „Activate PixelFlow“ auf EIN steht, klicken Sie auf „Publish Changes“ und veröffentlichen Sie dann Ihre Framer-Seite

Events erscheinen nicht im Facebook Events Manager

Meta-Pixel nicht konfiguriert oder falscher Access Token

Öffnen Sie das PixelFlow-Plugin erneut und prüfen Sie, ob Ihre Pixel ID und Ihr Access Token korrekt sind

Kein Konfetti nach Interaktion mit der Seite

Events erreichen PixelFlow nicht oder Timeout des Assistenten

Warten Sie 2–3 Minuten und prüfen Sie die Events-Seite manuell. Der Assistent fragt maximal 1 Stunde lang ab

Weiterleitung zur Abo-Seite nach dem Login

Testzeitraum abgelaufen oder Abo inaktiv

Aktivieren Sie Ihr Abonnement oder starten Sie eine neue Testphase im PixelFlow-Dashboard

Einschränkungen

  • Ablauf des Sitzungsschlüssels: Authentifizierungssitzungen laufen nach 5 Minuten ab. Wenn der Login nicht in diesem Zeitfenster erfolgt, müssen Sie das Plugin neu öffnen.

  • Popup-Voraussetzungen: Der Authentifizierungsfluss benötigt ein Popup-Fenster. Wenn Ihr Browser Popups blockiert, müssen Sie diese für PixelFlow zulassen.

  • Kontenverknüpfung: Sie können ein Google-Konto nicht mit einem bestehenden E-Mail/Passwort-Konto verknüpfen. Wählen Sie eine Authentifizierungsmethode.

  • Abfragefenster des Assistenten: Der Verifizierungsschritt fragt bis zu 1 Stunde lang nach Ereignissen. Danach prüfen Sie bitte die Events-Seite manuell.

  • Einschränkungen bei manuellem Sync: Wenn Autosync fehlschlägt und die manuelle Eingabe nicht funktioniert, kontaktieren Sie den Support.

Hilfe erhalten

Falls Probleme bei der Framer-Einrichtung auftreten:

  • Prüfen Sie, ob Sie alle 10 obigen Schritte abgeschlossen und Ihre Seite veröffentlicht haben

  • Vergewissern Sie sich, dass Ihre Meta-Pixel-ID und Ihr Access Token im Facebook Events Manager korrekt sind

  • Nutzen Sie die Entwicklertools des Browsers (F12), um nach JavaScript-Fehlern auf Ihrer Seite zu suchen

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

Geben Sie bei der Kontaktaufnahme bitte Folgendes an:

  • Ihre Framer-URL

  • Screenshots etwaiger Fehlermeldungen

  • Ob Sie Ereignisse in Ihrem PixelFlow-Dashboard sehen

  • Ob Sie Ereignisse im Facebook Events Manager sehen

War das hilfreich?