Làm cách nào tôi có thể thiết lập Facebook Pixel với Zonos legacy iframe Checkout?

Thêm mã cơ sở Meta Pixel tiêu chuẩn vào trang lưu trữ iframe Checkout của bạn, đặt window.Zonos.facebookPixelId trong customHTML Checkout của bạn, bật Facebook Pixel trong bảng điều khiển Zonos của bạn, và thêm tập lệnh Zonos analyticsRelayOnInit.js. Tập lệnh chuyển tiếp tự động xử lý giao tiếp giữa các iframe và chuyển tiếp các sự kiện thanh toán đến Meta.

Zonos Checkout theo dõi những sự kiện Facebook Pixel nào?

Đối với mỗi bước trong funnel, Zonos kích hoạt cả sự kiện tùy chỉnh (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) và sự kiện tiêu chuẩn Meta phù hợp khi có: InitiateCheckout cho bắt đầu thanh toán, AddPaymentInfo cho thông tin thanh toán, và Purchase cho hoàn tất đơn hàng.

Tôi có thể chạy Google Analytics và Facebook Pixel cùng một lúc không?

Có. Cùng một tập lệnh analyticsRelayOnInit.js xử lý cả hai nhà cung cấp trong một bắt tay duy nhất. Thêm cả hai thẻ cơ sở vào trang của bạn, đặt window.Zonos.googleAnalyticId và window.Zonos.facebookPixelId trong customHTML, và bật cả hai nhà cung cấp trong bảng điều khiển Zonos của bạn.

Checkout•

Trang chủTài liệu tham khảo API Checkout REST API Facebook Pixel

Facebook Pixel cho Checkout iframe

Q: Làm cách nào tôi có thể gỡ lỗi các sự kiện Facebook Pixel từ Zonos Checkout?

Thêm tham số truy vấn zonosDebug=1 vào URL trang của bạn và mở bảng điều khiển dành cho nhà phát triển của trình duyệt để xem các nhật ký chi tiết của bắt tay chuyển tiếp và các sự kiện được chuyển tiếp. Tiện ích mở rộng Meta Pixel Helper Chrome cũng rất hữu ích để kiểm tra các lệnh gọi Pixel trong thời gian thực.

Theo dõi toàn bộ funnel thanh toán với Meta (Facebook) Pixel khi sử dụng tích hợp Checkout cũ dựa trên iframe.

Các nhà bán hàng sử dụng tích hợp Checkout cũ (iframe được lưu trữ trên iglobalstores.com) có thể theo dõi các sự kiện Meta Pixel trên toàn bộ funnel thanh toán. Zonos Checkout tự động chuyển tiếp các sự kiện phân tích từ iframe đến trang cha bằng cách sử dụng cùng một tập lệnh chuyển tiếp nhẹ được sử dụng cho Google Analytics 4, vì vậy các sự kiện sẽ xuất hiện trong Meta Events Manager của bạn như thể chúng bắt nguồn từ trang web của riêng bạn.

Đối với mỗi bước trong funnel, hai sự kiện được phát ra:

Một sự kiện tùy chỉnh có tên zonos-checkout-... (thông qua fbq('trackCustom', ...)) cho các khán giả tùy chỉnh toàn bộ funnel.
Sự kiện tiêu chuẩn Meta phù hợp (thông qua fbq('track', ...)) để tối ưu hóa tích hợp sẵn, ví dụ: InitiateCheckout, AddPaymentInfo và Purchase.

Các tích hợp gốc không cần hướng dẫn này. Nếu <zonos-checkout> hiển thị trực tiếp trên trang web của bạn (không có iframe), Zonos gọi window.fbq của trang bạn thay vào đó — chỉ cần bật Facebook Pixel trong bảng điều khiển Zonos trong phần Cài đặt thanh toán → Theo dõi và đảm bảo rằng mã cơ sở Meta Pixel thông thường của bạn được tải trên trang. Cài đặt chuyển tiếp dưới đây chỉ được yêu cầu khi Checkout được lưu trữ trong một iframe ở một nguồn gốc khác.

Cách hoạt động

Vì Zonos Checkout chạy bên trong một iframe ở một nguồn gốc khác, nó không thể truy cập trực tiếp hàm fbq của trang bạn. Hệ thống chuyển tiếp giải quyết vấn đề này bằng một bắt tay hai bước (các bước 1-2) theo sau là chuyển tiếp sự kiện (bước 3):

Checkout ping trang cha -- Khi thanh toán tải bên trong iframe, nó gửi một thông báo đến cửa sổ cha cho biết nó sẵn sàng chuyển tiếp các sự kiện, bao gồm cả ID Pixel.
Trang cha xác nhận -- Tập lệnh chuyển tiếp trên trang của bạn nhận được ping, phát hiện (hoặc tiêm) mã cơ sở Meta Pixel của bạn, và báo hiệu lại rằng nó sẵn sàng nhận các sự kiện.
Các sự kiện được chuyển tiếp -- Khi các khách hàng tiến bộ trong quá trình thanh toán, mỗi sự kiện phân tích được gửi qua postMessage đến trang của bạn, nơi tập lệnh chuyển tiếp chuyển nó đến fbq với chế độ track / trackCustom thích hợp.

