DOCS
Checkout•
홈API 참조 Checkout REST API Facebook Pixel

iframe Checkout을 위한 Facebook Pixel

iframe 기반 레거시 Checkout 통합을 사용할 때 Meta(Facebook) Pixel로 전체 checkout 퍼널을 추적하세요.

레거시 Checkout 통합(iglobalstores.com에서 호스팅되는 iframe)을 사용하는 판매자는 전체 checkout 퍼널에서 Meta Pixel 이벤트를 추적할 수 있습니다. Zonos Checkout은 Google Analytics 4에 사용된 것과 동일한 경량 릴레이 스크립트를 사용하여 iframe에서 부모 페이지로 분석 이벤트를 자동으로 중계하므로, 이벤트가 마치 귀하의 사이트에서 직접 발생한 것처럼 Meta 이벤트 관리자에 표시됩니다.

각 퍼널 단계마다 두 가지 이벤트가 발생합니다.

  • 전체 퍼널 맞춤 타겟을 위한 zonos-checkout-...라는 이름의 맞춤 이벤트(via fbq('trackCustom', ...)).
  • 기본 최적화를 위한 해당 Meta 표준 이벤트(via fbq('track', ...)), 예: InitiateCheckout, AddPaymentInfo, Purchase.

네이티브 통합에는 이 가이드가 필요하지 않습니다. <zonos-checkout>이 사이트에 직접 렌더링되는 경우(iframe 없음), Zonos는 페이지의 window.fbq를 그 자리에서 호출합니다 — Zonos 대시보드의 Checkout settings → Tracking에서 Facebook Pixel을 활성화하고, 평소 사용하는 Meta Pixel 기본 코드가 페이지에 로드되어 있는지 확인하기만 하면 됩니다. 아래의 릴레이 설정은 Checkout이 다른 origin의 iframe에서 호스팅되는 경우에만 필요합니다.

작동 방식 

Zonos Checkout은 다른 origin의 iframe 내부에서 실행되므로 페이지의 fbq 함수에 직접 접근할 수 없습니다. 릴레이 시스템은 2단계 핸드셰이크(1~2단계)와 이어지는 이벤트 전달(3단계)로 이 문제를 해결합니다.

  1. Checkout이 부모 창에 핑을 보냅니다 -- checkout이 iframe 내부에서 로드되면, 이벤트를 릴레이할 준비가 되었음을 나타내는 메시지를 Pixel ID와 함께 부모 창으로 전송합니다.
  2. 부모 창이 응답합니다 -- 페이지의 릴레이 스크립트가 핑을 수신하고, Meta Pixel 기본 코드를 감지(또는 삽입)한 다음, 이벤트를 받을 준비가 되었다는 신호를 다시 보냅니다.
  3. 이벤트가 전달됩니다 -- 쇼핑객이 checkout을 진행하는 동안, 각 분석 이벤트가 postMessage를 통해 페이지로 전송되고, 릴레이 스크립트가 적절한 track / trackCustom 모드로 이를 fbq에 전달합니다.

모든 메시지는 신뢰할 수 있는 Zonos origin(zonos.com 및 iglobalstores.com)에 대해 HTTPS를 통해서만 검증됩니다.

사전 요건 

  • Pixel ID(일반적으로 15~16자리의 숫자 문자열)가 있는 Meta Pixel. Meta 이벤트 관리자에서 생성할 수 있습니다.
  • 페이지의 iframe에서 Zonos Checkout을 로드하는 레거시 Checkout 통합.
  • Zonos Checkout 설정에서 Facebook Pixel이 활성화되어 있어야 합니다(Zonos 대시보드의 Checkout settings -> Tracking에서 확인).

설정 

1단계: 페이지에 Meta Pixel 기본 코드 추가

사이트에 아직 Meta Pixel이 설치되어 있지 않다면, Checkout iframe을 호스팅하는 페이지의 <head>에 표준 Pixel 기본 코드를 추가하세요. YOUR_PIXEL_ID는 본인의 숫자 Pixel ID로 교체하세요.

