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

Hinweis: Wir empfehlen, der Einrichtungsanleitung ohne Plugin zu folgen, da die Installation mit der Ein-Klick-Einrichtung nun reibungsloser verläuft. Folgen Sie hier unserer Webflow-Einrichtungsanleitung (ohne Plugin).

Wenn Sie mit der Einrichtung über das PixelFlow Webflow-Plugin fortfahren möchten, finden Sie unten die Installationsschritte.

1. Installieren Sie die PixelFlow-App aus dem Webflow Marketplace

  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 in welchem Verzeichnis die App installiert werden soll

  4. Klicken Sie auf Authorise App, um PixelFlow die Erlaubnis zu erteilen, auf Ihre Webflow-Website zuzugreifen

2. Starten Sie die PixelFlow-App in Webflow

  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 Mode 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 das Apps-Menü aufrufen.

3. Anmeldung im Plugin

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

Für bestehende PixelFlow-Nutzer:

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

  • Klicken Sie auf Sign in with Google

Für neue Nutzer:

  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 in Webflow neu starten, um eine neue Sitzung zu generieren.

Google-Konto bereits in Verwendung? Wenn Sie die Fehlermeldung "An account with this email already exists" sehen, bedeutet dies, dass Sie zuvor ein PixelFlow-Konto mit E-Mail/Passwort erstellt haben. Melden Sie sich stattdessen mit Ihrer E-Mail und Ihrem Passwort an, statt Google OAuth zu nutzen.

4. Assistent öffnet sich automatisch: Autosync oder manuelle Website-Synchronisierung

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

Automatische Synchronisierung (empfohlen):

  • PixelFlow versucht, Ihre Webflow-Website-Informationen 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 (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 bei Bedarf zwischen den Schritten wechseln.

5. 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 der Liste Ihrer Websites im Dashboard.

5. Fügen Sie Ihr Meta CAPI Access Token hinzu

PixelFlow lädt SOWOHL Ihr Facebook-Pixel als auch die Facebook Conversions API gleichzeitig mit automatischer Event-Deduplizierung. Dies gewährleistet das genaueste Tracking, während Werbeblocker und iOS-Einschränkungen umgangen werden.

  1. Geben Sie einen Pixel Name ein (ein beliebiger Name für Ihre Referenz, z. B. "Haupt-Pixel Website")

  2. Fügen Sie Ihre Meta Pixel ID hinzu (auch Dataset-ID genannt; Sie finden diese im Facebook Events Manager)

  3. Fügen Sie Ihr Meta Pixel Access Token hinzu (Gehen Sie zum Meta Events Manager > Datasets > wählen Sie Ihr Dataset (Pixel) aus > Klicken Sie auf Einstellungen > Scrollen Sie nach unten zum Abschnitt "Direkte Integration einrichten" > Klicken Sie auf "Zugriffstoken generieren" > Kopieren Sie es und fügen Sie es in PixelFlow ein)

  4. Klicken Sie auf Next

Benötigen Sie Hilfe beim Finden Ihrer Zugangsdaten? Schauen Sie sich unseren Leitfaden an: So finden Sie Ihre Meta Pixel ID und Ihr Access Token

6. Kopieren Sie den Embed-Code und fügen Sie ihn auf Ihrer Seite ein

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-Symbol (Zahnrad)

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

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

  5. Klicken Sie auf Save Changes

Veröffentlichen Sie Ihre Website:

  1. Klicken Sie im Webflow-Editor auf die Schaltfläche Publish in der oberen rechten Ecke

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

  3. Klicken Sie auf Publish to selected domains

7. 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 auf Ihrer Website durch einige Seiten (z. B. Startseite, dann auf einige Links klicken)

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

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

    • Eine Konfetti-Animation (lila, rosa und blaue Partikel aus 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 Pixels-Tabelle auf Ihrer Übersichtsseite ändert sich zu "Connected"

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

Es erscheinen keine Events? Wenn Sie nach ein paar Minuten keine Events sehen, überprüfen Sie Folgendes:

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

  • Ist das Skript korrekt unter 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 eingehen (suchen Sie nach sowohl "Browser"- als auch "Server"-Events)

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

Zusätzliches Tracking einrichten

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

Verfügbare Tracking-Optionen:

  • Event-Klassen: Verfolgen Sie Formularübermittlungen, Klicks auf Schaltflächen und benutzerdefinierte Interaktionen mithilfe von CSS-Klassen – siehe So verfolgen Sie Events

  • Tracking-URLs: Verfolgen Sie Besuche bestimmter Seiten, Klicks auf Schaltflächen oder Interaktionen mit Links

  • Calendly-Integration: Verfolgen Sie automatisch Lead- oder Schedule-Events, wenn Benutzer Termine buchen

  • Webflow eCommerce: Automatisches Tracking von Produktaufrufen, Warenkorb-Hinzufügungen, Checkout und Käufen – siehe Webflow E-Commerce-Funktionalität automatisch verfolgen

War das hilfreich?