Zonosレガシーiframe CheckoutでGoogle Analytics 4を設定するには？

Checkout iframeをホストするページに標準のGA4 gtag.jsスニペットを追加し、続けてZonos analyticsRelayOnInit.jsスクリプトを追加します。リレースクリプトがクロスiframe通信を自動処理し、チェックアウトイベントをGA4プロパティへ転送します。

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

Zonos Checkoutは、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、および取引詳細付きの標準GA4 purchaseイベントを含む、チェックアウトファネル全体を追跡します。

GA4追跡のためにcreateTempCart API呼び出しを変更する必要がありますか？

いいえ。リレーシステムはcreateTempCart APIとは独立して動作します。ページにGA4タグとZonosリレースクリプトを追加するだけで十分です。

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

ページURLにzonosDebug=trueクエリパラメータを追加し、ブラウザの開発者コンソールでリレーハンドシェイクと転送イベントの詳細ログを確認します。Google AnalyticsのGA4 DebugViewでイベントをリアルタイム検証することもできます。

Checkout•

ホームAPIリファレンス Checkout REST API Google Analytics 4

iframe Checkout向けGoogle Analytics 4

iframeベースのレガシーCheckout連携で、GA4によりチェックアウトファネル全体を追跡します。

レガシーCheckout連携（iglobalstores.com上のiframe）を利用するマーチャントは、チェックアウトファネル全体でGA4アナリティクスイベントを追跡できます。Zonos Checkoutは軽量リレースクリプトでiframeから親ページへアナリティクスイベントを自動転送するため、イベントは自サイト発のようにGA4プロパティに表示されます。

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

Meta Adsのコンバージョンを追跡したい場合は、Facebook Pixelガイドを参照してください。同じリレースクリプトを使い、GA4と併用できます。

仕組み

Zonos Checkoutは別オリジンのiframe内で動作するため、ページのgtag関数に直接アクセスできません。リレーシステムは2段階のハンドシェイク（ステップ1〜2）と、その後のイベント転送（ステップ3）でこれを解決します:

Checkoutが親にpingする -- iframe内でチェックアウトが読み込まれると、イベントリレーの準備ができたことを示すメッセージを親ウィンドウに送信します。
親が応答する -- ページ上のリレースクリプトがpingを受け取り、既存のGA4構成を検出し、イベント受信の準備ができていることを返信します。
イベントが転送される -- ショッパーがチェックアウトを進めるにつれ、各アナリティクスイベントがpostMessage経由でページに送られ、リレースクリプトがgtagに転送します。

すべてのメッセージは、信頼できるZonosオリジン（zonos.comとiglobalstores.com）に対してHTTPSのみで検証されます。

前提条件

測定ID（形式: G-XXXXXXXXXX）を持つGA4プロパティ。Google Analyticsで作成できます。
ページ上のiframeでZonos Checkoutを読み込むレガシーCheckout連携。

セットアップ

ステップ1: ページにGA4タグを追加する

サイトにまだGA4がインストールされていない場合は、Checkout iframeをホストするページの<head>に標準のGoogle Analytics 4タグを追加してください。G-XXXXXXXXXXを自身の測定IDに置き換えます。

1

3<script

4 async

5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

6></script>

8<script>

9 window.dataLayer = window.dataLayer || [];

10 function gtag() {

11 dataLayer.push(arguments);

12 }

13 gtag('js', new Date());

14 gtag('config', 'G-XXXXXXXXXX');

15</script>

注記: サイトにすでにGA4タグがインストールされている場合（例: Google Tag Managerまたは直接スニペット）、このステップはスキップできます。リレースクリプトは既存のgtag関数を使用します。

このスニペットは、GA4プロパティのAdmin -> Data Streams -> ストリームを選択 -> View tag instructions -> Install manuallyにあります。

ステップ2: 測定IDをZonos Checkoutに渡す