1<!-- Meta Pixel Code -->
2 
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 태그 관리자, Shopify의 기본 통합, 또는 직접 스니펫을 통해) 이 단계를 건너뛸 수 있습니다. 릴레이 스크립트는 기존의 fbq 함수를 사용합니다.

이 스니펫은 Meta 이벤트 관리자의 Pixel Settings -> Continue Pixel Setup -> Install code manually에서 찾을 수 있습니다.

2단계: Zonos Checkout에 Pixel ID 전달

Checkout의 customHTML 내부에서 window.Zonos.facebookPixelId를 설정하여 Zonos Checkout에 사용할 Pixel ID를 알려주세요. Zonos 대시보드는 Checkout settings 아래에 customHTML 편집기를 제공합니다 -- 다음과 같이 <script> 태그를 추가하세요.

1<script>
2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';
3</script>

이 값은 릴레이 핸드셰이크 중에 부모 페이지로 전송됩니다. 부모 페이지에 아직 fbq가 로드되어 있지 않다면, 릴레이 스크립트가 이 ID를 사용해 Meta Pixel 기본 코드를 대신 삽입합니다.

3단계: Zonos 분석 릴레이 스크립트 추가

Checkout iframe을 로드하는 동일한 페이지에서 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 <!-- ... your existing head tags ... -->
3 
4 <!-- Meta Pixel Code -->
5 
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>
33 
34 <!-- Zonos analytics relay for iframe checkout -->
35 
36 <script
37 async
38 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"
39 ></script>
40</head>

이것으로 끝입니다. 두 스크립트가 모두 페이지에 있고, Zonos 대시보드에서 Facebook Pixel이 활성화되어 있으며, customHTML에서 Pixel ID를 설정하면, 릴레이가 모든 checkout 퍼널 이벤트를 Meta로 자동 전달합니다.

Meta Pixel 이벤트 참조 

퍼널의 각 단계마다 Zonos Checkout은 맞춤 이벤트(정밀한 타겟을 구축할 수 있도록)와 해당 Meta 표준 이벤트(Meta의 최적화 및 전환 보고에 반영되도록)를 모두 발생시킵니다. 모든 이벤트에는 isTestMode 플래그와 checkoutSessionId가 포함됩니다.

트리거↕맞춤 이벤트 (fbq('trackCustom', ...))↕표준 이벤트 (fbq('track', ...))↕추가 메타데이터↕
Checkout이 열림zonos-checkout-startInitiateCheckout--
쇼핑객이 고객 정보를 입력zonos-checkout-customer-info없음--
쇼핑객이 배송 방법을 선택zonos-checkout-shipping-info없음serviceLevelId
쇼핑객이 결제 정보를 입력zonos-checkout-payment-infoAddPaymentInfopaymentMethod
결제 시도가 실패zonos-checkout-payment-fail없음--
주문이 성공적으로 완료됨zonos-checkout-success없음order_id, currency, value, contents, content_ids
주문 완료(전자상거래 이벤트)purchasePurchaseorder_id, currency, value, contents, content_ids
쇼핑객이 checkout을 닫음zonos-checkout-close없음--

Meta 표준 이벤트가 없는 단계(예: 고객 정보, 배송 정보)는 맞춤 zonos-checkout-... 이벤트만 발생시킵니다. Meta 광고 관리자에서 "이벤트 = zonos-checkout-customer-info" 등을 사용하는 맞춤 타겟을 통해 이러한 단계를 타겟팅할 수 있습니다.

Purchase 이벤트 메타데이터

Purchase 표준 이벤트는 Meta Pixel Purchase 이벤트 스키마를 따릅니다. 장바구니 항목은 GA 스타일의 items 배열에서 Meta의 contents 배열로 매핑됩니다.

필드↕설명↕
value총 주문 금액
currency세 글자 통화 코드(예: USD)
order_idZonos 주문 ID 또는 checkout 세션 ID
contents각 항목이 id, quantity, item_price를 포함하는 장바구니 항목 배열
content_ids품목 ID 배열(SKU, 제품 ID, 또는 대체값으로 제품 이름)
content_type항상 "product"
num_items모든 항목의 총 수량

