DOCS

Facebook Pixel

iframe용 Facebook 픽셀Checkout

전체를 추적하세요Checkout- 유입 경로Meta(페이스북) 픽셀 앳 원 iframe 기반 레거시Checkout-완성.

유산을 지닌 딜러Checkout-통합(iframeiglobalstores.com) 할 수 있다Meta-전체에 걸친 픽셀 이벤트Checkout-퍼널 추구하다.Zonos Checkout분석 이벤트를 iframe에서 자동으로 라우팅합니다. 상위 페이지 - 동일한 경량 릴레이 스크립트 사용 Google Analytics 4, 그래서 당신의 이벤트Meta이벤트 관리자는 마치 내가 보낸 것처럼 나타납니다. 자신의 웹사이트.

각 유입경로 단계마다 두 가지 이벤트가 발생합니다.

  • 이름이 지정된 맞춤 이벤트zonos-checkout-...(위에fbq('trackCustom', ...)) 전체 퍼널 맞춤 타겟.
  • 적절한 것Meta-표준 이벤트(를 통해fbq('track', ...)) 내장용 최적화, 예:InitiateCheckout, AddPaymentInfo그리고Purchase.

기본 통합에는 이 가이드가 필요하지 않습니다.<zonos-checkout>렌더링하다 귀하의 웹사이트로 직접 이동합니다(iframe 없음).Zonos그만큼window.fbq귀하의 페이지에 위치 – 활성화하기만 하면 됩니다Facebook Pixel에서Zonos Dashboard아래 Checkout설정추적 및 평소와 같은 상태인지 확인하세요.Meta-픽셀 베이스 사용 코드가 페이지에 로드됩니다. 다음 릴레이 구성은 다음 경우에만 필요합니다. Checkout다른 출처의 iframe에서 호스팅됩니다.

작동 방식 

거기Zonos Checkout다른 출처의 iframe에서 실행되는 것은 무엇입니까? 직접 접근할 수는 없습니다fbq- 귀하의 사이트에 대한 액세스 기능. 릴레이 시스템은 이 문제를 해결합니다. 2단계 핸드셰이크(1~2단계)와 이벤트 전달(3단계)을 사용합니다.

1.**Checkout부모에게 핑을 보냅니다 ** –Checkoutiframe에 로드되고, 전달할 준비가 되었음을 나타내는 메시지를 상위 창에 보냅니다. 픽셀 ID를 포함한 이벤트. 2. 부모님 확인 - 귀하 측의 릴레이 스크립트가 핑을 수신합니다. 당신을 인식합니다Meta-픽셀 기본 코드(또는 삽입) 및 해당 사실을 알리는 신호 이벤트를 받을 준비가 되었습니다. 3. 이벤트는 전달됩니다 - 구매자가 결제 과정을 어떻게 진행하는지에 따라 다름 분석 이벤트가 종료되었습니다postMessage릴레이가 발생하는 사이트로 전송됨 스크립트가 안내합니다.fbq해당하는 것과track / trackCustom더 나아가. 방법.

모든 메시지는 신뢰성을 기반으로 합니다.Zonos-원산지(zonos.com그리고 검증됨iglobalstores.com) HTTPS를 통해서만 가능합니다.

요구 사항 

– AMeta-픽셀 픽셀 ID(숫자 문자열, 일반적으로 15~16자리)가 있습니다. 하나를 만들 수 있습니다 Meta이벤트 관리자.

  • 나이가 많은 것Checkout-통합**,Zonos Checkoutiframe에 로드 귀하의 페이지.
  • Facebook Pixel활성화Zonos Checkout설정(에서Zonos Dashboard, 아래에Checkout설정 -> 추적).

설정 

1단계: 추가Meta-사이트에 픽셀 기본 코드 추가

당신이Meta Pixel사이트에 아직 설치하지 않은 경우 기본값을 추가하세요. 픽셀 기본 코드<head>그 페이지Checkoutiframe 호스트. 바꾸다YOUR_PIXEL_ID자신의 숫자 픽셀 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픽셀 아래의 이벤트 관리자 설정 -> 픽셀 설정 계속 -> 수동으로 코드 설치.

2단계: Pixel ID 제출Zonos Checkout공유하다Zonos Checkout어떤 픽셀 ID를 사용해야 할까요?window.Zonos.facebookPixelId세트

당신 안에Checkout'에스customHTML. 그만큼Zonos-Dashboard보여줍니다customHTML- 아래 편집자Checkout-설정 – 삽입<script>-다음과 같이 태그하세요.

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

이 값은 릴레이 핸드셰이크 중에 상위 서버로 전송됩니다. 부모님이라면 옆에 있으면fbq아직 로드되지 않은 경우 릴레이 스크립트는 다음을 추가합니다.Meta에 이 ID를 사용하는 픽셀 기본 코드입니다.

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

다음 스크립트 태그를 포함하는 동일한 페이지에 추가하십시오.Checkout-Iframe 로드: 그 후Meta Pixel-베이스 코드. 이는 Google에 사용되는 동일한 스크립트입니다. 분석 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>

그게 다야. 두 스크립트가 모두 사이트에 있으면 Facebook Pixel이 Zonos Dashboard에서 활성화되고 customHTML에서 픽셀 ID를 설정하면 릴레이가 자동으로 전달됩니다. 모두를 안내합니다Checkout- 퍼널 이벤트Meta더 나아가.

