Jak skonfigurować Google Analytics 4 za pomocą starszego Zonos Checkout iframe?

Dodaj standardowy fragment gtag.js GA4 do strony hostującej iframe Checkout, a następnie dodaj skrypt analyticsRelayOnInit.js Zonos. Skrypt przekaźnika automatycznie obsługuje komunikację między iframe'ami i przekazuje zdarzenia checkout do Twojej właściwości GA4.

Jakie zdarzenia GA4 śledzi Zonos Checkout?

Zonos Checkout śledzi pełny funnel checkout, w tym 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 i standardowe zdarzenie GA4 purchase z szczegółami transakcji.

Checkout•

Strona głównaDokumentacja API REST API Kasy Checkout Google Analytics 4

Google Analytics 4 dla Checkout iframe

Q: Jak debugować zdarzenia GA4 z Zonos Checkout?

Dodaj parametr zapytania zonosDebug=true do adresu URL strony i otwórz konsolę dewelopera przeglądarki, aby zobaczyć szczegółowe dzienniki uściśnienia przekaźnika i przekazanych zdarzeń. Możesz również użyć GA4 DebugView w Google Analytics, aby weryfikować zdarzenia w czasie rzeczywistym.

Śledź pełny funnel checkout za pomocą GA4 podczas korzystania ze starszej integracji Checkout opartej na iframe.

Handlowcy korzystający ze starszej integracji Checkout (iframe hostowany na iglobalstores.com) mogą teraz śledzić zdarzenia analityki GA4 na całym funnel checkout. Zonos Checkout automatycznie przekazuje zdarzenia analityki z iframe na stronę nadrzędną za pomocą lekkiego skryptu przekaźnika, dzięki czemu zdarzenia pojawiają się w Twojej właściwości GA4 tak, jakby pochodziły z Twojej własnej witryny.

Integracje natywne nie wymagają tego przewodnika. Jeśli <zonos-checkout> renderuje się bezpośrednio na Twojej witrynie (bez iframe), Zonos wywołuje window.gtag na Twojej stronie — po prostu włącz Google Analytics na pulpicie Zonos w Ustawienia Checkout → Śledzenie i upewnij się, że zwykły tag GA4 GA4 jest załadowany na stronie. Konfiguracja przekaźnika poniżej jest wymagana tylko wtedy, gdy Checkout jest hostowany w iframe na innym origin.

Szukasz śledzenia konwersji Meta Ads? Zapoznaj się z przewodnikiem Facebook Pixel — używa tego samego skryptu przekaźnika i może działać równolegle z GA4.

Jak to działa

Ponieważ Zonos Checkout działa wewnątrz iframe na innym origin, nie może bezpośrednio uzyskać dostępu do funkcji gtag Twojej strony. System przekaźnika rozwiązuje ten problem z dwuetapowym uściśnieniem (kroki 1-2) következt przez przekazywanie zdarzeń (krok 3):

Checkout pinguje element nadrzędny — Gdy checkout ładuje się wewnątrz iframe, wysyła wiadomość do okna nadrzędnego, wskazując, że jest gotów do przekazywania zdarzeń.
Element nadrzędny potwierdza — Skrypt przekaźnika na Twojej stronie odbiera ping, wykrywa istniejącą konfigurację GA4 i sygnalizuje, że jest gotów do odbierania zdarzeń.
Zdarzenia są przekazywane — W miarę postępu kupujących przez checkout, każde zdarzenie analityki jest wysyłane za pośrednictwem postMessage na Twoją stronę, gdzie skrypt przekaźnika przekazuje je do gtag.

Wszystkie wiadomości są weryfikowane pod kątem zaufanych origin Zonos (zonos.com i iglobalstores.com) tylko przez HTTPS.

Wymagania wstępne

Właściwość GA4 z identyfikatorem pomiaru (format: G-XXXXXXXXXX). Możesz utworzyć jedną w Google Analytics.
Starsza integracja Checkout która ładuje Zonos Checkout w iframe na Twojej stronie.

Konfiguracja

Krok 1: Dodaj tag GA4 do Twojej strony

Jeśli nie masz już GA4 zainstalowanego na Twojej witrynie, dodaj standardowy tag Google Analytics 4 do <head> strony hostującej iframe Checkout. Zamień G-XXXXXXXXXX na Twój własny identyfikator pomiaru.

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>

Notatka: Jeśli Twoja witryna już ma zainstalowany tag GA4 (np. poprzez Google Tag Manager lub bezpośredni fragment), możesz pominąć ten krok. Skrypt przekaźnika będzie używać Twojej istniejącej funkcji gtag.

Możesz znaleźć ten fragment w Twojej właściwości GA4 w sekcji Admin -> Strumienie danych -> wybierz swój strumień -> Wyświetl instrukcje tagu -> Zainstaluj ręcznie.

Krok 2: Przekaż swój identyfikator pomiaru do Zonos Checkout