디버깅 

릴레이 스크립트의 디버그 로깅을 활성화하려면 페이지 URL에 zonosDebug=1 쿼리 파라미터를 추가하세요.

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

브라우저의 개발자 콘솔을 열면 릴레이 핸드셰이크 및 전달된 이벤트에 대한 자세한 로그를 확인할 수 있습니다. 이는 다음을 확인하는 데 유용합니다.

  • 릴레이 스크립트가 checkout iframe으로부터 핑을 수신하는지.
  • Meta Pixel이 올바른 Pixel ID로 구성되어 있는지.
  • 이벤트가 예상된 track / trackCustom 모드로 fbq에 전달되고 있는지.

Meta Pixel Helper Chrome 확장 프로그램도 Pixel 호출을 실시간으로 확인하는 데 유용합니다.

자주 묻는 질문 

동일한 단계에서 두 개의 이벤트가 발생하는 이유는 무엇인가요(예: zonos-checkout-start와 InitiateCheckout)?

Meta의 표준 이벤트는 별도 설정 없이 전환 최적화, 광고 보고, 유사 타겟을 지원합니다. 맞춤 zonos-checkout-... 이벤트를 사용하면 Meta 표준 이벤트가 없는 경우(예: 고객 정보, 배송 정보)에도 정확한 퍼널 단계를 기준으로 더 세밀한 맞춤 타겟을 구축할 수 있습니다. 두 이벤트를 모두 발생시키면 신호를 잃지 않으면서 두 가지 장점을 모두 얻을 수 있습니다.

Google Analytics와 Facebook Pixel을 함께 사용하는 경우에는 어떻게 하나요?

두 개의 릴레이 스크립트가 필요하지 않습니다 -- 동일한 analyticsRelayOnInit.js가 하나의 핸드셰이크에서 두 공급자를 모두 처리합니다. <head>에 GA4 기본 태그와 Meta Pixel 기본 코드를 추가하고, customHTML에서 window.Zonos.googleAnalyticId와 window.Zonos.facebookPixelId를 모두 설정한 다음, Zonos 대시보드에서 두 공급자를 모두 활성화하세요. 각 이벤트는 활성화된 공급자에게 각각 전달됩니다.

부모 페이지에 Meta Pixel이 설치되어 있지 않다면 어떻게 되나요?

customHTML에서 window.Zonos.facebookPixelId를 설정했고 릴레이 스크립트가 페이지에서 fbq를 감지하지 못하면, 핸드셰이크 중에 제공한 Pixel ID를 사용해 Meta Pixel 기본 코드를 대신 삽입합니다. checkout 퍼널 외부에서 PageView나 다른 이벤트를 발생시키고 싶다면 Meta Pixel 기본 코드를 직접 미리 설치할 수도 있습니다.

테스트 주문도 추적되나요?

모든 이벤트에는 isTestMode 필드가 포함됩니다. Checkout이 테스트 모드일 때도 이벤트는 계속 Meta로 릴레이되지만 isTestMode: true로 플래그가 지정됩니다. Meta 광고 관리자에서 이를 필터링하거나 맞춤 전환 규칙으로 제외할 수 있습니다.

Conversions API(CAPI)가 이를 대체하나요?

아니요 -- 이는 쇼핑객의 브라우저에서 실행되는 브라우저 측 Pixel 통합입니다. Meta Conversions API는 일부 판매자가 중복성을 위해 Pixel과 함께 사용하는 별도의 서버 간 채널입니다. 두 가지는 서로 보완적이며, Zonos의 릴레이는 브라우저 측 Pixel만 처리합니다.

이 페이지가 도움이 되었나요?

지원 받기·법적 문서·© 2026 Zonos
이 페이지에서:
  • iframe Checkout을 위한 Facebook Pixel
  • Meta Pixel 이벤트 참조