Zonosレガシーiframe CheckoutでFacebook Pixelを設定するには？

Checkout iframeをホストするページに標準のMeta Pixelベースコードを追加し、CheckoutのcustomHTMLでwindow.Zonos.facebookPixelIdを設定し、ZonosダッシュボードでFacebook Pixelを有効にし、Zonos analyticsRelayOnInit.jsスクリプトを追加します。リレースクリプトがクロスiframe通信を自動処理し、チェックアウトイベントをMetaへ転送します。

Zonos CheckoutはどのFacebook Pixelイベントを追跡しますか？

各ファネルステップで、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スクリプトが1回のハンドシェイクで両方のプロバイダーを処理します。両方のベースタグをページに追加し、customHTMLでwindow.Zonos.googleAnalyticIdとwindow.Zonos.facebookPixelIdを設定し、Zonosダッシュボードで両方のプロバイダーを有効にしてください。

Zonos CheckoutからのFacebook Pixelイベントをデバッグするには？

ページURLにzonosDebug=1クエリパラメータを追加し、ブラウザの開発者コンソールを開いてリレーハンドシェイクと転送イベントの詳細ログを確認します。Meta Pixel Helper Chrome拡張機能も、Pixel呼び出しをリアルタイムで確認するのに役立ちます。

Checkout•

ホームAPIリファレンス Checkout REST API Facebook 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', ...)経由）。
組み込み最適化向けの対応するMeta標準イベント（fbq('track', ...)経由）。例: InitiateCheckout、AddPaymentInfo、Purchase。

ネイティブ統合ではこのガイドは不要です。 <zonos-checkout>が自サイト上で直接レンダリングされる場合（iframeなし）、Zonosはページのwindow.fbqをその場で呼び出します。ZonosダッシュボードのCheckout settings → TrackingでFacebook Pixelを有効にし、通常のMeta Pixelベースコードがページに読み込まれていることを確認してください。以下のリレー設定は、Checkoutが別オリジンのiframeでホストされている場合にのみ必要です。

仕組み

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に置き換えます。

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の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>タグを追加してください:

1<script>

2 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';

3</script>

この値はリレーハンドシェイク中に親へ送信されます。親ページにまだfbqが読み込まれていない場合、リレースクリプトはこのIDを使ってMeta Pixelベースコードを注入します。

ステップ3: Zonosアナリティクスリレースクリプトを追加する

Checkout iframeを読み込む同じページに、Meta Pixelベースコードの後で次のスクリプトタグを追加します。これはGoogle Analytics 4で使う同じスクリプトです。1つのリレーが両方のプロバイダーを処理するため、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>

以上です。両方のスクリプトがページにあり、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配列へマッピングされます:

フィールド↕	説明↕
`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クエリパラメータを追加します:

1https://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のみを扱います。

デモを予約する