So synchronisieren Sie Webflow eCommerce Produkt-IDs mit Facebook Catalog Ads

Übersicht

In dieser Anleitung lernen Sie, wie Sie Ihre Webflow eCommerce Produkt-IDs mit Facebook Catalog Ads synchronisieren, damit Meta Ihre Produkte zuordnen kann, wenn jemand Artikel in Ihrem Shop ansieht, in den Warenkorb legt oder kauft. Dies ermöglicht Facebook Dynamic Product Ads, ein präzises Conversion-Tracking und die korrekte Zuordnung von Verkäufen zu bestimmten Produkten in Ihrem Katalog.

Sehen Sie sich diese Schritt-für-Schritt-Videoanleitung an:

Voraussetzungen

• PixelFlow ist auf Ihrer Webflow-Seite installiert und konfiguriert (siehe Webflow-Setup)

• Aktiver Webflow-eCommerce-Plan mit erstellten Produkten

• Facebook Business Manager-Konto mit einem erstellten Produktkatalog

• Allen Produkten in Ihrem Webflow CMS sind SKU-Werte zugewiesen

• Zugriff auf den Webflow Designer mit Bearbeitungsrechten

Kompatibilität

Diese Funktion funktioniert mit:

• Webflow eCommerce: Standard-Checkout- und Bestellbestätigungsseiten

• Unterstützte Events: Purchase, InitiateCheckout, AddToCart, ViewContent

• Facebook-Katalog-Typen: E-Commerce-Kataloge für Dynamic Product Ads

• Produkt-ID-Quellen: Webflow-Produkt-SKU-Feld (empfohlen)

Bevor Sie beginnen

Produkt-ID-Synchronisierung verstehen

Wenn jemand mit Ihrem Webflow-Shop interagiert, sendet PixelFlow Event-Daten an Meta, darunter:

• content_ids — Ein Array von Produkt-IDs (SKUs), die angesehen, in den Warenkorb gelegt oder gekauft wurden

• content_type — Auf "product" gesetzt für eCommerce-Events

• contents — Detaillierte Produktinformationen einschließlich ID, Menge und Preis

Facebook gleicht die content_ids aus den PixelFlow-Events mit den Produkt-IDs in Ihrem Facebook-Produktkatalog ab. Wenn die IDs übereinstimmen, kann Facebook:

• Dynamic Product Ads mit genau den Produkten anzeigen, die sich die Nutzer angesehen haben

• Nutzer mit personalisierten Anzeigen basierend auf ihrem Browserverhalten retargeten

• Conversions bestimmten Produkten in Ihrem Katalog zuordnen

• Die Anzeigenauslieferung basierend darauf optimieren, welche Produkte die meisten Verkäufe generieren

Schritt 1: SKUs zu Ihren Webflow-Produkten zuweisen

Stellen Sie zunächst sicher, dass alle Ihre Webflow-Produkte SKU-Werte haben, die mit Ihrem Facebook-Produktkatalog übereinstimmen:

1. Loggen Sie sich in Ihr Webflow-Konto ein und öffnen Sie Ihr Projekt

2. Navigieren Sie zum Bereich CMS in der linken Seitenleiste

3. Klicken Sie auf Ecommerce und wählen Sie Products aus

4. Klicken Sie auf jedes Produkt, um den Produkt-Editor zu öffnen

5. Scrollen Sie nach unten zum Feld SKU

6. Geben Sie eine eindeutige SKU ein, die der Produkt-ID in Ihrem Facebook-Produktkatalog entspricht

7. Klicken Sie auf Save und wiederholen Sie dies für alle Produkte

Schritt 2: Produkt-SKU zur Webflow-Checkout-Seite hinzufügen

Nun fügen Sie die SKU zu Ihrer Webflow-Checkout-Seite hinzu, damit PixelFlow sie extrahieren und an Meta senden kann:

1. Navigieren Sie im Webflow Designer zum Pages-Panel

