Wie richte ich Google Analytics 4 mit dem Zonos-Legacy-Iframe-Checkout ein?

Fügen Sie das Standard-GA4-gtag.js-Snippet auf der Seite mit dem Checkout-Iframe hinzu und ergänzen Sie das Zonos analyticsRelayOnInit.js-Skript. Das Relay-Skript übernimmt die Cross-Iframe-Kommunikation und leitet Checkout-Ereignisse an Ihre GA4-Property weiter.

Welche GA4-Ereignisse verfolgt Zonos Checkout?

Zonos Checkout verfolgt den gesamten Checkout-Funnel inklusive 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 und dem standardmäßigen GA4-purchase-Ereignis mit Transaktionsdetails.

Muss ich meinen createTempCart-API-Aufruf für GA4-Tracking anpassen?

Nein. Das Relay-System funktioniert unabhängig von der createTempCart-API. Sie müssen nur den GA4-Tag und das Zonos-Relay-Skript auf Ihrer Seite hinzufügen.

Wie debugge ich GA4-Ereignisse aus Zonos Checkout?

Fügen Sie den Query-Parameter zonosDebug=true zur Seiten-URL hinzu und öffnen Sie die Entwicklerkonsole für detaillierte Logs. Sie können auch GA4 DebugView in Google Analytics nutzen, um Ereignisse in Echtzeit zu prüfen.

Checkout•

StartseiteAPI-Referenz Checkout REST API Google Analytics 4

Google Analytics 4 für iframe Checkout

Verfolgen Sie den gesamten Checkout-Funnel mit GA4 bei einer iframe-basierten Legacy-Checkout-Integration.

Händler mit der Legacy-Checkout-Integration (Iframe auf iglobalstores.com) können GA4-Analyseereignisse im gesamten Checkout-Funnel verfolgen. Zonos Checkout leitet Analyseereignisse automatisch vom Iframe mithilfe eines leichtgewichtigen Relay-Skripts an die übergeordnete Seite weiter, sodass Ereignisse in Ihrer GA4-Property erscheinen, als stammten sie von Ihrer eigenen Website.

Native Integrationen benötigen dieses Handbuch nicht. Wenn <zonos-checkout> direkt auf Ihrer Website rendert (ohne Iframe), ruft Zonos das window.gtag Ihrer Seite direkt auf – aktivieren Sie einfach Google Analytics im Zonos Dashboard unter Checkout-Einstellungen → Tracking und stellen Sie sicher, dass Ihr übliches GA4-Basis-Tag auf der Seite geladen ist. Das unten beschriebene Relay-Setup ist nur erforderlich, wenn Checkout in einem Iframe auf einem anderen Ursprung gehostet wird.

Möchten Sie stattdessen Meta Ads-Conversions verfolgen? Siehe den Facebook-Pixel-Leitfaden – er verwendet dasselbe Relay-Skript und kann neben GA4 ausgeführt werden.

Wie es funktioniert

Da Zonos Checkout in einem Iframe auf einem anderen Ursprung läuft, kann er nicht direkt auf die gtag-Funktion Ihrer Seite zugreifen. Das Relay-System 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, sendet er eine Nachricht an das übergeordnete Fenster, die angibt, dass er bereit ist, Ereignisse weiterzuleiten.
Übergeordnetes Fenster bestätigt – Das Relay-Skript auf Ihrer Seite empfängt den Ping, erkennt Ihre vorhandene GA4-Konfiguration und signalisiert zurück, dass es bereit ist, Ereignisse zu empfangen.
Ereignisse werden weitergeleitet – Während Käufer den Checkout durchlaufen, wird jedes Analyseereignis über postMessage an Ihre Seite gesendet, wo das Relay-Skript es an gtag weiterleitet.

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

Voraussetzungen

Eine GA4-Property mit einer Mess-ID (Format: G-XXXXXXXXXX). Sie können eine in Google Analytics erstellen.
Eine Legacy-Checkout-Integration, die Zonos Checkout in einem Iframe auf Ihrer Seite lädt.

Einrichtung

Schritt 1: Fügen Sie das GA4-Tag zu Ihrer Seite hinzu

Wenn Sie GA4 noch nicht auf Ihrer Website installiert haben, fügen Sie das Standard-GA4-Tag zum <head> der Seite hinzu, die den Checkout-Iframe hostet. Ersetzen Sie G-XXXXXXXXXX durch Ihre eigene Mess-ID.

1

3<script

4 async

5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

6></script>

8<script>

9 window.dataLayer = window.dataLayer || [];

10 function gtag() {

11 dataLayer.push(arguments);

12 }

13 gtag('js', new Date());

14 gtag('config', 'G-XXXXXXXXXX');

15</script>

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

Sie finden dieses Snippet in Ihrer GA4-Property unter Admin -> Datenstreams -> Wählen Sie Ihren Stream aus -> Tag-Anweisungen anzeigen -> Installieren manuell.

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

Teilen Sie Zonos Checkout mit, welche GA4-Mess-ID verwendet werden soll, indem Sie window.Zonos.googleAnalyticId in Ihrem Checkout-customHTML festlegen. Das Zonos-Dashboard stellt einen customHTML-Editor unter den Checkout-Einstellungen bereit – fügen Sie dort ein <script>-Tag wie folgt hinzu:

1<script>

2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';

3</script>

Dieser Wert wird während des Relay-Handshakes an die übergeordnete Seite gesendet. Wenn auf Ihrer übergeordneten Seite gtag noch nicht geladen ist, fügt das Relay-Skript mit dieser ID das GA4-Basis-Tag für Sie ein.

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

Fügen Sie nach dem GA4-Tag das folgende Skript-Tag auf derselben Seite hinzu. Dieses Skript wartet auf Analyseereignisse vom Zonos-Checkout-Iframe und leitet sie an Ihr gtag weiter.

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 async

8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

9 ></script>

11 <script>

12 window.dataLayer = window.dataLayer || [];

13 function gtag() {

14 dataLayer.push(arguments);

15 }

16 gtag('js', new Date());

17 gtag('config', 'G-XXXXXXXXXX');

18 </script>

20 

22 <script

23 async

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

25 ></script>

26</head>

Das ist es. Sobald beide Skripte auf Ihrer Seite eingebunden sind, schließt das Relay-Skript automatisch den Handshake mit dem Checkout-Iframe ab und leitet alle Checkout-Funnel-Ereignisse an Ihre GA4-Property weiter.

GA4-Ereignisreferenz

Zonos Checkout sendet die folgenden Ereignisse über das Relay. Alle Ereignisse enthalten ein isTestMode-Flag und die checkoutSessionId.

Ereignis↕	Auslöser↕	Zusätzliche Metadaten↕
`zonos-checkout-start`	Checkout öffnet	--
`zonos-checkout-customer-info`	Käufer gibt Kundeninformationen ein	--
`zonos-checkout-shipping-info`	Käufer wählt eine Versandart	`serviceLevelId`
`zonos-checkout-payment-info`	Käufer gibt Zahlungsdetails ein	`paymentMethod`
`zonos-checkout-payment-fail`	Zahlungsversuch schlägt fehl	--
`zonos-checkout-success`	Bestellung erfolgreich abgeschlossen	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Käufer schließt Kasse	--
`purchase`	Bestellung abgeschlossen (GA4-Standard-E-Commerce-Ereignis)	`transaction_id`, `currency`, `value`, `items`

Metadaten des `purchase`-Ereignisses

Das purchase-Ereignis folgt dem GA4-E-Commerce-purchase-Ereignis Schema:

Feld↕	Beschreibung↕
`transaction_id`	Zonos Bestell-ID oder Checkout-Sitzungs-ID
`currency`	Dreibuchstabiger Währungscode (z. B. `USD`)
`value`	Gesamtbestellwert
`items`	Array von Warenkorbelementen, jeweils mit `item_id`, `item_name`, `price` und `quantity`

Debuggen

Um die Debug-Protokollierung für das Relay-Skript zu aktivieren, fügen Sie den Abfrageparameter zonosDebug=1 zu Ihrer Seiten-URL hinzu:

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

Öffnen Sie die Entwicklerkonsole Ihres Browsers, um detaillierte Protokolle des Relay-Handshakes und der weitergeleiteten Ereignisse anzuzeigen. Dies ist nützlich, um Folgendes zu überprüfen:

Das Relay-Skript empfängt den Ping vom Checkout-Iframe.
GA4 ist mit der richtigen Mess-ID konfiguriert.
Ereignisse werden an gtag weitergeleitet.

Häufige Fragen

Muss ich meinen `createTempCart` API-Aufruf ändern?

Nein. Das Relay-System funktioniert unabhängig von der createTempCart-API. Sie müssen nur das GA4-Tag und das Relay-Skript zu Ihrer Seite hinzufügen.

Was passiert, wenn ich `footerHTML` bereits für Google Analytics verwende?

Der Parameter footerHTML in der createTempCart-API fügt Skripte in den Checkout-Iframe ein, was die Nachverfolgung auf Ereignisse auf Seitenebene innerhalb des Iframe-Ursprungs beschränkt. Der Relay-Ansatz wird empfohlen, weil er Ereignisse an Ihre eigene GA4-Property auf Ihrer Domain sendet und Ihnen so vollständige Funnel-Sichtbarkeit in einer einzigen Property verschafft.

Sie können alle GA4-Skripte sicher aus footerHTML entfernen, nachdem Sie das Relay eingerichtet haben.

Funktioniert das mit dem GA4-Debug-Modus in Google Analytics?

Ja. Sie können zonosDebug=1 verwenden, um Relay-Skriptprotokolle in der Entwicklerkonsole Ihres Browsers zu aktivieren, und die GA4 DebugView in Google Analytics nutzen, um Ereignisse in Echtzeit zu überprüfen.

Werden Testaufträge nachverfolgt?

Alle Ereignisse enthalten ein isTestMode-Feld. Wenn sich der Checkout im Testmodus befindet, werden die Ereignisse weiterhin an GA4 gesendet, jedoch mit isTestMode: true gekennzeichnet. Bei Bedarf können Sie diese in GA4 mithilfe benutzerdefinierter Dimensionen herausfiltern.

Buchen Sie eine Demo