Pixelflow
Webflow

Webflow-Einrichtung (mit Plugin)

Dieser Artikel führt Sie durch den Prozess, wie Sie die Facebook Conversions API auf Webflow mit dem PixelFlow Webflow-Plugin einrichten.

Hinweis: Wenn Sie Webflow Commerce nutzen, können wir Ihre E-Commerce-Events automatisch verfolgen. Weitere Informationen finden Sie im Leitfaden Webflow E-Commerce-Events automatisch tracken.

Voraussetzungen

  • Zugriff auf den Webflow-Editor mit Berechtigungen zur Installation von Apps und zur Änderung von Website-Einstellungen

  • Admin-Zugriff auf den Meta Business Manager mit Ihren Meta-Pixel-Zugangsdaten

  • 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 App-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 die Webflow-App, wenn Sie diese starten.

2. Die PixelFlow-App aus dem Webflow Marketplace installieren

  1. Besuchen Sie die PixelFlow Webflow-App im Webflow Marketplace

  2. Klicken Sie auf Install App oder Login to Install

  3. Wählen Sie aus, in welcher Website oder welchem Verzeichnis die App installiert werden soll

  4. Klicken Sie auf Authorise App, um PixelFlow die Berechtigung für den Zugriff auf Ihre Webflow-Website zu erteilen

Autorisierung abgeschlossen: Sie haben PixelFlow nun Zugriff auf Ihre Webflow-Website gewährt. Die App erscheint in der Apps-Seitenleiste Ihres Webflow-Editors.

3. Die PixelFlow-App in Webflow starten

  1. Öffnen Sie Ihr Webflow-Dashboard und fahren Sie mit der Maus über die Website, auf der Sie PixelFlow nutzen möchten

  2. Klicken Sie auf Open in Webflow, um den Webflow-Editor zu öffnen

  3. Stellen Sie in der linken Seitenleiste sicher, dass Sie sich im Design Mode befinden

  4. Klicken Sie in der linken Seitenleiste auf das Apps-Symbol

  5. Wählen Sie PixelFlow aus der Liste der installierten Apps aus

  6. Klicken Sie auf Launch App

Wo Sie den Design-Modus finden: Der Design Mode befindet sich in der oberen linken Ecke des Webflow-Editors. Stellen Sie sicher, dass dieser ausgewählt ist (nicht „Preview“ oder andere Modi), bevor Sie auf das Apps-Menü zugreifen.

4. Im Plugin anmelden

Wenn Sie die App starten, öffnet sich ein Browserfenster, in dem Sie aufgefordert werden, sich bei PixelFlow zu authentifizieren.

Für bestehende PixelFlow-Benutzer:

  • Melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an, ODER

  • Klicken Sie auf Sign in with Google

Für neue Benutzer:

  1. Klicken Sie auf Create account und registrieren Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort, ODER nutzen Sie Sign in with Google

  2. Schließen Sie die Registrierung ab und warten Sie auf die automatische Weiterleitung zurück zu Webflow

Sitzung läuft nach 5 Minuten ab: Sie haben 5 Minuten Zeit, um den Authentifizierungsprozess abzuschließen. Wenn Sie länger brauchen, läuft die Sitzung ab und Sie müssen die App von Webflow aus neu starten, um eine neue Sitzung zu generieren.

Google-Konto bereits verknüpft? 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 anstelle von Google OAuth an.

5. Wizard öffnet sich automatisch: Autosync oder manuelle Synchronisierung

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

Automatische Synchronisierung (empfohlen):

  • PixelFlow versucht automatisch, Informationen Ihrer Webflow-Website zu erkennen

  • Bei Erfolg wird Ihre Website-Domain bereits vorausgefüllt

