Jak skonfigurować Facebook Pixel za pomocą Zonos legacy iframe Checkout?

Dodaj standardowy kod podstawowy Meta Pixel do strony, na której hostowany jest iframe Checkout, ustaw window.Zonos.facebookPixelId w customHTML Kasy, włącz Facebook Pixel w pulpicie Zonos i dodaj skrypt Zonos analyticsRelayOnInit.js. Skrypt relay automatycznie obsługuje komunikację między iframe a przesyła zdarzenia kasy do Meta.

Jakie zdarzenia Facebook Pixel śledzi Zonos Checkout?

Dla każdego kroku funnel Zonos uruchamia zarówno zdarzenie niestandardowe (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), jak i pasujące zdarzenie standardowe Meta, jeśli istnieje: InitiateCheckout dla startu kasy, AddPaymentInfo dla informacji o płatności i Purchase dla ukończenia zamówienia.

Czy mogę uruchamiać jednocześnie Google Analytics i Facebook Pixel?

Tak. Ten sam skrypt analyticsRelayOnInit.js obsługuje obie dostawców w jednym uzgodnieniu. Dodaj oba tagi podstawowe do strony, ustaw window.Zonos.googleAnalyticId i window.Zonos.facebookPixelId w customHTML i włącz obu dostawców w pulpicie Zonos.

Checkout•

Strona głównaDokumentacja API REST API Kasy Checkout Facebook Pixel

Facebook Pixel dla iframe Checkout

Q: Jak debugować zdarzenia Facebook Pixel z Zonos Checkout?

Dodaj parametr zapytania zonosDebug=1 do adresu URL strony i otwórz konsolę programisty przeglądarki, aby zobaczyć szczegółowe dzienniki uzgodnienia relay i przesyłanych zdarzeń. Rozszerzenie Meta Pixel Helper Chrome jest również przydatne do inspekcji wywołań Pixel w czasie rzeczywistym.

Śledź pełną ścieżkę kasy za pomocą Meta (Facebook) Pixel podczas korzystania z integracji Checkout opartej na iframe.

Sprzedawcy korzystający ze starszej integracji Checkout (iframe hostowany na iglobalstores.com) mogą śledzić zdarzenia Meta Pixel na całej ścieżce kasy. Zonos Checkout automatycznie przekazuje zdarzenia analityczne z iframe do strony nadrzędnej, wykorzystując ten sam lekki skrypt relay, który jest używany do Google Analytics 4, więc zdarzenia pojawiają się w Meta Events Manager tak, jakby pochodziły z Twojej własnej witryny.

Dla każdego kroku ścieżki emitowane są dwa zdarzenia:

Zdarzenie niestandardowe o nazwie zonos-checkout-... (poprzez fbq('trackCustom', ...)) dla celowych odbiorców na całej ścieżce.
Pasujące zdarzenie standardowe Meta (poprzez fbq('track', ...)) do wbudowanej optymalizacji, np. InitiateCheckout, AddPaymentInfo i Purchase.

Natywne integracje nie potrzebują tego przewodnika. Jeśli <zonos-checkout> renderuje się bezpośrednio na Twojej witrynie (bez iframe), Zonos wywoła window.fbq na Twojej stronie — po prostu włącz Facebook Pixel w pulpicie Zonos w Ustawienia Checkout → Śledzenie i upewnij się, że zwykły kod podstawowy Meta Pixel jest załadowany na stronie. Konfiguracja relay poniżej jest wymagana tylko wtedy, gdy Checkout jest hostowany w iframe na innym pochodzeniu.

Jak to działa

Ponieważ Zonos Checkout działa wewnątrz iframe na innym pochodzeniu, nie może bezpośrednio uzyskać dostępu do funkcji fbq na Twojej stronie. System relay rozwiązuje ten problem za pomocą dwuetapowego uzgodnienia (kroki 1-2) i następnie przesyłania zdarzeń (krok 3):

Checkout wysyła ping do strony nadrzędnej -- Gdy kasa ładuje się wewnątrz iframe, wysyła wiadomość do okna nadrzędnego, informując, że jest gotowa do przesyłania zdarzeń, w tym identyfikator Pixel.
Strona nadrzędna potwierdza -- Skrypt relay na Twojej stronie odbiera ping, wykrywa (lub wstrzykuje) Twój kod podstawowy Meta Pixel i wysyła sygnał potwierdzający, że jest gotowy do odbierania zdarzeń.
Zdarzenia są przesyłane -- Podczas gdy kupujący postępują przez kasę, każde zdarzenie analityczne jest wysyłane poprzez postMessage do Twojej strony, gdzie skrypt relay przesyła je do fbq z odpowiednim trybem track / trackCustom.

