GA4とGTMで実装する最新eコマース計測完全ガイド

2026年6月21日

Contents

1 GA4 と従来 UA の計測方式の違い
2 実装前提条件と dataLayer の基本概念
3 eコマース対象ページへの dataLayer 変数追加サンプルコード
4 GTM での GA4 Event タグ設定手順
5 コンバージョン登録・検証フローとよくある失敗対策
6 まとめ
- 6.1 参考リンク

スポンサードリンク

GA4 と従来 UA の計測方式の違い

GA4 は「すべてイベント」モデルへ完全に移行し、ページビューやトランザクションといったヒットタイプが廃止されています。この記事では、UA から GA4 への移行で最も重要になる データ構造の変化 と eコマース実装上のメリット を解説します。結論としては、GA4 のイベント＋パラメータ方式がレポート統合をシンプルにし、拡張性を大幅に向上させる点です。

イベント中心モデルの概要

GA4 では「event」だけが共通のヒット種別となり、必須パラメータは公式ドキュメントで JSON スキーマとして定義されています（2025‑11‑21 更新版）【1】。このため、ページ閲覧・購入完了・カート追加すべてを同一フォーマットで送信でき、サーバー側のパース処理が統一化します。

UA との主な違い

項目	ユニバーサルアナリティクス（UA）	Google Analytics 4（GA4）
データモデル	ページビュー、イベント、トランザクションとヒット種別が分離	すべて「event」＋パラメータで統一
eコマース実装	`ecommerce` オブジェクトを `ga('send', …)` で送信	`event_name: "purchase"` と `items[]` 配列を dataLayer に push
推奨パラメータ	カスタムディメンションが必須になるケース多数	標準 eコマースパラメータ（item_id, item_name, price など）が自動推奨
デバッグ手段	限定的なリアルタイムレポート	DebugView とリアルタイムレポートで即時確認可能

実装イメージ（UA → GA4）

UA：transaction_id、revenue を含む トランザクションヒット を送信
GA4：purchase イベントに items[], value, currency などのパラメータを一括で送信（公式ヘルプ参照）【2】

実装前提条件と dataLayer の基本概念

このセクションでは、GA4 計測を開始するために必要な 環境構築手順 と dataLayer の役割・初期化方法 をまとめます。設定ミスの多くはここでの抜け落ちが原因になるため、手順を正確に実行してください。

GA4 プロパティ作成手順

Google Analytics にログインし、左下の 「管理」 → 「プロパティ」 → 「+ プロパティを作成」 をクリック。
「Web」を選択し、サイト URL とストリーム名を入力すると測定 ID（例：G-XXXXXXXXX）が発行されます。
拡張測定は自動で有効化 されていますが、eコマース計測は手動設定が必要です。公式ドキュメントの「拡張 e コマースを有効にする」手順【3】に従ってスイッチを ON にしてください。

GTM コンテナ設置方法

Google Tag Manager にログインし、「新規コンテナ」 → 「Web」 を選択。
発行されたスニペットを <head> の直後 と <body> の開始直前 に貼り付けます。
GTM のプレビュー機能でタグが正しく読み込まれることを確認します（公式ヘルプ参照）【4】。

dataLayer とは何か ― 初期化コード例

dataLayer はページ上の JavaScript 配列で、GTM が常に監視する イベントストリーム です。push() されるたびに GTM のトリガーが評価されます。以下は全ページ共通で使用する初期化コードです。

&lt;script&gt;
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'gtm.js',
  'gtm.start': new Date().getTime()
});
&lt;/script&gt;

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

dataLayer.push({

event: 'gtm.js',

'gtm.start': new Date().getTime()

});

</script>

ポイント：このスクリプトは GTM 本体よりも先に配置し、ページロード直後に dataLayer が利用可能な状態を保証します。

eコマース対象ページへの dataLayer 変数追加サンプルコード

本節では、2025‑11‑21 に更新された GA4 推奨パラメータ構造（公式開発者ドキュメント）【5】に沿った主要イベントの dataLayer.push オブジェクト例を示します。必須項目は item_id, item_name, price, quantity の 4 つです。

商品詳細ページ（view_item）