Powiedz Zonos Checkout, który identyfikator pomiaru GA4 ma użyć, ustawiając window.Zonos.googleAnalyticId wewnątrz customHTML Checkout. Pulpit Zonos udostępnia edytor customHTML w ustawieniach Checkout — dodaj tag <script> w ten sposób:

1<script>

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

3</script>

Ta wartość jest wysyłana do elementu nadrzędnego podczas uściśnienia przekaźnika. Jeśli Twoja strona nadrzędna nie ma już załadowanego gtag, skrypt przekaźnika zainjektuje tag bazowy GA4 dla Ciebie za pomocą tego identyfikatora.

Krok 3: Dodaj skrypt przekaźnika analityki Zonos

Dodaj następujący tag skryptu do tej samej strony, po tagu GA4. Ten skrypt nasłuchuje zdarzeń analityki z iframe Zonos Checkout i przekazuje je do Twojego gtag.

1<script

2 async

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

4></script>

Pełny przykład

Oto jak wygląda pełna konfiguracja w <head> Twojej strony:

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>

To już wszystko. Gdy oba skrypty będą na Twojej stronie, skrypt przekaźnika automatycznie dokończy uściśnienie z iframe checkout i przekaże wszystkie zdarzenia funnel checkout do Twojej właściwości GA4.

Dokument referencyjny zdarzeń GA4

Zonos Checkout emituje następujące zdarzenia przez przekaźnik. Wszystkie zdarzenia zawierają flagę isTestMode i checkoutSessionId.

Zdarzenie↕	Wyzwalacz↕	Dodatkowe metadane↕
`zonos-checkout-start`	Checkout się otwiera	--
`zonos-checkout-customer-info`	Kupujący wpisuje informacje o kliencie	--
`zonos-checkout-shipping-info`	Kupujący wybiera metodę wysyłki	`serviceLevelId`
`zonos-checkout-payment-info`	Kupujący wpisuje dane płatności	`paymentMethod`
`zonos-checkout-payment-fail`	Próba płatności nie powiedzie się	--
`zonos-checkout-success`	Zamówienie się pomyślnie uzupełnia	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Kupujący zamyka checkout	--
`purchase`	Zamówienie się pomyślnie uzupełnia (standardowe zdarzenie e-commerce GA4)	`transaction_id`, `currency`, `value`, `items`

Metadane zdarzenia zakupu

Zdarzenie purchase następuje po schemacie zdarzenia e-commerce GA4 purchase:

Pole↕	Opis↕
`transaction_id`	Identyfikator zamówienia Zonos lub identyfikator sesji checkout
`currency`	Trzyliterowy kod waluty (np. `USD`)
`value`	Całkowita wartość zamówienia
`items`	Tablica przedmiotów koszyka, każdy z `item_id`, `item_name`, `price` i `quantity`

Debugowanie

Aby włączyć rejestrowanie debugowania dla skryptu przekaźnika, dodaj parametr zapytania zonosDebug=1 do adresu URL strony:

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

Otwórz konsolę dewelopera przeglądarki, aby zobaczyć szczegółowe dzienniki uściśnienia przekaźnika i przekazanych zdarzeń. Jest to przydatne do weryfikacji, że:

Skrypt przekaźnika odbiera ping z iframe checkout.
GA4 jest skonfigurowany z prawidłowym identyfikatorem pomiaru.
Zdarzenia są przekazywane do gtag.

Najczęściej zadawane pytania

Czy muszę modyfikować moje wywołanie API `createTempCart`?

Nie. System przekaźnika działa niezależnie od interfejsu API createTempCart. Musisz tylko dodać tag GA4 i skrypt przekaźnika do Twojej strony.

Co jeśli już używam `footerHTML` do Google Analytics?

Parametr footerHTML w interfejsie API createTempCart iniekcji skryptów wewnątrz iframe checkout, co jest ograniczone do śledzenia zdarzeń na poziomie strony w obrębie origin iframe. Podejście przekaźnika jest zalecane ponieważ wysyła zdarzenia do Twojej własnej właściwości GA4 w Twojej domenie, co daje Ci pełną widoczność funnel w jednej właściwości.

Możesz bezpiecznie usunąć wszystkie skrypty GA4 z footerHTML po skonfiguracji przekaźnika.

Czy to działa z trybem debugowania GA4 w Google Analytics?

Tak. Możesz użyć zonosDebug=1, aby włączyć dzienniki skryptu przekaźnika w konsoli dewelopera przeglądarki, i użyć GA4 DebugView w Google Analytics, aby weryfikować zdarzenia w czasie rzeczywistym.

Czy zamówienia testowe są śledzone?

Wszystkie zdarzenia zawierają pole isTestMode. Gdy Checkout jest w trybie testowym, zdarzenia są nadal wysyłane do GA4, ale oznaczone jako isTestMode: true. Możesz je odfiltrować w GA4 za pomocą wymiarów niestandardowych, jeśli to konieczne.

Zarezerwuj demonstrację