2. Scrollen Sie nach unten und klicken Sie auf die Checkout-Seite, um sie zu öffnen

3. Suchen Sie den Bereich Order Items, in dem die Produkte im Warenkorb angezeigt werden

4. Klicken Sie auf den + Add-Button, um ein neues Element hinzuzufügen

5. Wählen Sie Text Block aus dem Element-Menü

6. Ziehen Sie den Text Block per Drag-and-Drop in den Produkt-Item-Container (innerhalb der Order Items-Liste)

Schritt 3: Den Text Block an das SKU-Feld binden

1. Wenn der Text Block ausgewählt ist, erscheint ein Popup mit der Frage "Get text from Products"

2. Klicken Sie auf das Dropdown-Menü oder auf Show all settings

3. Wählen Sie aus der Feldliste SKU aus

4. Der Text Block zeigt nun den SKU-Wert für jedes Produkt im Warenkorb an

Die SKU wird nun dynamisch für jedes Produkt basierend auf den CMS-Daten angezeigt.

Schritt 4: Die PixelFlow Produkt-ID-Klasse hinzufügen

Fügen Sie die PixelFlow-Klasse hinzu, damit die Produkt-ID verfolgt und an Meta gesendet werden kann:

1. Klicken Sie bei ausgewähltem SKU-Textblock auf das Style-Panel auf der rechten Seite

2. Klicken Sie oben im Style-Panel in das Feld Selector

3. Tippen Sie info-itm-id-pf ein und drücken Sie Enter

4. Die Klasse wird dem Element hinzugefügt

Sie finden diesen Klassennamen im PixelFlow-Klassendokument unter dem Abschnitt eCommerce.

Schritt 5: Die SKU vor Kunden verbergen (Optional)

Wenn Sie nicht möchten, dass Kunden die SKU auf der Checkout-Seite sehen, können Sie sie ausblenden, während PixelFlow sie weiterhin verfolgt:

1. Scrollen Sie bei ausgewähltem SKU-Textblock im Style-Panel nach unten zum Bereich Layout

2. Suchen Sie die Einstellung Display

3. Ändern Sie Display vom Standardwert auf None

4. Die SKU ist nun für den Besucher unsichtbar, ist aber im HTML für die Extraktion durch PixelFlow weiterhin vorhanden

Schritt 6: PixelFlow Event-URL-Tracking konfigurieren

Richten Sie die automatische Datenextraktion für Ihre Checkout- und Bestellbestätigungsseiten ein, um doppelte Events durch das integrierte Tracking von Webflow zu verhindern:

1. Loggen Sie sich in Ihr PixelFlow-Dashboard unter pixelflow.so/dashboard ein

2. Navigieren Sie zur Overview-Seite

3. Suchen Sie den Bereich Events URLs

4. Klicken Sie auf + Add URL

Für die Checkout-Seite (InitiateCheckout Event):

1. Geben Sie Ihre Checkout-Seiten-URL ein (z. B. ihreseite.de/checkout)

2. Wählen Sie Initiate Checkout aus dem Event-Dropdown

3. Schalten Sie "Extract data automatically?" auf ON

4. Stellen Sie sicher, dass "Block external tracking?" auf ON geschaltet ist (dies verhindert, dass Webflow doppelte Events sendet)

5. Klicken Sie auf Add URL

Für die Bestellbestätigungsseite (Purchase Event):

1. Klicken Sie erneut auf + Add URL

2. Geben Sie die URL Ihrer Bestellbestätigungsseite ein (z. B. ihreseite.de/order-confirmation)

3. Wählen Sie Purchase aus dem Event-Dropdown

4. Schalten Sie "Extract data automatically?" auf ON

5. Stellen Sie sicher, dass "Block external tracking?" auf ON steht

6. Klicken Sie auf Add URL

Schritt 7: Aktualisieren und Veröffentlichen Ihrer Webflow-Seite