&lt;script&gt;
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [
      {
        item_id: 'SKU_12345',
        item_name: 'レザーサンダル',
        price: 9800,
        currency: 'JPY',
        item_brand: 'ABCブランド',
        item_category: 'シューズ/サンダル',
        index: 1
      }
    ]
  }
});
&lt;/script&gt;

dataLayer.push({

event: 'view_item',

ecommerce: {

items: [

{

item_id: 'SKU_12345',

item_name: 'レザーサンダル',

price: 9800,

currency: 'JPY',

item_brand: 'ABCブランド',

item_category: 'シューズ/サンダル',

index: 1

}

]

}

});

</script>

ポイント：view_item はページビューの代替として商品情報を送信し、GA4 の「商品詳細」レポートに反映されます。

カート追加イベント（add_to_cart）

&lt;script&gt;
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    items: [
      {
        item_id: 'SKU_12345',
        item_name: 'レザーサンダル',
        price: 9800,
        quantity: 1,
        currency: 'JPY'
      }
    ]
  }
});
&lt;/script&gt;

dataLayer.push({

event: 'add_to_cart',

ecommerce: {

items: [

{

item_id: 'SKU_12345',

item_name: 'レザーサンダル',

price: 9800,

quantity: 1,

currency: 'JPY'

}

]

}

});

</script>

ポイント：add_to_cart は購入ファネル上部の重要指標で、離脱分析に有用です。

購入手続き開始（begin_checkout）

&lt;script&gt;
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    items: [
      {
        item_id: 'SKU_12345',
        item_name: 'レザーサンダル',
        price: 9800,
        quantity: 1,
        currency: 'JPY'
      }
    ]
  }
});
&lt;/script&gt;

dataLayer.push({

event: 'begin_checkout',

ecommerce: {

items: [

{

item_id: 'SKU_12345',

item_name: 'レザーサンダル',

price: 9800,

quantity: 1,

currency: 'JPY'

}

]

}

});

</script>

ポイント：チェックアウト開始はファネルの上位段階を可視化し、改善施策の優先順位付けに役立ちます。

購入完了（purchase）

&lt;script&gt;
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORDER_98765',
    value: 9800,
    tax: 0,
    shipping: 0,
    currency: 'JPY',
    items: [
      {
        item_id: 'SKU_12345',
        item_name: 'レザーサンダル',
        price: 9800,
        quantity: 1
      }
    ]
  }
});
&lt;/script&gt;

dataLayer.push({

event: 'purchase',

ecommerce: {

transaction_id: 'ORDER_98765',

value: 9800,

tax: 0,

shipping: 0,

currency: 'JPY',

items: [

{

item_id: 'SKU_12345',

item_name: 'レザーサンダル',

price: 9800,

quantity: 1

}

]

}

});

</script>

ポイント：purchase が GA4 の「売上」指標に直結します。必ず transaction_id はユニークに設定してください。

GTM での GA4 Event タグ設定手順

dataLayer にイベントが流れたら、GTM 側で GA4 Event タグ を作成し、GA4 プロパティへ送信します。以下は実務で頻繁に利用される標準的な手順です。

タグ作成と GA4 設定変数の紐付け

GTM の 「タグ」 → 「新規」 から 「Google Analytics: GA4 イベント」 を選択。
「設定変数」に、先に作成した GA4 測定 ID（G-XXXXXXXXX） を参照する 「GA4 設定」変数 を指定。
タグ名は GA4 – view_item のようにイベント名が分かる形で付けます。

イベント名とパラメータのマッピング方法

Data Layer キー	GA4 パラメータ名	例（変数設定）
`event`	event_name	`{{DL – event}}`
`ecommerce.items[*].item_id`	items[].item_id	`{{DL – item_id}}`
`ecommerce.items[*].price`	items[].price	`{{DL – price}}`
`ecommerce.transaction_id`	transaction_id	`{{DL – transaction_id}}`

変数タブで「Data Layer 変数」を作成し、上表のキーをそれぞれ登録。
タグ編集画面の「パラメータ」欄に 名前: 値 の形でマッピングします。

トリガー条件の設定例（カスタムイベント）