CheckoutのcustomHTML内でwindow.Zonos.googleAnalyticIdを設定し、使用するGA4測定IDをZonos Checkoutに伝えます。ZonosダッシュボードはCheckout settings配下にcustomHTMLエディタを提供します。次のような<script>タグを追加してください:

1<script>

2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';

3</script>

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

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

同じページに、GA4タグの後で次のスクリプトタグを追加します。このスクリプトはZonos Checkout iframeからのアナリティクスイベントを待ち受け、gtagに転送します。

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 async

8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

9 ></script>

11 <script>

12 window.dataLayer = window.dataLayer || [];

13 function gtag() {

14 dataLayer.push(arguments);

15 }

16 gtag('js', new Date());

17 gtag('config', 'G-XXXXXXXXXX');

18 </script>

20 

22 <script

23 async

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

25 ></script>

26</head>

以上です。両方のスクリプトがページにあれば、リレースクリプトはチェックアウトiframeとのハンドシェイクを自動完了し、すべてのチェックアウトファネルイベントをGA4プロパティへ転送します。

GA4イベントリファレンス

Zonos Checkoutはリレー経由で次のイベントを発行します。すべてのイベントにisTestModeフラグとcheckoutSessionIdが含まれます。

Event↕	Trigger↕	Additional metadata↕
`zonos-checkout-start`	チェックアウトが開く	--
`zonos-checkout-customer-info`	ショッパーが顧客情報を入力	--
`zonos-checkout-shipping-info`	ショッパーが配送方法を選択	`serviceLevelId`
`zonos-checkout-payment-info`	ショッパーが支払い詳細を入力	`paymentMethod`
`zonos-checkout-payment-fail`	支払い試行が失敗	--
`zonos-checkout-success`	注文が正常に完了	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	ショッパーがチェックアウトを閉じる	--
`purchase`	注文完了（GA4標準eコマースイベント）	`transaction_id`, `currency`, `value`, `items`

Purchaseイベントのメタデータ

purchaseイベントはGA4 eコマースpurchaseイベントスキーマに従います:

Field↕	Description↕
`transaction_id`	Zonos注文IDまたはチェックアウトセッションID
`currency`	3文字の通貨コード（例: `USD`）
`value`	注文合計金額
`items`	カート品目の配列。各要素に`item_id`、`item_name`、`price`、`quantity`

デバッグ

リレースクリプトのデバッグログを有効にするには、ページURLにzonosDebug=1クエリパラメータを追加します:

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

ブラウザの開発者コンソールを開き、リレーハンドシェイクと転送イベントの詳細ログを確認します。次の検証に役立ちます:

リレースクリプトがチェックアウトiframeからのpingを受信していること。
GA4が正しい測定IDで構成されていること。
イベントがgtagに転送されていること。

よくある質問

`createTempCart` API呼び出しを変更する必要がありますか？

いいえ。リレーシステムはcreateTempCart APIとは独立して動作します。ページにGA4タグとリレースクリプトを追加するだけで十分です。

Google Analyticsにすでに`footerHTML`を使っている場合は？

createTempCart APIのfooterHTMLパラメータはチェックアウトiframe内にスクリプトを注入しますが、iframeオリジン内のページレベルイベント追跡に限定されます。リレー方式は自ドメインのGA4プロパティへイベントを送るため、1つのプロパティでファネル全体の可視性を得られるため推奨されます。

リレー設定後は、footerHTMLからGA4スクリプトを安全に削除できます。

Google AnalyticsのGA4デバッグモードで動作しますか？

はい。zonosDebug=1でブラウザの開発者コンソールにリレースクリプトログを有効にし、Google AnalyticsのGA4 DebugViewでイベントをリアルタイム検証できます。

テスト注文は追跡されますか？

すべてのイベントにisTestModeフィールドが含まれます。CheckoutがテストモードのときもイベントはGA4へ送信されますが、isTestMode: trueでフラグ付けされます。必要に応じてGA4のカスタムディメンションで除外できます。

デモを予約する