참조Meta-픽셀 이벤트 

유입경로의 각 단계에 대해 해결하세요.Zonos Checkout둘 다 맞춤 이벤트(예: 정확한 대상 그룹을 구축할 수 있음) 및 올바른 대상 그룹Meta-표준 이벤트(표시되는 방식) 최적화 및 전환 보고에 사용됩니다.Meta나열됨). 모든 이벤트에는 하나가 포함됩니다.isTestMode플래그랑 그거랑checkoutSessionId.

트리거맞춤 이벤트(fbq('trackCustom', ...))기본 이벤트(fbq('track', ...))추가의Meta데이터
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
구매자가 결제를 종료합니다zonos-checkout-close없음--

없는 단계Meta-표준 동등물(예: 고객 정보, 배송 정보) 맞춤 하나만zonos-checkout-...-트리거 이벤트. 이거 넣으시면 됩니다Meta구체적으로 주소 '이벤트 ='를 사용하여 맞춤 타겟을 통한 광고 관리자zonos-checkout-customer-info“, 등

이벤트 메타데이터 구매

기본 이벤트Purchase그 뒤를 따른다 Meta Pixel Purchase-이벤트계획. 장바구니 항목은 다음에서 가져옵니다.items-GA 스타일 어레이 덴Meta할당됨contents배열:

필드설명
value총 주문 금액
currency3자리 통화 코드(예:USD)
order_idZonos주문 ID 또는Checkout-세션 ID
contents장바구니 항목 배열(각각 포함)id, quantity그리고item_price
content_ids품목 ID 배열(SKU, 제품 ID 또는 제품 이름 대체)
content_type언제나"product"
num_items모든 품목의 총 수량

디버깅 

릴레이 스크립트에 대한 디버그 로깅을 활성화하려면 쿼리를 추가하세요.zonosDebug=1추가됨 페이지 URL 매개변수:

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

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

– 릴레이 스크립트는 다음에서 핑을 받습니다.Checkout-아이프레임.

-Meta Pixel올바른 픽셀 ID로 구성되었습니다.

  • 이벤트가 진행중입니다fbq예상과 함께track / trackCustom전달됨 모드.

Meta Pixel돕는 사람Chrome 확장 프로그램은 Pixel 통화를 실시간으로 확인하는 데에도 유용합니다.

자주 묻는 질문 

동일한 단계에 대해 두 개의 이벤트가 트리거되는 이유는 무엇입니까(예:zonos-checkout-start그리고InitiateCheckout)?

기본 이벤트Meta전환 최적화, 광고 보고 및 유사 활성화 상자 밖으로 청중. 커스텀으로zonos-checkout-...- 당신이 만들 수 있는 이벤트 없음에도 불구하고 정확한 퍼널 단계에서 더 자세한 맞춤 타겟Meta존재한다 이에 상응하는 표준 정보(예: 고객 정보, 배송 정보)가 존재합니다. 난 둘 다 해고해 신호 손실 없이 두 세계의 장점을 모두 누릴 수 있습니다.

둘 다 있으면 어떻게 되나요?Google Analytics게다가Facebook Pixel사용?

두 개의 릴레이 스크립트가 필요하지 않습니다. 동일한 것입니다.analyticsRelayOnInit.js-손잡이 단일 핸드셰이크에서 두 공급자 모두. 그거 추가해GA4-베이스 태그와 그Meta-픽셀 추가 귀하의 기본 코드<head>, 둘 다 설정window.Zonos.googleAnalyticId그것도 하나window.Zonos.facebookPixelId~에customHTML두 공급자를 모두 활성화합니다. 당신Zonos Dashboard. 각 이벤트는 해당 공급자로 확장됩니다. 활성화되었습니다.

상위 페이지에 없으면 어떻게 되나요?Meta Pixel설치되어 있나요?

당신의 것이라면customHTML window.Zonos.facebookPixelId릴레이 스크립트를 설정합니다. 아무도 알아보지 못해요fbq그쪽에는Meta-당신을 위해 삽입된 픽셀 기본 코드 지정한 픽셀 ID로 핸드셰이크하는 동안. 미리 설치할 수도 있습니다 는Meta-픽셀 기본 코드 자체를 사용하는 경우PageView그리고 다른 사람들을 자극하고 싶어 밖의 이벤트Checkout깔때기.

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

모든 이벤트에는isTestMode-필드. 만약에Checkout테스트 모드인 경우 이벤트가 표시됩니다. 계속 켜져 있을 거예요Meta전달되었지만isTestMode: true두드러진. 필터링할 수 있습니다. 이것을 입력하세요Meta광고 관리자를 사용하거나 맞춤 전환 규칙을 사용하여 제외하세요.

전환을 대체합니다.API(기음API) 이것?

아니요. 이는 구매자의 브라우저에서 실행되는 브라우저측 픽셀 통합입니다. 브라우저. 그만큼Meta전환API별도의 서버 간 채널입니다. 일부 소매업체에서는 중복성 때문에 Pixel 외에 다른 제품도 사용합니다. 둘은 서로를 보완한다. 그리고 릴레이는Zonos브라우저 측 픽셀만 처리합니다.

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