Tất cả các thông báo được xác thực dựa trên các nguồn gốc Zonos đáng tin cậy (zonos.com và iglobalstores.com) chỉ qua HTTPS.

Điều kiện tiên quyết

Một Meta Pixel có ID Pixel (một chuỗi số, thường là 15-16 chữ số). Bạn có thể tạo một trong Meta Events Manager.
Một tích hợp Checkout cũ tải Zonos Checkout trong một iframe trên trang web của bạn.
Facebook Pixel được bật trong cài đặt Zonos Checkout của bạn (trong bảng điều khiển Zonos, trong Cài đặt thanh toán -> Theo dõi).

Thiết lập

Bước 1: Thêm mã cơ sở Meta Pixel vào trang của bạn

Nếu bạn chưa cài đặt Meta Pixel trên trang web của mình, hãy thêm mã cơ sở Pixel tiêu chuẩn vào <head> của trang lưu trữ iframe Checkout. Thay thế YOUR_PIXEL_ID bằng ID Pixel số của riêng bạn.

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>

Lưu ý: Nếu trang web của bạn đã cài đặt Meta Pixel (ví dụ: thông qua Google Tag Manager, tích hợp gốc của Shopify, hoặc một đoạn mã trực tiếp), bạn có thể bỏ qua bước này. Tập lệnh chuyển tiếp sẽ sử dụng hàm fbq hiện có của bạn.

Bạn có thể tìm thấy đoạn mã này trong Meta Events Manager của bạn dưới Pixel của bạn Cài đặt -> Tiếp tục Thiết lập Pixel -> Cài đặt mã thủ công.

Bước 2: Chuyển ID Pixel của bạn đến Zonos Checkout

Cho Zonos Checkout biết ID Pixel nào cần sử dụng bằng cách đặt window.Zonos.facebookPixelId bên trong customHTML của Checkout của bạn. Bảng điều khiển Zonos hiển thị trình chỉnh sửa customHTML trong cài đặt Thanh toán -- thêm một thẻ <script> như thế này:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

Giá trị này được gửi đến trang cha trong quá trình bắt tay chuyển tiếp. Nếu trang cha của bạn chưa có fbq được tải, tập lệnh chuyển tiếp sẽ tiêm mã cơ sở Meta Pixel cho bạn bằng cách sử dụng ID này.

Bước 3: Thêm tập lệnh chuyển tiếp phân tích Zonos

Thêm thẻ tập lệnh sau đây vào cùng trang tải iframe Checkout, sau mã cơ sở Meta Pixel. Đây là cùng một tập lệnh được sử dụng cho Google Analytics 4 -- một chuyển tiếp duy nhất xử lý cả hai nhà cung cấp, vì vậy nếu bạn đã thêm nó cho GA4, hãy bỏ qua bước này.

1<script

2 async

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

4></script>

Ví dụ hoàn chỉnh

Đây là cách cài đặt đầy đủ trông như thế nào trong <head> của trang của bạn:

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>

Đó là tất cả. Khi cả hai tập lệnh đều nằm trên trang của bạn, Facebook Pixel được bật trong bảng điều khiển Zonos của bạn, và customHTML đặt ID Pixel, chuyển tiếp tự động chuyển tiếp tất cả các sự kiện funnel thanh toán đến Meta.

Tham chiếu sự kiện Meta Pixel

Đối với mỗi bước trong funnel, Zonos Checkout kích hoạt cả sự kiện tùy chỉnh (vì vậy bạn có thể xây dựng khán giả chính xác) và sự kiện tiêu chuẩn Meta phù hợp (vì vậy nó hiển thị lên trong tối ưu hóa và báo cáo chuyển đổi của Meta). Tất cả các sự kiện đều bao gồm cờ isTestMode và checkoutSessionId.

Trigger↕	Custom event (`fbq('trackCustom', ...)`)↕	Standard event (`fbq('track', ...)`)↕	Additional metadata↕
Checkout opens	`zonos-checkout-start`	`InitiateCheckout`	--
Shopper enters customer info	`zonos-checkout-customer-info`	none	--
Shopper selects a shipping method	`zonos-checkout-shipping-info`	none	`serviceLevelId`
Shopper enters payment details	`zonos-checkout-payment-info`	`AddPaymentInfo`	`paymentMethod`
Payment attempt fails	`zonos-checkout-payment-fail`	none	--
Order completes successfully	`zonos-checkout-success`	none	`order_id`, `currency`, `value`, `contents`, `content_ids`
Order completes (e-commerce event)	`purchase`	`Purchase`	`order_id`, `currency`, `value`, `contents`, `content_ids`
Shopper closes checkout	`zonos-checkout-close`	none	--

