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> rendert Direkt auf Ihrer Website (kein Iframe) ruft Zonos das window.gtag Ihrer Seite auf Ort – aktivieren Sie einfach Google Analytics im Zonos Dashboard unten Checkout Einstellungen → Tracking und stellen Sie sicher, dass Ihr übliches GA4-Basis-Tag ist auf der Seite geladen. Die folgende Relaiskonfiguration ist nur erforderlich, wenn Checkout vorhanden ist gehostet in einem Iframe auf einem anderen Ursprung.

Möchten Sie stattdessen Meta Ads-Conversions verfolgen? Siehe die Facebook Pixel guide – es 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, ist es Sie können nicht direkt auf die gtag-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.
Elternteil bestätigt – Das Relay-Skript auf Ihrer Seite empfängt den Ping, erkennt Ihre vorhandene GA4-Konfiguration und signalisiert, dass sie bereit ist Ereignisse 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 gtag weiter.

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

Voraussetzungen

– Eine GA4-Eigenschaft mit einer Mess-ID (Format: G-XXXXXXXXXX). Du kannst Erstellen Sie eins in Google Analytics.

Eine ältere Checkout-Integration, die Zonos Checkout in einen Iframe lädt Ihre Seite.

Aufstellen

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-Google hinzu Analytics 4-Tag zum <head> der Seite, 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 -> Daten Streams -> 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 durch Einstellung verwendet werden soll window.Zonos.googleAnalyticId in Ihrem Checkout customHTML. Das Zonos Das Dashboard stellt einen customHTML-Editor unter den Checkout-Einstellungen bereit – fügen Sie einen hinzu <script> Tag wie folgt:

1<script>

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

3</script>

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

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

Fügen Sie nach dem GA4-Tag das folgende Skript-Tag auf derselben Seite hinzu. Dieses Skript hört auf Analyseereignisse vom Zonos Checkout iframe und leitet sie an weiter Euer gtag.

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 sich beide Skripte auf Ihrer Seite befinden, wird das Relay-Skript automatisch aktiviert Schließt den Handshake mit dem Checkout-Iframe ab und leitet den gesamten Checkout weiter Trichterereignisse zu Ihrer GA4-Property.

GA4-Ereignisreferenz

Zonos Checkout sendet die folgenden Ereignisse über das Relais. Alle Veranstaltungen beinhalten ein isTestMode Flag und das checkoutSessionId.

Veranstaltung↕	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`

Ereignismetadaten kaufen

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

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 Relaissystem funktioniert unabhängig von der createTempCart API. Nur du Sie müssen 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 im createTempCart-API fügt Skripte in den Checkout-Iframe ein, der auf die Nachverfolgung beschränkt ist Ereignisse auf Seitenebene innerhalb des Iframe-Ursprungs. Der Relay-Ansatz wird empfohlen weil es Ereignisse an Ihre eigene GA4-Property auf Ihrer Domain sendet, sodass Sie voll versorgt sind Trichtersichtbarkeit in einer einzelnen Eigenschaft.

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

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 zu verwenden GA4 DebugView in Google Analysen zur Überprüfung von Ereignissen in Echtzeit.

Werden Testaufträge nachverfolgt?

Alle Ereignisse enthalten ein isTestMode-Feld. Wenn sich Checkout im Testmodus befindet, werden Ereignisse angezeigt werden weiterhin an GA4 gesendet, aber mit isTestMode: true gekennzeichnet. Sie können diese filtern in GA4 mit benutzerdefinierten Abmessungen bei Bedarf ausfüllen.

Buchen Sie eine Demo