Manuelle Eingabe (falls Autosync fehlschlägt):

  • Wenn die automatische Erkennung nicht funktioniert, sehen Sie eine Warnmeldung

  • Geben Sie Ihre Website-Domain manuell ein (z. B. https://www.meineseite.de)

Der Assistent verwendet einen 4-stufigen Prozess mit visueller Navigation, um Sie durch die Einrichtung zu führen. 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. Bestätigen oder geben Sie Ihre Website-Domain ein (z. B. https://www.meineseite.de)

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

  3. Klicken Sie auf Continue oder Next, um fortzufahren

Ihre Webflow-Website ist nun in PixelFlow registriert und erscheint in Ihrer Liste der Websites im Dashboard.

7. Ihr Meta-Pixel hinzufügen

PixelFlow lädt sowohl Ihr Facebook-Pixel als auch die Facebook Conversions API gleichzeitig mit automatischer Event-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. Geben Sie einen Pixel Name ein (dies kann ein beliebiger Name zur Identifizierung sein)

  2. Geben Sie Ihre Pixel ID ein (diese finden Sie im Facebook Events Manager)

  3. Geben Sie Ihr Meta Pixel Access Token ein (generieren Sie dieses 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 unseren einfachen Leitfaden an: So finden Sie Ihr Pixel und generieren Ihr Access Token

8. Embed-Code kopieren und auf Ihrer Website einfügen

Im dritten Schritt des Assistenten generiert PixelFlow ein einzigartiges Tracking-Skript für Ihre Webflow-Website.

Skript kopieren:

  1. Klicken Sie im Assistenten auf die Schaltfläche Copy Script

  2. Das Skript wird in Ihre Zwischenablage kopiert

Zu Webflow Custom Code hinzufügen:

  1. Gehen Sie zu Ihrem Webflow-Dashboard und klicken Sie auf All Sites

  2. Fahren Sie mit der Maus über Ihre Website und klicken Sie auf das Settings (Zahnrad)-Symbol

  3. Scrollen Sie in der linken Seitenleiste nach unten zu Custom Code und klicken Sie darauf

  4. Fügen Sie Ihr PixelFlow-Skript im Abschnitt Head Code ein

  5. Klicken Sie auf Save Changes

Ihre Website veröffentlichen:

  1. Klicken Sie im Webflow-Editor oben rechts auf die Schaltfläche Publish

  2. Wählen Sie Ihre Produktions-Domain aus (Ihre Live-Website)

  3. Klicken Sie auf Publish to selected domains

Kopieren Sie keinen Code von einer anderen Website: Jede Webflow-Website hat eine eindeutige Kennung im PixelFlow-Skript. Wenn Sie die Website oder Pixel wechseln, kopieren Sie immer das neue Skript aus der PixelFlow Webflow-App – verwenden Sie keinen alten Code aus Custom-Code-Abschnitten wieder.

Automatische Skript-Updates: Ihr PixelFlow-Skript wird automatisch aktualisiert, um neue Änderungen zu übernehmen. Neue Website-Besucher erhalten das Update sofort, aktive Nutzer erhalten es innerhalb von maximal 1 Minute (sobald der Skript-Cache ungültig wird). Es ist kein weiteres Handeln Ihrerseits erforderlich. Falls Sie Ihr 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 Website 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-/Privatmodus

  2. Navigieren Sie durch ein paar Seiten Ihrer Website (z. B. Startseite, dann einige Links anklicken)

  3. Kehren Sie zum PixelFlow-Assistenten zurück – dieser prüft automatisch alle 10 Sekunden auf Events

  4. Sobald das erste Page View Event erkannt wird, sehen Sie:

    • Eine Konfetti-Animation (lila, pinke und blaue Partikel in der Mitte des Bildschirms)

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

    • Der Assistent schließt sich automatisch

  5. Ihr Website-Status in der Pixel-Tabelle auf Ihrer Übersichtsseite ändert sich zu „Connected“

Einrichtung abgeschlossen! PixelFlow trackt nun Page View Events auf Ihrer Website. Events sollten innerhalb von 2-3 Minuten in Ihrem PixelFlow-Dashboard erscheinen.

Es erscheinen keine Events? Wenn Sie nach einigen Minuten keine Events sehen, prüfen Sie Folgendes:

  • Haben Sie Ihre Webflow-Website auf Ihrer Produktions-Domain veröffentlicht?

  • Ist das Skript korrekt in Settings → Custom Code → Head Code eingefügt?

  • Besuchen Sie die Live-Website (nicht die Webflow-Vorschau)?

Zusätzliche Überprüfung:

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

  • Überprüfen Sie den Facebook Events Manager, um zu bestätigen, dass Events ankommen (suchen Sie sowohl nach „Browser“- als auch nach „Server“-Events)

Detaillierte Schritte zur Überprüfung finden Sie unter So testen und verifizieren Sie Ihr PixelFlow CAPI Setup.

10. Weiteres Tracking einstellen

Nachdem sich der Assistent geschlossen hat, können Sie zusätzliches Event-Tracking über Page Views hinaus konfigurieren.

Verfügbare Tracking-Optionen:

  • Event Classes: Tracken Sie Formularabsendungen, Button-Klicks und benutzerdefinierte Interaktionen mithilfe von CSS-Klassen – siehe So tracken Sie Events

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

  • Calendly-Integration: Tracken Sie automatisch Lead- oder Terminbuchungs-Events, wenn Nutzer Calls buchen

  • Webflow-E-Commerce: Automatisches Tracking von Produktansichten, Warenkorb-Aktionen, Checkout und Käufen – siehe Automatische Webflow E-Commerce-Funktionalität tracken

Sämtliches Tracking ist in jedem Tarif 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

Wahrscheinliche Ursache

Lösung

Anmeldefenster erscheint nicht

Popup-Blocker ist aktiviert

Erlauben Sie Popups für PixelFlow in Ihren Browsereinstellungen und starten Sie die App von Webflow aus neu

Fehler „Session expired“ oder „Session not found“

Authentifizierung dauerte länger als 5 Minuten

Schließen Sie das Anmeldefenster und starten Sie die App von Webflow aus neu, 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-Adresse und Ihrem Passwort anstelle von Google OAuth an

Autosync schlägt fehl oder zeigt Warnung

Webflow-Website-Informationen konnten nicht erkannt werden

Geben Sie Ihre Domain manuell im Assistenten ein und fahren Sie mit der Einrichtung fort

Keine Events im PixelFlow-Dashboard sichtbar

Skript nicht hinzugefügt oder Website nicht veröffentlicht

Prüfen Sie, ob das Skript in Custom Code → Head Code steht, und veröffentlichen Sie die Website erneut

Events erscheinen nicht im Facebook Events Manager

Meta-Pixel nicht konfiguriert oder fehlerhaftes Access Token

Starten Sie die PixelFlow-App von Webflow aus neu und überprüfen Sie Ihre Pixel-ID und Ihr Access Token

Kein Konfetti nach Interaktion mit der Website

Events erreichen PixelFlow nicht oder Zeitüberschreitung des Assistenten

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

Weiterleitung zur Abonnement-Seite nach dem Login

Testversion abgelaufen oder Abonnement inaktiv

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

Einschränkungen

  • Ablauf des Sitzungsschlüssels: Authentifizierungssitzungen laufen nach 5 Minuten ab. Wenn Sie den Login nicht innerhalb dieses Zeitfensters abschließen, müssen Sie die App neu starten.

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

  • Ein Skript pro Website: Jede Webflow-Website benötigt ihr eigenes, einzigartiges PixelFlow-Skript. Kopieren Sie Skripte nicht zwischen Websites.

  • 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 prüft bis zu 1 Stunde lang auf Events. Danach prüfen Sie bitte die Events-Seite manuell.

Hilfe erhalten

Wenn Sie Probleme mit Ihrer Webflow-Einrichtung haben:

  • Überprüfen Sie, ob Sie alle 10 oben genannten Schritte abgeschlossen und Ihre Website veröffentlicht haben

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

  • Nutzen Sie die Browser-Entwicklertools (F12), um Ihre Website auf JavaScript-Fehler zu prüfen

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

Bitte halten Sie bei der Kontaktaufnahme folgende Informationen bereit:

  • Ihre Webflow-Website-URL

  • Screenshots von etwaigen Fehlermeldungen

  • Ob Sie Events in Ihrem PixelFlow-Dashboard sehen

  • Ob Sie Events im Facebook Events Manager sehen

War das hilfreich?