Wie richte ich Facebook Pixel mit dem Zonos-Legacy-Iframe-Checkout ein?

Fügen Sie den Standard-Meta-Pixel-Basiscode auf der Seite mit dem Checkout-Iframe hinzu, setzen Sie window.Zonos.facebookPixelId in Ihrem Checkout-customHTML, aktivieren Sie Facebook Pixel im Zonos-Dashboard und fügen Sie das Zonos analyticsRelayOnInit.js-Skript hinzu. Das Relay-Skript übernimmt die Cross-Iframe-Kommunikation und leitet Checkout-Ereignisse an Meta weiter.

Welche Facebook-Pixel-Ereignisse verfolgt Zonos Checkout?

Für jeden Funnel-Schritt sendet Zonos sowohl ein benutzerdefiniertes Ereignis (zonos-checkout-start, zonos-checkout-customer-info, zonos-checkout-shipping-info, zonos-checkout-payment-info, zonos-checkout-payment-fail, zonos-checkout-success, zonos-checkout-close) als auch das passende Meta-Standardereignis, sofern vorhanden: InitiateCheckout beim Checkout-Start, AddPaymentInfo bei Zahlungsinformationen und Purchase bei Bestellabschluss.

Kann ich Google Analytics und Facebook Pixel gleichzeitig nutzen?

Ja. Dasselbe analyticsRelayOnInit.js-Skript verarbeitet beide Anbieter in einem Handshake. Fügen Sie beide Basis-Tags auf Ihrer Seite hinzu, setzen Sie window.Zonos.googleAnalyticId und window.Zonos.facebookPixelId in customHTML und aktivieren Sie beide Anbieter im Zonos-Dashboard.

Wie debugge ich Facebook-Pixel-Ereignisse aus Zonos Checkout?

Fügen Sie den Query-Parameter zonosDebug=1 zur Seiten-URL hinzu und öffnen Sie die Entwicklerkonsole Ihres Browsers für detaillierte Logs des Relay-Handshakes und weitergeleiteter Ereignisse. Die Meta Pixel Helper Chrome-Erweiterung ist ebenfalls hilfreich.

Checkout•

StartseiteAPI-Referenz Checkout REST API Facebook Pixel

Facebook-Pixel für Iframe Checkout

Verfolgen Sie den gesamten Checkout-Funnel mit Meta (Facebook) Pixel bei einer iframe-basierten Legacy-Checkout-Integration.

Händler mit der Legacy-Checkout-Integration (Iframe auf iglobalstores.com) können Meta-Pixel-Ereignisse im gesamten Checkout-Funnel verfolgen. Zonos Checkout leitet Analyseereignisse automatisch vom Iframe an die übergeordnete Seite weiter – mit demselben leichtgewichtigen Relay-Skript wie für Google Analytics 4, sodass Ereignisse in Ihrem Meta Events Manager erscheinen, als stammten sie von Ihrer eigenen Website.

Für jeden Trichterschritt werden zwei Ereignisse ausgegeben:

Ein benutzerdefiniertes Ereignis mit dem Namen zonos-checkout-... (über fbq('trackCustom', ...)) für Full-Funnel-Custom Audiences.
Das passende Meta-Standardereignis (über fbq('track', ...)) für eingebaut Optimierung, z.B. InitiateCheckout, AddPaymentInfo und Purchase.

Native Integrationen benötigen dieses Handbuch nicht. Wenn <zonos-checkout> rendert Direkt auf Ihrer Website (kein Iframe) ruft Zonos das window.fbq Ihrer Seite auf Ort – aktivieren Sie einfach Facebook Pixel im Zonos Dashboard unten Checkout Einstellungen → Tracking und stellen Sie sicher, dass Sie Ihre übliche Meta-Pixel-Basis verwenden Code wird auf die Seite geladen. Die folgende Relaiskonfiguration ist nur erforderlich, wenn Checkout wird in einem Iframe auf einem anderen Ursprung gehostet.

Wie es funktioniert