Wszystkie wiadomości są walidowane względem zaufanych pochodzeń Zonos (zonos.com i iglobalstores.com) wyłącznie przez HTTPS.

Warunki wstępne

Meta Pixel z identyfikatorem Pixel (ciąg numeryczny, zazwyczaj 15-16 cyfr). Możesz go utworzyć w Meta Events Manager.
Starsza integracja Checkout, która ładuje Zonos Checkout w iframe na Twojej stronie.
Facebook Pixel włączony w ustawieniach Zonos Checkout (w pulpicie Zonos, w sekcji Ustawienia Checkout → Śledzenie).

Konfiguracja

Krok 1: Dodaj kod podstawowy Meta Pixel do swojej strony

Jeśli nie masz jeszcze Meta Pixel zainstalowanego na witrynie, dodaj standardowy kod podstawowy Pixel do <head> strony, na której hostowany jest iframe Checkout. Zamień YOUR_PIXEL_ID na swój własny numeryczny identyfikator Pixel.

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>

Uwaga: Jeśli Twoja witryna ma już zainstalowany Meta Pixel (np. poprzez Google Tag Manager, natywną integrację Shopify lub bezpośredni fragment), możesz pominąć ten krok. Skrypt relay będzie używać Twojej istniejącej funkcji fbq.

Możesz znaleźć ten fragment w Meta Events Manager w sekcji Pixel Ustawienia -> Kontynuuj konfigurację Pixel -> Zainstaluj kod ręcznie.

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

Poinformuj Zonos Checkout, który identyfikator Pixel ma być używany, ustawiając window.Zonos.facebookPixelId wewnątrz customHTML Twojej Kasy. Pulpit Zonos uwidacznia edytor customHTML w ustawieniach Checkout -- dodaj tag <script> w taki sposób:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Ta wartość jest wysyłana do strony nadrzędnej podczas uzgodnienia relay. Jeśli Twoja strona nadrzędna nie ma już załadowanego fbq, skrypt relay wstrzyknie kod podstawowy Meta Pixel za Ciebie, używając tego identyfikatora.

Krok 3: Dodaj skrypt relay analityki Zonos

Dodaj poniższy tag skryptu do tej samej strony, na której ładujesz iframe Checkout, po kodzie podstawowym Meta Pixel. To jest ten sam skrypt używany do Google Analytics 4 -- jeden relay obsługuje obie dostawcy, więc jeśli już go dodałeś dla GA4, pomiń ten krok.

1<script

2 async

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

4></script>

Kompletny przykład

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

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>

To wszystko. Gdy oba skrypty są na Twojej stronie, Facebook Pixel jest włączony w pulpicie Zonos, a customHTML ustawia identyfikator Pixel, relay automatycznie przekazuje wszystkie zdarzenia funnel kasy do Meta.

Referencja zdarzeń Meta Pixel

Dla każdego kroku w ścieżce Zonos Checkout uruchamia zarówno zdarzenie niestandardowe (abyś mógł budować precyzyjne odbiorców), jak i pasujące zdarzenie standardowe Meta (aby pojawiło się w optymalizacji i raportowaniu konwersji Meta). Wszystkie zdarzenia zawierają flagę isTestMode i checkoutSessionId.

Wyzwalacz↕	Zdarzenie niestandardowe (`fbq('trackCustom', ...)`)↕	Zdarzenie standardowe (`fbq('track', ...)`)↕	Dodatkowe metadane↕
Kasa się otwiera	`zonos-checkout-start`	`InitiateCheckout`	--
Kupujący wpisuje dane klienta	`zonos-checkout-customer-info`	none	--
Kupujący wybiera metodę wysyłki	`zonos-checkout-shipping-info`	none	`serviceLevelId`
Kupujący wpisuje dane płatności	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Próba płatności nie powiedzie się	`zonos-checkout-payment-fail`	none	--
Zamówienie zostało ukończone	`zonos-checkout-success`	none	`order_id`, `currency`, `value`, `contents`, `content_ids`
Zamówienie zostało ukończone (e-commerce)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Kupujący zamyka kasę	`zonos-checkout-close`	none	--