1. Klicken Sie nach dem Hinzufügen des SKU-Elements und der Klasse in Webflow oben rechts auf Publish

2. Wählen Sie Ihre Produktions-Domain aus

3. Klicken Sie auf Publish to selected domains

4. Ihre Änderungen sind nun live

Schritt 8: Überprüfen der Produkt-ID-Synchronisierung

Testen Sie, ob Ihre Webflow-Produkt-IDs korrekt an Meta gesendet werden:

Verwendung der Meta Pixel Helper Chrome-Erweiterung

1. Installieren Sie die Meta Pixel Helper Chrome-Erweiterung

2. Öffnen Sie Ihren Live-Webflow-Shop in Chrome

3. Legen Sie ein Produkt in Ihren Warenkorb

4. Navigieren Sie zur Checkout-Seite

5. Klicken Sie auf das Meta Pixel Helper-Symbol in Ihrer Browser-Toolbar

6. Suchen Sie nach dem InitiateCheckout-Event

7. Erweitern Sie die Event-Details und überprüfen Sie:

   • content_type: product

   • contents: Array, das Produkt-ID, Menge und Preis zeigt

   • content_ids: Array mit Ihren Produkt-SKUs

Verwendung des Facebook Events Manager

1. Öffnen Sie den Facebook Events Manager

2. Wählen Sie Ihr Pixel aus den Datenquellen aus

3. Klicken Sie in der linken Seitenleiste auf Test Events

4. Führen Sie einen Test-Checkout in Ihrem Webflow-Shop durch

5. Kehren Sie zu Test Events zurück und suchen Sie Ihr InitiateCheckout- oder Purchase-Event

6. Klicken Sie auf das Event, um die Details zu erweitern

7. Überprüfen Sie, ob der Parameter content_ids Ihre Produkt-SKUs enthält

8. Bestätigen Sie, dass die SKU-Werte mit den Produkt-IDs in Ihrem Facebook-Produktkatalog übereinstimmen

Verwendung des PixelFlow-Dashboards

1. Loggen Sie sich in Ihr PixelFlow-Dashboard ein

2. Navigieren Sie zu Events oder Analytics

3. Suchen Sie Ihr aktuelles Test-Event (InitiateCheckout oder Purchase)

4. Klicken Sie hier, um die Event-Details zu erweitern

5. Überprüfen Sie, ob das Feld content_ids Ihre Produkt-SKUs anzeigt

6. Bestätigen Sie, dass auch Produktname, Preis und Menge erfasst werden

Einrichten von Facebook Dynamic Product Ads

Sobald die Produkt-ID-Synchronisierung funktioniert, können Sie im Facebook Ads Manager Dynamic Product Ads erstellen:

1. Öffnen Sie den Facebook Ads Manager

2. Klicken Sie auf Create, um eine neue Kampagne zu starten

3. Wählen Sie Sales oder Catalog Sales als Ziel aus

4. Wählen Sie Ihren Facebook-Produktkatalog aus

5. Wählen Sie Ihre Retargeting-Zielgruppe (z. B. Personen, die Produkte angesehen, in den Warenkorb gelegt oder den Checkout gestartet haben)

6. Facebook zeigt automatisch personalisierte Anzeigen mit genau den Produkten an, mit denen die Nutzer in Ihrem Webflow-Shop interagiert haben

Fehlerbehebung

Best Practices für die Synchronisierung des Produktkatalogs

• SKUs konsistent halten: Ändern Sie SKU-Werte niemals, sobald sie festgelegt sind, es sei denn, Sie aktualisieren auch Ihren Facebook-Produktkatalog.

• SKU für alle Produkte verwenden: Lassen Sie kein Produkt ohne SKU-Wert, da diese sonst in Meta nicht trackbar sind.

• Katalogstruktur anpassen: Wenn Sie Produktvarianten (Größen, Farben) verwenden, stellen Sie sicher, dass Ihre Webflow-SKUs und die Struktur des Facebook-Katalogs aufeinander abgestimmt sind.