Các bước không có sự kiện tiêu chuẩn Meta tương đương (ví dụ: thông tin khách hàng, thông tin vận chuyển) chỉ kích hoạt sự kiện tùy chỉnh zonos-checkout-.... Bạn có thể nhắm mục tiêu những sự kiện này trong Meta Ads Manager thông qua các khán giả tùy chỉnh bằng cách sử dụng "Event = zonos-checkout-customer-info", v.v.

Siêu dữ liệu sự kiện Mua hàng

Sự kiện tiêu chuẩn Purchase tuân theo sơ đồ sự kiện Purchase Meta Pixel. Các mục trong giỏ được ánh xạ từ mảng kiểu GA items vào mảng contents của Meta:

Field↕	Description↕
`value`	Total order value
`currency`	Three-letter currency code (e.g., `USD`)
`order_id`	Zonos order ID or checkout session ID
`contents`	Array of cart items, each with `id`, `quantity`, and `item_price`
`content_ids`	Array of item IDs (the SKU, product ID, or product name fallback)
`content_type`	Always `"product"`
`num_items`	Total quantity across all items

Gỡ lỗi

Để bật ghi nhật ký gỡ lỗi cho tập lệnh chuyển tiếp, hãy thêm tham số truy vấn zonosDebug=1 vào URL trang của bạn:

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

Mở bảng điều khiển dành cho nhà phát triển của trình duyệt để xem các nhật ký chi tiết của bắt tay chuyển tiếp và các sự kiện được chuyển tiếp. Điều này rất hữu ích để xác minh rằng:

Tập lệnh chuyển tiếp nhận ping từ iframe thanh toán.
Meta Pixel được cấu hình với ID Pixel chính xác.
Các sự kiện được chuyển tiếp đến fbq với chế độ track / trackCustom mong đợi.

Meta Pixel Helper tiện ích mở rộng Chrome cũng rất hữu ích để kiểm tra các lệnh gọi Pixel trong thời gian thực.

Câu hỏi thường gặp

Tại sao hai sự kiện được kích hoạt cho cùng một bước (ví dụ: `zonos-checkout-start` và `InitiateCheckout`)?

Các sự kiện tiêu chuẩn của Meta cung cấp tối ưu hóa chuyển đổi, báo cáo quảng cáo và khán giả tương tự ngay lập tức. Các sự kiện tùy chỉnh zonos-checkout-... cho phép bạn xây dựng các khán giả tùy chỉnh chi tiết hơn trên bước funnel chính xác, ngay cả khi không có sự kiện tiêu chuẩn Meta tương đương (ví dụ: thông tin khách hàng, thông tin vận chuyển). Kích hoạt cả hai mang lại cho bạn điều tốt nhất của cả hai thế giới mà không mất bất kỳ tín hiệu nào.

Nếu tôi chạy cả Google Analytics và Facebook Pixel thì sao?

Bạn không cần hai tập lệnh chuyển tiếp -- analyticsRelayOnInit.js tương tự xử lý cả hai nhà cung cấp trong một bắt tay duy nhất. Thêm thẻ GA4 cơ sở và mã cơ sở Meta Pixel vào <head> của bạn, đặt cả window.Zonos.googleAnalyticId và window.Zonos.facebookPixelId trong customHTML, và bật cả hai nhà cung cấp trong bảng điều khiển Zonos của bạn. Mỗi sự kiện được phân tán đến các nhà cung cấp nào được bật.

Nếu trang cha của tôi không cài đặt Meta Pixel thì sao?

Nếu customHTML của bạn đặt window.Zonos.facebookPixelId và tập lệnh chuyển tiếp phát hiện không có fbq trên trang, nó sẽ tiêm mã cơ sở Meta Pixel cho bạn trong quá trình bắt tay bằng cách sử dụng ID Pixel mà bạn cung cấp. Bạn cũng có thể cài đặt trước mã cơ sở Meta Pixel nếu bạn muốn kích hoạt PageView và các sự kiện khác bên ngoài funnel thanh toán.

Các đơn hàng thử nghiệm được theo dõi không?

Tất cả các sự kiện đều bao gồm một trường isTestMode. Khi Checkout ở chế độ thử nghiệm, các sự kiện vẫn được chuyển tiếp đến Meta nhưng được đánh dấu bằng isTestMode: true. Bạn có thể lọc những sự kiện này trong Meta Ads Manager hoặc loại trừ chúng bằng các quy tắc chuyển đổi tùy chỉnh.

API chuyển đổi (CAPI) có thay thế điều này không?

Không -- đây là tích hợp Pixel dựa trên trình duyệt chạy trong trình duyệt của các khách hàng của bạn. API Chuyển đổi Meta là một kênh máy chủ-đến-máy chủ riêng biệt mà một số nhà bán hàng sử dụng cạnh nhân bản của Pixel để dự phòng. Hai cái này bổ sung cho nhau và chuyển tiếp của Zonos chỉ xử lý Pixel dựa trên trình duyệt.

Book a demo