Как мне настроить Facebook Pixel с помощью Zonos legacy iframe Checkout?

Добавьте стандартный базовый код Meta Pixel на вашу страницу, которая размещает iframe Checkout, установите window.Zonos.facebookPixelId в своём customHTML Checkout, включите Facebook Pixel в своей панели управления Zonos и добавьте скрипт Zonos analyticsRelayOnInit.js. Скрипт передачи автоматически обрабатывает кросс-iframe коммуникацию и пересылает события оформления заказа в Meta.

Какие события Facebook Pixel отслеживает Zonos Checkout?

Для каждого этапа воронки Zonos отправляет как пользовательское событие (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), так и соответствующее стандартное событие Meta, где оно существует: InitiateCheckout для начала оформления заказа, AddPaymentInfo для информации о платеже и Purchase для завершения заказа.

Могу ли я одновременно запустить Google Analytics и Facebook Pixel?

Да. Один и тот же скрипт analyticsRelayOnInit.js обрабатывает обоих поставщиков в единственном квитировании. Добавьте оба базовых тега на вашу страницу, установите window.Zonos.googleAnalyticId и window.Zonos.facebookPixelId в customHTML и включите обоих поставщиков в вашей панели управления Zonos.

Checkout•

ГлавнаяСправочник API REST API Checkout Facebook Pixel

Facebook Pixel для iframe Checkout

Q: Как мне отладить события Facebook Pixel из Zonos Checkout?

Добавьте параметр запроса zonosDebug=1 в URL вашей страницы и откройте консоль разработчика вашего браузера, чтобы увидеть подробные логи квитирования передачи и переданных событий. Расширение Chrome Meta Pixel Helper также полезно для проверки вызовов Pixel в реальном времени.

Отслеживайте всю воронку оформления заказа с помощью Meta (Facebook) Pixel при использовании интеграции iframe-based legacy Checkout.

Торговцы, использующие интеграцию legacy Checkout (iframe, размещённый на iglobalstores.com), могут отслеживать события Meta Pixel по всей воронке оформления заказа. Zonos Checkout автоматически передаёт события аналитики из iframe на родительскую страницу, используя тот же лёгкий скрипт передачи, который используется для Google Analytics 4, поэтому события появляются в вашем Meta Events Manager так, как будто они исходят от вашего собственного сайта.

Для каждого этапа воронки отправляются два события:

Пользовательское событие с названием zonos-checkout-... (через fbq('trackCustom', ...)) для создания полной воронки пользовательской аудитории.
Соответствующее стандартное событие Meta (через fbq('track', ...)) для встроенной оптимизации, например InitiateCheckout, AddPaymentInfo и Purchase.

Native интеграциям этот гайд не нужен. Если <zonos-checkout> отображается непосредственно на вашем сайте (без iframe), Zonos вызывает window.fbq вашей страницы вместо этого — просто включите Facebook Pixel в панели управления Zonos в разделе Checkout settings → Tracking и убедитесь, что ваш обычный базовый код Meta Pixel загружен на странице. Настройка передачи ниже требуется только при размещении Checkout в iframe на другом источнике.

Как это работает

Поскольку Zonos Checkout работает внутри iframe на другом источнике, он не может получить прямой доступ к функции fbq вашей страницы. Система передачи решает эту проблему с помощью двухэтапного квитирования (шаги 1-2), за которым следует передача события (шаг 3):

Checkout отправляет сигнал родительской странице — Когда checkout загружается внутри iframe, он отправляет сообщение родительскому окну, указывая на то, что он готов передавать события, включая ID Pixel.
Родительская страница подтверждает — Скрипт передачи на вашей странице получает сигнал, обнаруживает (или внедряет) ваш базовый код Meta Pixel и сигнализирует обратно, что он готов получать события.
События передаются — По мере продвижения покупателей по этапам оформления заказа, каждое событие аналитики отправляется через postMessage на вашу страницу, где скрипт передачи пересылает его на fbq с соответствующим режимом track / trackCustom.

Все сообщения проверяются на соответствие доверенным источникам Zonos (zonos.com и iglobalstores.com) только через HTTPS.

Предварительные требования

Meta Pixel с ID Pixel (числовая строка, обычно 15-16 цифр). Вы можете создать его в Meta Events Manager.
Интеграция legacy Checkout, которая загружает Zonos Checkout в iframe на вашей странице.
Facebook Pixel включён в параметрах Zonos Checkout (в панели управления Zonos в разделе Checkout settings -> Tracking).

Настройка

Шаг 1: Добавьте базовый код Meta Pixel на вашу страницу

Если вы ещё не установили Meta Pixel на свой сайт, добавьте стандартный базовый код Pixel в <head> страницы, которая размещает iframe Checkout. Замените YOUR_PIXEL_ID на ваш собственный числовой ID 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>

Примечание: Если на вашем сайте уже установлен Meta Pixel (например, через Google Tag Manager, встроенную интеграцию Shopify или прямой фрагмент кода), вы можете пропустить этот шаг. Скрипт передачи будет использовать вашу существующую функцию fbq.

Вы можете найти этот фрагмент в вашем Meta Events Manager в разделе Settings -> Continue Pixel Setup -> Install code manually.

Шаг 2: Передайте ваш ID Pixel в Zonos Checkout

Сообщите Zonos Checkout, какой ID Pixel использовать, установив window.Zonos.facebookPixelId внутри customHTML вашего Checkout. Панель управления Zonos предоставляет редактор customHTML в параметрах Checkout — добавьте тег <script> примерно так:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Это значение отправляется родительской странице во время квитирования передачи. Если на вашей родительской странице уже не загружен fbq, скрипт передачи внедрит базовый код Meta Pixel для вас, используя этот ID.