Kroki bez odpowiednika w standardowych zdarzeniach Meta (np. informacje o kliencie, informacje o wysyłce) uruchamiają tylko zdarzenie niestandardowe zonos-checkout-.... Możesz je kierować w Meta Ads Manager poprzez niestandardowe odbiorców używając "Event = zonos-checkout-customer-info", itd.

Metadane zdarzenia Purchase

Zdarzenie standardowe Purchase jest zgodne ze schematem zdarzenia Meta Pixel Purchase. Elementy koszyka są mapowane z tablicy stylu GA items do tablicy Meta contents:

Pole↕	Opis↕
`value`	Całkowita wartość zamówienia
`currency`	Trzyliterowy kod waluty (np. `USD`)
`order_id`	Identyfikator zamówienia Zonos lub identyfikator sesji kasy
`contents`	Tablica elementów koszyka, każdy z `id`, `quantity` i `item_price`
`content_ids`	Tablica identyfikatorów elementów (SKU, ID produktu lub fallback)
`content_type`	Zawsze `"product"`
`num_items`	Całkowita ilość na wszystkich elementach

Debugowanie

Aby włączyć dziennik debugowania dla skryptu relay, dodaj parametr zapytania zonosDebug=1 do adresu URL Twojej strony:

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

Otwórz konsolę programisty swojej przeglądarki, aby zobaczyć szczegółowe dzienniki uzgodnienia relay i przesyłanych zdarzeń. Jest to przydatne do weryfikacji:

Czy skrypt relay otrzymuje ping z iframe kasy.
Czy Meta Pixel jest skonfigurowany z prawidłowym identyfikatorem Pixel.
Czy zdarzenia są przesyłane do fbq z oczekiwanym trybem track / trackCustom.

Rozszerzenie Meta Pixel Helper Chrome jest również przydatne do inspekcji wywołań Pixel w czasie rzeczywistym.

Częste pytania

Dlaczego dla tego samego kroku uruchamiane są dwa zdarzenia (np. `zonos-checkout-start` i `InitiateCheckout`)?

Standardowe zdarzenia Meta zapewniają optymalizację konwersji, raportowanie reklam i odbiorców typu lookalike z pudełka. Niestandardowe zdarzenia zonos-checkout-... pozwalają Ci budować bardziej szczegółowe niestandardowe odbiorcy na dokładnym kroku funnel, nawet gdy nie istnieje odpowiednik standardowego Meta (np. informacje o kliencie, informacje o wysyłce). Uruchamianie obu daje Ci najlepsze z obu światów bez utraty jakiegokolwiek sygnału.

Co jeśli uruchamiam zarówno Google Analytics, jak i Facebook Pixel?

Nie potrzebujesz dwóch skryptów relay -- ten sam analyticsRelayOnInit.js obsługuje obie dostawców w jednym uzgodnieniu. Dodaj tag podstawowy GA4 i kod podstawowy Meta Pixel do <head>, ustaw zarówno window.Zonos.googleAnalyticId i window.Zonos.facebookPixelId w customHTML, i włącz obu dostawców w pulpicie Zonos. Każde zdarzenie jest rozprowadzane do dostawców, którzy są włączeni.

Co jeśli moja strona nadrzędna nie ma zainstalowanego Meta Pixel?

Jeśli Twoje customHTML ustawia window.Zonos.facebookPixelId i skrypt relay nie wykrywa fbq na stronie, wstrzyknie kod podstawowy Meta Pixel za Ciebie podczas uzgodnienia, używając podanego identyfikatora Pixel. Możesz także sam zainstalować kod podstawowy Meta Pixel, jeśli chcesz uruchamiać PageView i inne zdarzenia poza ścieżką kasy.

Czy zdarzenia testowe są śledzone?

Wszystkie zdarzenia zawierają pole isTestMode. Gdy Checkout jest w trybie testowym, zdarzenia są nadal przesyłane do Meta, ale oznaczone jako isTestMode: true. Możesz je filtrować w Meta Ads Manager lub wykluczać za pomocą niestandardowych reguł konwersji.

Czy Conversions API (CAPI) zastępuje to?

Nie -- to jest integracja Pixel po stronie przeglądarki, która działa w przeglądarkach Twoich kupujących. Meta Conversions API to oddzielny kanał server-to-server, który niektórzy handlowcy używają obok Pixel dla nadmiarowości. Te dwa są uzupełniające się, a relay Zonos obsługuje tylko Pixel po stronie przeglądarki.

Zarezerwuj demonstrację