Da Zonos Checkout in einem Iframe auf einem anderen Ursprung läuft, ist es Sie können nicht direkt auf die fbq-Funktion Ihrer Seite zugreifen. Das Relaissystem löst dieses Problem mit einem zweistufigen Handshake (Schritte 1-2), gefolgt von der Ereignisweiterleitung (Schritt 3):

Checkout pingt das übergeordnete Element an – Wenn der Checkout im Iframe geladen wird, Es sendet eine Nachricht an das übergeordnete Fenster, die angibt, dass es zur Weiterleitung bereit ist Ereignisse, einschließlich der Pixel-ID.
Elternteil bestätigt – Das Relay-Skript auf Ihrer Seite empfängt den Ping, erkennt Ihren Meta-Pixel-Basiscode (oder fügt ihn ein) und signalisiert, dass dies der Fall ist bereit, Veranstaltungen zu empfangen.
Ereignisse werden weitergeleitet – Je nachdem, wie die Käufer den Bezahlvorgang durchlaufen Das Analyseereignis wird über postMessage an Ihre Seite gesendet, wo das Relay erfolgt Das Skript leitet es an fbq mit dem entsprechenden track / trackCustom weiter. Modus.

Alle Nachrichten werden anhand vertrauenswürdiger Zonos-Ursprünge (zonos.com und validiert iglobalstores.com) nur über HTTPS.

Voraussetzungen

– Ein Meta-Pixel mit einer Pixel-ID (eine numerische Zeichenfolge, normalerweise 15–16 Ziffern). Sie können eine erstellen Meta Events Manager.

Eine ältere Checkout-Integration, die Zonos Checkout in einen Iframe lädt Ihre Seite.
Facebook Pixel aktiviert in Ihren Zonos Checkout Einstellungen (in den Zonos Dashboard, unter Checkout Einstellungen -> Tracking).

Aufstellen

Schritt 1: Fügen Sie den Meta-Pixel-Basiscode zu Ihrer Seite hinzu

Wenn Sie Meta Pixel noch nicht auf Ihrer Website installiert haben, fügen Sie den Standard hinzu Pixel-Basiscode zum <head> der Seite, die den Checkout Iframe hostet. Ersetzen Sie YOUR_PIXEL_ID durch Ihre eigene numerische Pixel-ID.

1

3<script>

4 !(function (f, b, e, v, n, t, s) {

5 if (f.fbq) return;

6 n = f.fbq = function () {

7 n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);

8 };

9 if (!f._fbq) f._fbq = n;

10 n.push = n;

11 n.loaded = !0;

12 n.version = '2.0';

13 n.queue = [];

14 t = b.createElement(e);

15 t.async = !0;

16 t.src = v;

17 s = b.getElementsByTagName(e)[0];

18 s.parentNode.insertBefore(t, s);

19 })(

20 window,

21 document,

22 'script',

23 'https://connect.facebook.net/en_US/fbevents.js',

24 );

25 fbq('init', 'YOUR_PIXEL_ID');

26 fbq('track', 'PageView');

27</script>

Hinweis: Wenn auf Ihrer Website bereits Meta Pixel installiert ist (z. B. über Google Tag Manager, Shopifys native Integration oder ein direktes Snippet), können Sie überspringen diesen Schritt. Das Relay-Skript verwendet Ihre vorhandene fbq-Funktion.

Sie finden dieses Snippet in Ihrem Meta Events Manager unter Ihrem Pixel Einstellungen -> Pixel-Setup fortsetzen -> Code manuell installieren.

Schritt 2: Übergeben Sie Ihre Pixel-ID an Zonos Checkout

Teilen Sie Zonos Checkout mit, welche Pixel-ID verwendet werden soll, indem Sie window.Zonos.facebookPixelId festlegen innerhalb Ihres Checkout's customHTML. Das Zonos-Dashboard zeigt a customHTML-Editor unter Checkout-Einstellungen – fügen Sie ein <script>-Tag wie folgt hinzu:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Dieser Wert wird während des Relay-Handshakes an den übergeordneten Server gesendet. Wenn deine Eltern Wenn auf der Seite fbq noch nicht geladen ist, fügt das Relay-Skript das Meta ein Pixel-Basiscode für Sie, der diese ID verwendet.

Schritt 3: Fügen Sie das Analyse-Relay-Skript Zonos hinzu

