仕組み
Zonos Checkoutは別オリジンのiframe内で動作するため、ページのfbq関数に直接アクセスできません。リレーシステムは2段階のハンドシェイク（ステップ1〜2）と、その後のイベント転送（ステップ3）でこれを解決します:
- Checkoutが親にpingする -- iframe内でチェックアウトが読み込まれると、Pixel IDを含め、イベントリレーの準備ができたことを示すメッセージを親ウィンドウに送信します。
- 親が応答する -- ページ上のリレースクリプトがpingを受け取り、Meta Pixelベースコードを検出（または注入）し、イベント受信の準備ができていることを返信します。
- イベントが転送される -- ショッパーがチェックアウトを進めるにつれ、各アナリティクスイベントが
postMessage経由でページに送られ、リレースクリプトが適切なtrack/trackCustomモードでfbqに転送します。
すべてのメッセージは、信頼できるZonosオリジン（zonos.comとiglobalstores.com）に対してHTTPSのみで検証されます。
前提条件
- Pixel ID（通常15〜16桁の数字文字列）を持つMeta Pixel。Meta Events Managerで作成できます。
- ページ上の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に置き換えます。
<!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');</script>注記: サイトにすでにMeta Pixelがインストールされている場合（例: Google Tag Manager、Shopifyのネイティブ統合、または直接スニペット）、このステップはスキップできます。リレースクリプトは既存の
fbq関数を使用します。
このスニペットは、Meta Events ManagerのPixelのSettings -> Continue Pixel Setup -> Install code manuallyにあります。
ステップ2: Pixel IDをZonos Checkoutに渡す
CheckoutのcustomHTML内でwindow.Zonos.facebookPixelIdを設定し、使用するPixel IDをZonos Checkoutに伝えます。ZonosダッシュボードはCheckout settings配下にcustomHTMLエディタを提供します。次のような<script>タグを追加してください:
<script> window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';</script>この値はリレーハンドシェイク中に親へ送信されます。親ページにまだfbqが読み込まれていない場合、リレースクリプトはこのIDを使ってMeta Pixelベースコードを注入します。
ステップ3: Zonosアナリティクスリレースクリプトを追加する
Checkout iframeを読み込む同じページに、Meta Pixelベースコードの後で次のスクリプトタグを追加します。これはGoogle Analytics 4で使う同じスクリプトです。1つのリレーが両方のプロバイダーを処理するため、GA4用にすでに追加済みならこのステップはスキップしてください。
<script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"></script>完全な例
ページの<head>における完全なセットアップは次のとおりです:
<head> <!-- ... your existing head tags ... --> <!-- Meta Pixel Code --> <script> !(function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })( window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', ); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); </script> <!-- Zonos analytics relay for iframe checkout --> <script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js" ></script></head>以上です。両方のスクリプトがページにあり、ZonosダッシュボードでFacebook Pixelが有効で、customHTMLがPixel IDを設定していれば、リレーはすべてのチェックアウトファネルイベントをMetaへ自動転送します。
Meta Pixelイベントリファレンス
ファネルの各ステップで、Zonos Checkoutはカスタムイベント（精密なオーディエンス構築用）と対応するMeta標準イベント（Metaの最適化とコンバージョンレポート用）の両方を発火します。すべてのイベントにisTestModeフラグとcheckoutSessionIdが含まれます。
| トリガー↕ | カスタムイベント (fbq('trackCustom', ...))↕ | 標準イベント (fbq('track', ...))↕ | 追加メタデータ↕ |
|---|---|---|---|
| チェックアウトが開く | zonos-checkout-start | InitiateCheckout | -- |
| ショッパーが顧客情報を入力 | zonos-checkout-customer-info | none | -- |
| ショッパーが配送方法を選択 | zonos-checkout-shipping-info | none | serviceLevelId |
| ショッパーが支払い詳細を入力 | zonos-checkout-payment-info | AddPaymentInfo | paymentMethod |
| 支払い試行が失敗 | zonos-checkout-payment-fail | none | -- |
| 注文が正常に完了 | zonos-checkout-success | none | order_id, currency, value, contents, content_ids |
| 注文完了（eコマースイベント） | purchase | Purchase | order_id, currency, value, contents, content_ids |
| ショッパーがチェックアウトを閉じる | zonos-checkout-close | none | -- |
Meta標準相当がないステップ（例: 顧客情報、配送情報）はカスタム
zonos-checkout-...イベントのみを発火します。Meta Ads Managerでは「Event =zonos-checkout-customer-info」などのカスタムオーディエンスでこれらをターゲットできます。
Purchaseイベントのメタデータ
Purchase標準イベントはMeta Pixel Purchaseイベントスキーマに従います。カート品目はGA形式のitems配列からMetaのcontents配列へマッピングされます:
| Field↕ | Description↕ |
|---|---|
value | 注文合計金額 |
currency | 3文字の通貨コード（例: USD） |
order_id | Zonos注文IDまたはチェックアウトセッションID |
contents | カート品目の配列。各要素にid、quantity、item_price |
content_ids | 品目IDの配列（SKU、商品ID、または商品名のフォールバック） |
content_type | 常に"product" |
num_items | 全品目の合計数量 |
デバッグ
リレースクリプトのデバッグログを有効にするには、ページURLにzonosDebug=1クエリパラメータを追加します:
https://www.yourstore.com/checkout?zonosDebug=1ブラウザの開発者コンソールを開き、リレーハンドシェイクと転送イベントの詳細ログを確認します。次の検証に役立ちます:
- リレースクリプトがチェックアウトiframeからのpingを受信していること。
- Meta Pixelが正しいPixel IDで構成されていること。
- イベントが期待どおりの
track/trackCustomモードでfbqに転送されていること。
Meta Pixel Helper Chrome拡張機能も、Pixel呼び出しをリアルタイムで確認するのに役立ちます。
よくある質問
同じステップで2つのイベントが発火するのはなぜですか（例: zonos-checkout-startとInitiateCheckout）？
Metaの標準イベントは、コンバージョン最適化、広告レポート、類似オーディエンスをそのまま強化します。カスタムzonos-checkout-...イベントは、Meta標準相当がない場合（例: 顧客情報、配送情報）でも、正確なファネルステップでより細かいカスタムオーディエンスを構築できます。両方を発火すれば、シグナルを失わず両方の利点を得られます。
Google AnalyticsとFacebook Pixelの両方を実行している場合は？
リレースクリプトは2つ不要です。同じanalyticsRelayOnInit.jsが1回のハンドシェイクで両方のプロバイダーを処理します。<head>にGA4ベースタグとMeta Pixelベースコードを追加し、customHTMLでwindow.Zonos.googleAnalyticIdとwindow.Zonos.facebookPixelIdの両方を設定し、Zonosダッシュボードで両方のプロバイダーを有効にしてください。各イベントは有効なプロバイダーへ配信されます。
親ページにMeta Pixelがインストールされていない場合は？
customHTMLでwindow.Zonos.facebookPixelIdを設定し、リレースクリプトがページ上にfbqがないと検出した場合、提供したPixel IDを使ってハンドシェイク中にMeta Pixelベースコードを注入します。チェックアウトファネル外でPageViewなどのイベントを発火したい場合は、自分でMeta Pixelベースコードを事前インストールすることもできます。
テスト注文は追跡されますか？
すべてのイベントにisTestModeフィールドが含まれます。CheckoutがテストモードのときもイベントはMetaへリレーされますが、isTestMode: trueでフラグ付けされます。Meta Ads Managerで除外するか、カスタムコンバージョンルールで除外できます。
Conversions API（CAPI）でこれの代わりになりますか？
いいえ。これはショッパーのブラウザで動作するブラウザ側Pixel統合です。Meta Conversions APIは、一部のマーチャントが冗長性のためにPixelと併用する別のサーバー間チャネルです。両者は補完関係にあり、Zonosのリレーはブラウザ側Pixelのみを扱います。
iframe Checkout向けFacebook Pixel
iframeベースのレガシーCheckout連携で、Meta（Facebook）Pixelによりチェックアウトファネル全体を追跡します。
レガシーCheckout連携（
iglobalstores.com上のiframe）を利用するマーチャントは、チェックアウトファネル全体でMeta Pixelイベントを追跡できます。Zonos Checkoutは、Google Analytics 4と同じ軽量リレースクリプトを使い、iframeから親ページへアナリティクスイベントを自動転送するため、イベントは自サイト発のようにMeta Events Managerに表示されます。各ファネルステップで、2つのイベントが発行されます:
zonos-checkout-...という名前のカスタムイベント（fbq('trackCustom', ...)経由）。fbq('track', ...)経由）。例:InitiateCheckout、AddPaymentInfo、Purchase。