Шаг 3: Добавьте скрипт Zonos analytics relay

Добавьте следующий тег script на ту же страницу, которая загружает iframe Checkout, после базового кода Meta Pixel. Это тот же скрипт, который используется для Google Analytics 4 — один скрипт передачи обрабатывает обоих поставщиков, поэтому если вы уже добавили его для GA4, пропустите этот шаг.

1<script

2 async

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

4></script>

Полный пример

Вот как выглядит полная настройка в <head> вашей страницы:

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>

Вот и всё. Как только оба скрипта находятся на вашей странице, Facebook Pixel включён в вашей панели управления Zonos, и customHTML устанавливает ID Pixel, скрипт передачи автоматически пересылает все события воронки оформления заказа в Meta.

Справочник событий Meta Pixel

Для каждого этапа воронки Zonos Checkout отправляет как пользовательское событие (чтобы вы могли создать точную аудиторию), так и соответствующее стандартное событие Meta (чтобы оно отображалось в отчётах оптимизации и конверсии Meta). Все события включают флаг isTestMode и checkoutSessionId.

Триггер↕	Пользовательское событие (`fbq('trackCustom', ...)`)↕	Стандартное событие (`fbq('track', ...)`)↕	Дополнительные метаданные↕
Checkout открывается	`zonos-checkout-start`	`InitiateCheckout`	--
Покупатель вводит информацию о клиенте	`zonos-checkout-customer-info`	нет	--
Покупатель выбирает способ доставки	`zonos-checkout-shipping-info`	нет	`serviceLevelId`
Покупатель вводит данные платежа	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Попытка платежа не удалась	`zonos-checkout-payment-fail`	нет	--
Заказ успешно завершён	`zonos-checkout-success`	нет	`order_id`, `currency`, `value`, `contents`, `content_ids`
Заказ завершён (событие электронной коммерции)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Покупатель закрывает checkout	`zonos-checkout-close`	нет	--

Этапы без эквивалента стандартного события Meta (например, информация о клиенте, информация о доставке) отправляют только пользовательское событие zonos-checkout-.... Вы можете нацеливаться на них в Meta Ads Manager с помощью пользовательских аудиторий, используя "Event = zonos-checkout-customer-info" и т.д.

Метаданные события Purchase

Стандартное событие Purchase соответствует схеме события Meta Pixel Purchase. Товары в корзине сопоставляются из массива в стиле GA items в массив Meta contents:

Поле↕	Описание↕
`value`	Общая стоимость заказа
`currency`	Трёхбуквенный код валюты (например, `USD`)
`order_id`	ID заказа Zonos или ID сеанса оформления заказа
`contents`	Массив товаров в корзине, каждый с `id`, `quantity` и `item_price`
`content_ids`	Массив ID товаров (SKU, ID продукта или fallback имени продукта)
`content_type`	Всегда `"product"`
`num_items`	Общее количество по всем товарам

Отладка

Для включения отладочного логирования скрипта передачи добавьте параметр запроса zonosDebug=1 в URL вашей страницы:

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

Откройте консоль разработчика вашего браузера, чтобы увидеть подробные логи квитирования передачи и переданных событий. Это полезно для проверки того, что:

Скрипт передачи получает сигнал из iframe checkout.
Meta Pixel настроен с правильным ID Pixel.
События переданы на fbq с ожидаемым режимом track / trackCustom.

Помощник Meta Pixel расширение Chrome также полезно для проверки вызовов Pixel в реальном времени.

Часто задаваемые вопросы

Почему два события отправляются для одного этапа (например, `zonos-checkout-start` и `InitiateCheckout`)?

Стандартные события Meta обеспечивают оптимизацию конверсии, отчёты по объявлениям и похожие аудитории прямо из коробки. Пользовательские события zonos-checkout-... позволяют вам создавать более точные пользовательские аудитории на точном этапе воронки, даже если нет стандартного эквивалента Meta (например, информация о клиенте, информация о доставке). Отправка обоих даёт вам лучшее из обоих миров, не теряя никакого сигнала.

Что, если я запущу Google Analytics и Facebook Pixel одновременно?

Вам не нужны два скрипта передачи — один analyticsRelayOnInit.js обрабатывает обоих поставщиков в единственном квитировании. Добавьте оба базовых тега на вашу страницу, установите оба window.Zonos.googleAnalyticId и window.Zonos.facebookPixelId в customHTML и включите обоих поставщиков в вашей панели управления Zonos. Каждое событие распределяется на тех поставщиков, которые включены.

Что, если на моей родительской странице не установлен Meta Pixel?

Если ваш customHTML устанавливает window.Zonos.facebookPixelId и скрипт передачи обнаруживает отсутствие fbq на странице, он внедрит базовый код Meta Pixel для вас во время квитирования, используя предоставленный вами ID Pixel. Вы также можете предварительно установить базовый код Meta Pixel самостоятельно, если хотите отправлять PageView и другие события вне воронки оформления заказа.

Отслеживаются ли тестовые заказы?

Все события включают поле isTestMode. Когда Checkout находится в режиме тестирования, события всё ещё передаются в Meta, но помечены с isTestMode: true. Вы можете отфильтровать их в Meta Ads Manager или исключить с помощью пользовательских правил конверсии.

Заменяет ли Conversions API (CAPI) это?

Нет — это интеграция Pixel на стороне браузера, которая работает в браузерах ваших покупателей. Meta Conversions API — это отдельный канал сервер-к-серверу, который некоторые торговцы используют наряду с Pixel для избыточности. Эти два дополняют друг друга, а реле Zonos обрабатывает только браузерный Pixel.

Записаться на демонстрацию