• Regelmäßig testen: Testen Sie nach dem Hinzufügen neuer Produkte immer, ob deren SKUs korrekt erfasst werden.

• Event Match Quality überwachen: Überprüfen Sie Ihren Wert für die Event-Match-Qualität im Meta Events Manager – korrekt synchronisierte Produkt-IDs helfen, diesen Wert zu verbessern.

• Katalog regelmäßig aktualisieren: Halten Sie Ihren Facebook-Produktkatalog mit Ihrem Webflow-Bestand synchron, indem Sie nicht mehr angebotene Produkte entfernen und neue hinzufügen.

Einschränkungen

• SKU-Feld ist erforderlich: Die Produktsynchronisierung funktioniert nur, wenn Sie das SKU-Feld von Webflow verwenden. Benutzerdefinierte CMS-Felder werden ohne zusätzliche Konfiguration nicht automatisch unterstützt.

• Exakte Übereinstimmung erforderlich: Facebook erfordert exakte SKU-Übereinstimmungen – selbst geringfügige Unterschiede verhindern den Katalogabgleich.

• Nur Standard-Checkout-Seiten: Die automatische Datenextraktion funktioniert mit dem Standard-Checkout-Layout von Webflow. Benutzerdefinierte Checkout-Implementierungen erfordern möglicherweise eine zusätzliche Klassenkonfiguration.

• Genehmigung des Facebook-Katalogs: Produkte müssen in Ihrem Facebook-Produktkatalog genehmigt sein, bevor sie in Dynamic Product Ads erscheinen können.

• Pixel Helper nur für Chrome: Die Meta Pixel Helper-Erweiterung funktioniert für Tests und Verifizierungen nur im Chrome-Browser.

Nächste Schritte

Nachdem Ihre Webflow-Produkt-IDs nun mit den Facebook Catalog Ads synchronisiert sind, können Sie:

• Richten Sie Facebook Dynamic Product Ads ein, um Nutzer zu retargeten, die Produkte angesehen oder in den Warenkorb gelegt haben

• Verfolgen Sie zusätzliche Events auf Produktseiten mit Event-Klassen auf Webflow

• Aktivieren Sie Auto Track Webflow eCommerce Functionality für die automatische Datenextraktion

• Erfahren Sie mehr über Event-Parameter, um Ihre Tracking-Daten weiter zu bereichern

• Erstellen Sie Retargeting-Zielgruppen im Facebook Ads Manager basierend auf Produktinteraktionen

Hilfe erhalten

Wenn Sie Probleme bei der Synchronisierung der Produkt-ID haben:

• Überprüfen Sie, ob die Klasse info-itm-id-pf auf den SKU-Textblock auf Ihrer Checkout-Seite angewendet wurde

• Verwenden Sie die Chrome-Erweiterung Meta Pixel Helper, um zu bestätigen, dass Produkt-IDs mit Events gesendet werden

• Prüfen Sie, ob die SKU-Werte in Webflow exakt mit den Produkt-IDs in Ihrem Facebook-Produktkatalog übereinstimmen

• Stellen Sie sicher, dass "Block external tracking?" in PixelFlow aktiviert ist, um doppelte Events zu vermeiden

Für zusätzliche Unterstützung:

• Senden Sie eine E-Mail an den PixelFlow-Support unter [email protected]

• Buchen Sie einen kostenlosen Setup-Call für persönliche Unterstützung

Wenn Sie den Support kontaktieren, geben Sie bitte Folgendes an:

• Ihre Webflow-Website-URL

• Screenshots vom Meta Pixel Helper, die Event-Daten zeigen

• Beispiel-SKU-Werte von Webflow und aus dem Facebook-Katalog

• Ob Sie Events in den Test-Events des Facebook Events Managers sehen

• Screenshots Ihrer PixelFlow-Event-URL-Konfiguration