So synchronisieren Sie Webflow eCommerce-Produkt-IDs mit Facebook-Kataloganzeigen

Synchronisieren Sie Ihre Webflow eCommerce-Produkt-IDs mit Facebook-Kataloganzeigen, damit Meta Ihre Produkte abgleichen kann, wenn jemand Artikel aus Ihrem Shop ansieht, in den Warenkorb legt oder kauft. Dies ermöglicht Dynamic Product Ads, genaues Conversion-Tracking und Attributionsberichte auf Produktebene.

Schauen Sie sich diese Videoanleitung Schritt für Schritt an:

Voraussetzungen

• PixelFlow auf Ihrer Webflow-Site installiert und konfiguriert. Siehe Webflow-Einrichtung.

• Aktiver Webflow-eCommerce-Plan mit erstellten Produkten

• Facebook Business Manager-Konto mit einem erstellten Produktkatalog

• SKU-Werte, die allen Produkten in Ihrem Webflow CMS zugewiesen sind

• 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-Katalogtypen: E-Commerce-Kataloge für Dynamic Product Ads

• Quelle der Produkt-ID: Webflow-Produkt-SKU-Feld

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

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

Schritt 1: SKUs zu Ihren Webflow-Produkten zuweisen

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

2. Navigieren Sie zum CMS

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

4. Öffnen Sie jedes Produkt

5. Scrollen Sie zum Feld SKU

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

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

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

1. Öffnen Sie im Webflow-Designer das Panel Pages

2. Öffnen Sie die Checkout-Seite

3. Suchen Sie den Bereich Order Items

4. Klicken Sie auf + Add

5. Wählen Sie Text Block

6. Platzieren Sie den Textblock innerhalb des Produkt-Item-Containers

Schritt 3: Textblock mit dem SKU-Feld verknüpfen

1. Wählen Sie den Textblock aus

2. Wählen Sie Get text from Products

3. Wählen Sie SKU

4. Bestätigen Sie, dass der Textblock den SKU-Wert anzeigt

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

1. Öffnen Sie bei ausgewähltem SKU-Textblock das Style panel

2. Klicken Sie in das Feld Selector

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

Sie finden diesen Klassennamen im Dokument zu den PixelFlow-Klassen.

Schritt 5: SKU vor Kunden verbergen

1. Gehen Sie bei ausgewähltem SKU-Textblock zum Bereich Layout

2. Suchen Sie Display

3. Ändern Sie es auf None

Schritt 6: PixelFlow-URL-Trigger konfigurieren

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

1. Loggen Sie sich in Ihr PixelFlow-Dashboard ein

2. Navigieren Sie zu Overview

3. Suchen Sie den Bereich URL Triggers

4. Klicken Sie auf + Add URL

Für die Checkout-Seite

1. Geben Sie die URL Ihrer Checkout-Seite ein

2. Wählen Sie Initiate Checkout

3. Aktivieren Sie Extract data automatically?

4. Lassen Sie Block external tracking? aktiviert

5. Klicken Sie auf Add URL

Für die Bestellbestätigungsseite

1. Klicken Sie erneut auf + Add URL

2. Geben Sie die URL Ihrer Bestellbestätigungsseite ein

3. Wählen Sie Purchase

4. Aktivieren Sie Extract data automatically?

5. Lassen Sie Block external tracking? aktiviert

6. Klicken Sie auf Add URL

Schritt 7: Webflow-Seite aktualisieren und veröffentlichen

1. Nachdem Sie das SKU-Element und die Klasse in Webflow hinzugefügt haben, klicken Sie auf Publish

2. Wählen Sie Ihre Live-Domain aus

3. Klicken Sie auf Publish to selected domains

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

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

Verwendung des Meta Pixel Helper

1. Installieren Sie die Erweiterung Meta Pixel Helper

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

3. Legen Sie ein Produkt in den Warenkorb

4. Navigieren Sie zur Checkout-Seite

5. Klicken Sie auf das Erweiterungssymbol

6. Suchen Sie nach dem Event InitiateCheckout

7. Überprüfen Sie, ob das Event content_ids enthält

Verwendung des Facebook Events Manager

1. Öffnen Sie den Facebook Events Manager

2. Wählen Sie Ihr Pixel aus

3. Klicken Sie auf Test Events

4. Führen Sie einen Test-Checkout durch

5. Überprüfen Sie, ob das Event content_ids enthält

Verwendung des PixelFlow-Dashboards

1. Loggen Sie sich in Ihr PixelFlow-Dashboard ein

2. Navigieren Sie zu Events oder Analytics

3. Finden Sie Ihr aktuelles Test-Event

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

Fehlerbehebung

Nächste Schritte

Nachdem Ihre Webflow-Produkt-IDs synchronisiert sind, können Sie:

• Richten Sie Facebook Dynamic Product Ads ein

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

• Aktivieren Sie Auto track Webflow eCommerce events

• Erfahren Sie mehr über Event Parameter

Hilfe erhalten

Wenn Sie Probleme bei der Synchronisierung der Produkt-IDs haben, überprüfen Sie, ob die Klasse korrekt angewendet wurde, nutzen Sie den Meta Pixel Helper zur Inspektion der Event-Daten und stellen Sie sicher, dass Ihre SKUs mit dem Facebook-Produktkatalog übereinstimmen. Für weitere Unterstützung senden Sie eine E-Mail an [email protected] oder buchen Sie ein kostenloses Setup-Gespräch.