「トリガー」 → 「新規」 → 「カスタムイベント」
イベント名に {{DL – event}} を入力し、「等しい」 条件で対象の dataLayer イベント名（例：view_item）を指定。
必要に応じて 「一度だけ」 発火させる設定やページ URL のフィルタを追加します。

ポイント：同一ページ内で複数イベントが発生する場合は、タグごとに個別トリガーを作成し、タグの順序 で優先順位を調整すると二重送信を防げます。

コンバージョン登録・検証フローとよくある失敗対策

実装後は GA4 の管理画面で 拡張 eコマース有効化 → コンバージョン設定 → デバッグ を順に行い、データが正しく収集されているか確認します。

拡張 e コマースを有効にする手順

GA4 プロパティの左メニューから 「設定」→「イベント」→「拡張 eコマース設定」 を開く。
スイッチを ON にし、保存します（公式ヘルプ参照）【6】。

重要イベントをコンバージョンとして登録する方法

「イベント」一覧から purchase と add_to_cart を探す。
各行右端の 「コンバージョンとしてマーク」 ボタンをクリック。
必要に応じて 計測対象期間 や 価値上書き を設定し、保存します。

DebugView とリアルタイムレポートでの検証フロー

検証手順	操作ポイント
DebugView 起動	GA4 左メニュー → 「デバッグビュー」へ。Chrome 拡張「GA4 Debugger」または `gtag('set','debug_mode',true)` を有効化してテスト。
イベント確認	dataLayer に push した瞬間に、DebugView に対象イベントがリアルタイムで表示されるかチェック。
パラメータ検証	各イベントの詳細画面で必須パラメータ（item_id, value 等）が正しく送信されているか確認。
リアルタイムレポート	「リアルタイム」→「コンバージョン」で `purchase` が即時にカウントされることを最終確認。

失敗例と具体的な対策

二重送信
原因：同一ページで dataLayer.push を複数回実行、またはタグが「すべてのページ」で発火。
対策：event 名にユニークサフィックス（例：view_item_1）を付与し、トリガーで 「一度だけ」 発火させる。
必須パラメータ欠如
原因：商品情報取得ロジックの不具合で item_id が空になる。
対策：push 前に JavaScript で null/undefined をチェックし、欠損時は console.warn とともに送信をスキップ。
タグ発火順序ミス
原因：GA4 設定変数のロードが遅れ、イベントタグが先に走る。
対策：GTM の「タグ設定」→「発火条件」で 「ページビュー（gtm.js） → 後」 を選択し、必ず GA4 設定タグが先に実行されるようにする。

まとめ

GA4 はイベント＋パラメータで計測し、eコマースは view_item, add_to_cart, begin_checkout, purchase の４つが基本です。
実装前に プロパティ作成 → GTM コンテナ設置 → dataLayer 初期化 を完了させましょう。
各ページで 正しい JSON 形式の dataLayer.push を行い、GTM の GA4 Event タグとトリガーを紐付けます。
GA4 管理画面で 拡張 eコマース有効化 → コンバージョン登録 を忘れずに実施し、DebugView とリアルタイムレポートで必ず検証します。
二重送信・パラメータ欠損・発火順序ミスは、事前のコードレビューと GTM の設定チェックで防げます。

これらの手順を順守すれば、GA4 と GTM による eコマース計測が確実に機能し、売上分析や改善策立案に活用できるようになります。

参考リンク

Google Analytics 4 イベントスキーマ（2025‑11‑21 更新）
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?hl=ja
GA4 eコマース実装ガイド（公式ヘルプ）
https://support.google.com/analytics/answer/9268036?hl=ja
拡張 eコマースを有効にする手順（Google ヘルプ）
https://support.google.com/analytics/answer/9322687?hl=ja
GTM プレビュー機能の使い方（公式ドキュメント）
https://developers.google.com/tag-manager/devguide#preview_mode
GA4 イベントパラメータ一覧（2025‑11‑21 更新版）
https://developers.google.com/analytics/devguides/collection/ga4/reference/events?hl=ja
DebugView の利用方法（Google Analytics ヘルプ）
https://support.google.com/analytics/answer/9216061?hl=ja

スポンサードリンク

-Google Analytics