Fügen Sie das folgende Skript-Tag zu derselben Seite hinzu, die den Checkout-Iframe lädt: nach dem Meta Pixel-Basiscode. Dies ist das gleiche Skript, das auch für Google verwendet wird Analytics 4 – ein einziges Relay verwaltet beide Anbieter, falls Sie sie bereits hinzugefügt haben Wenn Sie es für GA4 verwenden, überspringen Sie diesen Schritt.

1<script

2 async

3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

4></script>

Vollständiges Beispiel

So sieht die vollständige Einrichtung im <head> Ihrer Seite aus:

1<head>

2 

4 

6 <script>

7 !(function (f, b, e, v, n, t, s) {

8 if (f.fbq) return;

9 n = f.fbq = function () {

10 n.callMethod

11 ? n.callMethod.apply(n, arguments)

12 : n.queue.push(arguments);

13 };

14 if (!f._fbq) f._fbq = n;

15 n.push = n;

16 n.loaded = !0;

17 n.version = '2.0';

18 n.queue = [];

19 t = b.createElement(e);

20 t.async = !0;

21 t.src = v;

22 s = b.getElementsByTagName(e)[0];

23 s.parentNode.insertBefore(t, s);

24 })(

25 window,

26 document,

27 'script',

28 'https://connect.facebook.net/en_US/fbevents.js',

29 );

30 fbq('init', 'YOUR_PIXEL_ID');

31 fbq('track', 'PageView');

32 </script>

34 

36 <script

37 async

38 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

39 ></script>

40</head>

Das ist es. Sobald sich beide Skripte auf Ihrer Seite befinden, ist Facebook Pixel auf Ihrer Seite aktiviert Zonos Dashboard und customHTML legt die Pixel-ID fest, das Relais wird automatisch weitergeleitet leitet alle Checkout-Funnel-Ereignisse an Meta weiter.

Referenz zu Meta-Pixel-Ereignissen

Für jeden Schritt im Trichter löst Zonos Checkout sowohl ein benutzerdefiniertes Ereignis aus (also Sie kann präzise Zielgruppen aufbauen) und das passende Meta-Standardereignis (so wird es angezeigt). werden im Optimierungs- und Conversion-Reporting von Meta aufgeführt). Alle Veranstaltungen beinhalten eine isTestMode Flag und das checkoutSessionId.

Auslöser↕	Benutzerdefiniertes Ereignis (`fbq('trackCustom', ...)`)↕	Standardereignis (`fbq('track', ...)`)↕	Zusätzliche Metadaten↕
Checkout öffnet	`zonos-checkout-start`	`InitiateCheckout`	--
Käufer gibt Kundeninformationen ein	`zonos-checkout-customer-info`	keine	--
Käufer wählt eine Versandart	`zonos-checkout-shipping-info`	keine	`serviceLevelId`
Käufer gibt Zahlungsdetails ein	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Zahlungsversuch schlägt fehl	`zonos-checkout-payment-fail`	keine	--
Bestellung erfolgreich abgeschlossen	`zonos-checkout-success`	keine	`order_id`, `currency`, `value`, `contents`, `content_ids`
Bestellung abgeschlossen (E-Commerce-Ereignis)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Käufer schließt Kasse	`zonos-checkout-close`	keine	--

Schritte ohne Meta-Standardäquivalent (z. B. Kundeninformationen, Versandinformationen) Nur das benutzerdefinierte zonos-checkout-...-Ereignis auslösen. Sie können diese in Meta gezielt ansprechen Werbeanzeigenmanager über benutzerdefinierte Zielgruppen mit „Event = zonos-checkout-customer-info“, usw.

Ereignismetadaten kaufen

Das Standardereignis Purchase folgt dem Meta Pixel Purchase-Ereignis Schema. Warenkorbartikel werden aus dem items-Array im GA-Stil den Metas zugeordnet contents Array:

Feld↕	Beschreibung↕
`value`	Gesamtbestellwert
`currency`	Dreibuchstabiger Währungscode (z. B. `USD`)
`order_id`	Zonos Bestell-ID oder Checkout-Sitzungs-ID
`contents`	Array von Warenkorbartikeln, jeweils mit `id`, `quantity` und `item_price`
`content_ids`	Array von Artikel-IDs (SKU, Produkt-ID oder Produktnamen-Fallback)
`content_type`	Immer `"product"`
`num_items`	Gesamtmenge über alle Artikel

Debuggen

Um die Debug-Protokollierung für das Relay-Skript zu aktivieren, fügen Sie die Abfrage zonosDebug=1 hinzu Parameter für Ihre Seiten-URL:

1https://www.yourstore.com/checkout?zonosDebug=1

Öffnen Sie die Entwicklerkonsole Ihres Browsers, um detaillierte Protokolle des Relays anzuzeigen Handshake und weitergeleitete Ereignisse. Dies ist nützlich, um Folgendes zu überprüfen:

– Das Relay-Skript empfängt den Ping vom Checkout-Iframe.

Meta Pixel ist mit der richtigen Pixel-ID konfiguriert.
Ereignisse werden an fbq mit dem erwarteten track / trackCustom weitergeleitet Modus.

Der Meta Pixel Helper Die Chrome-Erweiterung ist auch hilfreich, um Pixel-Anrufe in Echtzeit zu überprüfen.

Häufige Fragen

Warum werden zwei Ereignisse für denselben Schritt ausgelöst (z. B. `zonos-checkout-start` und `InitiateCheckout`)?

Die Standardereignisse von Meta ermöglichen Conversion-Optimierung, Anzeigenberichte und Lookalike Publikum aus der Box. Mit den benutzerdefinierten zonos-checkout-...-Ereignissen können Sie erstellen Detailliertere benutzerdefinierte Zielgruppen im genauen Trichterschritt, auch wenn keine Meta vorhanden ist Standardäquivalent vorhanden ist (z. B. Kundeninformationen, Versandinformationen). Ich feuere beide ab bietet Ihnen das Beste aus beiden Welten, ohne dass ein Signal verloren geht.

Was passiert, wenn ich sowohl Google Analytics als auch Facebook Pixel verwende?

Sie benötigen nicht zwei Relay-Skripte – dieselben analyticsRelayOnInit.js-Handles beide Anbieter in einem einzigen Handschlag. Fügen Sie das GA4-Basis-Tag und das Meta-Pixel hinzu Basiscode zu Ihrem <head>, stellen Sie sowohl window.Zonos.googleAnalyticId als auch ein window.Zonos.facebookPixelId in customHTML und aktivieren Sie beide Anbieter Ihr Zonos Dashboard. Jede Veranstaltung wird auf den jeweiligen Anbieter ausgeweitet ermöglicht.

Was passiert, wenn auf meiner übergeordneten Seite kein Meta Pixel installiert ist?

Wenn Ihr customHTML window.Zonos.facebookPixelId und das Relay-Skript festlegt Erkennt kein fbq auf der Seite, wird der Meta-Pixel-Basiscode für Sie eingefügt während des Handshakes mit der von Ihnen angegebenen Pixel-ID. Sie können es auch vorinstallieren den Meta-Pixel-Basiscode selbst, wenn Sie PageView und andere auslösen möchten Ereignisse außerhalb des Checkout-Trichters.

Werden Testaufträge nachverfolgt?

Alle Ereignisse enthalten ein isTestMode-Feld. Wenn sich Checkout im Testmodus befindet, werden Ereignisse angezeigt werden weiterhin an Meta weitergeleitet, aber mit isTestMode: true gekennzeichnet. Sie können filtern Geben Sie diese im Meta Ads Manager aus oder schließen Sie sie mit benutzerdefinierten Konvertierungsregeln aus.

Ersetzt die Conversions API (CAPI) dies?

Nein – dies ist eine browserseitige Pixel-Integration, die im Browser Ihrer Käufer ausgeführt wird. Browser. Die Meta Conversions API ist ein separater Server-zu-Server-Kanal Einige Händler verwenden aus Redundanzgründen zusätzlich zum Pixel. Die beiden ergänzen sich und das Relay von Zonos verarbeitet nur das browserseitige Pixel.

Buchen Sie eine Demo