GTMでGA4のeコマース計測を完全設定する手順【Shopify対応】

はじめに

「ShopifyでGA4のeコマース計測を設定したいけど、dataLayerの構造がよくわからない」。「GTMでタグを作ったのに、GA4のレポートに売上データが反映されない」。こんな悩みを抱えているEC担当者やマーケターは多いのではないでしょうか。

GA4のeコマース計測は、従来のユニバーサルアナリティクスとはデータ構造が大きく異なります。さらにShopifyは独自のチェックアウトフローを持つため、一般的なGTM設定ガイドがそのまま使えないケースも少なくありません。

本記事では、GTMを使ってGA4のeコマースイベントをShopifyサイトに設定する手順を、dataLayerの構造からGTMのタグ・トリガー・変数の設定まで一通り解説します。

GA4 eコマースイベントの全体像

GA4のeコマース計測では、購買ファネルに沿った以下の4つのイベントが重要です。

イベント名	発火タイミング	計測できること
`view_item`	商品詳細ページの表示	商品閲覧数・人気商品の把握
`add_to_cart`	カートに追加	カート追加率・カゴ落ち分析
`begin_checkout`	チェックアウト開始	チェックアウト離脱率
`purchase`	購入完了	売上・コンバージョン

これらのイベントにはすべてitems配列（商品データ）を含める必要があります。items配列が欠落していると、GA4のeコマースレポートにデータが表示されません。

dataLayerの構造（イベント別）

各イベントでdataLayerにpushするデータ構造を確認しましょう。

view_item

dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "JPY",
    value: 3980,
    items: [
      {
        item_id: "SKU-001",
        item_name: "オーガニックハンドクリーム",
        item_category: "スキンケア",
        price: 3980,
        quantity: 1
      }
    ]
  }
});

add_to_cart

dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "JPY",
    value: 3980,
    items: [
      {
        item_id: "SKU-001",
        item_name: "オーガニックハンドクリーム",
        item_category: "スキンケア",
        price: 3980,
        quantity: 1
      }
    ]
  }
});

begin_checkout

dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "JPY",
    value: 7960,
    items: [
      {
        item_id: "SKU-001",
        item_name: "オーガニックハンドクリーム",
        price: 3980,
        quantity: 2
      }
    ]
  }
});

purchase

dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "T-20260329-001",
    currency: "JPY",
    value: 7960,
    tax: 723,
    shipping: 500,
    items: [
      {
        item_id: "SKU-001",
        item_name: "オーガニックハンドクリーム",
        price: 3980,
        quantity: 2
      }
    ]
  }
});

💡 補足

purchaseイベントにはtransaction_idが必須です。これがないとGA4側で重複カウントされる原因になります。

ShopifyでのdataLayer実装

Shopifyでは、テーマのLiquidテンプレートを編集してdataLayerへのpushを実装します。

方法1: Shopifyのカスタムピクセル（推奨）

Shopify の Customer Events（カスタムピクセル） を使う方法が現在の推奨です。Shopify管理画面の「設定 > カスタムピクセル」から設定できます。

// カスタムピクセルでのpurchaseイベント例
analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data.checkout;
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ ecommerce: null }); // 前のecommerceデータをクリア
  window.dataLayer.push({
    event: "purchase",
    ecommerce: {
      transaction_id: checkout.order.id,
      value: checkout.totalPrice.amount,
      currency: checkout.totalPrice.currencyCode,
      tax: checkout.totalTax.amount,
      shipping: checkout.shippingLine?.price.amount || 0,
      items: checkout.lineItems.map((item, index) => ({
        item_id: item.variant.sku || item.variant.id,
        item_name: item.title,
        price: item.variant.price.amount,
        quantity: item.quantity,
        index: index
      }))
    }
  });
});

方法2: theme.liquidでの実装

商品ページのview_itemやadd_to_cartは、テーマファイルで実装するケースもあります。

// product.liquidまたはmain-product.liquidに追加
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    ecommerce: {
      currency: "{{ shop.currency }}",
      value: {{ product.price | money_without_currency | remove: ',' }},
      items: [{
        item_id: "{{ product.selected_or_first_available_variant.sku }}",
        item_name: "{{ product.title | escape }}",
        item_category: "{{ product.type | escape }}",
        price: {{ product.price | money_without_currency | remove: ',' }},
        quantity: 1
      }]
    }
  });
</script>

⚠️ 注意

dataLayerにpushする前に dataLayer.push({ ecommerce: null }) で前のecommerceオブジェクトをクリアしてください。これを省略すると、前のイベントのitems配列が残り、データが混在する原因になります。

GTM設定: GA4イベントタグの作成

GTMで各eコマースイベント用のタグを作成します。

手順

GTMで「タグ > 新規」を選択
タグタイプ: Googleアナリティクス: GA4イベント
測定ID: GA4の測定ID（G-XXXXXXXXX）を入力
イベント名: view_item（各イベントに対応する名前）
「eコマースデータを送信」にチェックを入れる
データソース: Data Layer を選択

この「eコマースデータを送信」の設定が重要です。これを有効にすると、dataLayerのecommerceオブジェクトが自動的にGA4に送信されます。

💡 補足

「eコマースデータを送信」を有効にすれば、items配列やcurrency、valueなどを個別にイベントパラメータとして設定する必要はありません。dataLayerのecommerceオブジェクトがそのまま送信されます。

同様の手順でadd_to_cart、begin_checkout、purchaseの計4つのタグを作成します。

GTM設定: dataLayer変数の作成

eコマースデータの送信にはdataLayer変数を個別に作成する必要はありませんが、トリガー条件やカスタムレポートで使いたい場合は、以下のような変数を作成しておくと便利です。

変数名	変数タイプ	データレイヤーの変数名
dlv - ecommerce.currency	データレイヤーの変数	`ecommerce.currency`
dlv - ecommerce.value	データレイヤーの変数	`ecommerce.value`
dlv - ecommerce.transaction_id	データレイヤーの変数	`ecommerce.transaction_id`

作成手順:

GTMで「変数 > ユーザー定義変数 > 新規」
変数タイプ: データレイヤーの変数
データレイヤーの変数名に上記の値を入力
データレイヤーのバージョン: バージョン2

GTM設定: トリガーの作成

各eコマースイベント用のトリガーを作成します。

トリガー名	トリガータイプ	条件
CE - view_item	カスタムイベント	イベント名 = `view_item`
CE - add_to_cart	カスタムイベント	イベント名 = `add_to_cart`
CE - begin_checkout	カスタムイベント	イベント名 = `begin_checkout`
CE - purchase	カスタムイベント	イベント名 = `purchase`

作成手順:

GTMで「トリガー > 新規」
トリガータイプ: カスタムイベント
イベント名: view_item（正規表現は使用しない）
発生場所: すべてのカスタムイベント

作成したトリガーを、対応するGA4イベントタグにそれぞれ紐づけます。

テスト: GTMプレビューモードとGA4 DebugView

設定が完了したら、公開前にテストを行います。

GTMプレビューモードでの確認

GTMで「プレビュー」ボタンをクリック
サイトのURLを入力してTag Assistantを起動
商品ページを表示 → view_itemイベントが発火するか確認
カート追加 → add_to_cartが発火するか確認
各タグの「Tags Fired」セクションで、ecommerceデータが正しく含まれているか確認

GA4 DebugViewでの確認

GA4の管理画面で「管理 > DebugView」を開く
GTMプレビューモードでサイトを操作
DebugViewにイベントがリアルタイムで表示される
各イベントをクリックし、itemsパラメータに商品データが含まれているか確認

💡 補足

DebugViewにイベントが表示されるまで数秒〜数十秒のタイムラグがあります。表示されない場合は少し待ってからページをリロードしてみてください。

よくあるトラブルと対処法

1. purchaseイベントが二重カウントされる

原因: 注文完了ページのリロードや、ブラウザの「戻る」操作で再度dataLayer.pushが実行されている。

対処法: transaction_idを含める。GA4は同一のtransaction_idを自動的に重複排除します。加えて、Cookieやセッションストレージで送信済みフラグを管理する実装も有効です。

if (!sessionStorage.getItem('purchase_tracked_' + orderId)) {
  dataLayer.push({ event: "purchase", ecommerce: { /* ... */ } });
  sessionStorage.setItem('purchase_tracked_' + orderId, 'true');
}

2. GA4レポートにitems（商品）データが表示されない

原因: dataLayerのecommerceオブジェクトの構造が正しくない、またはGA4タグで「eコマースデータを送信」が無効になっている。

対処法: GTMプレビューモードのData Layerタブで、ecommerceオブジェクトの構造がGA4の仕様通りになっているか確認してください。特にitemsが配列であること、各アイテムにitem_idまたはitem_nameが含まれていることが必須です。

3. Shopifyのチェックアウトページでイベントが取れない

原因: Shopifyのチェックアウトページは外部スクリプトの実行が制限されています。通常のGTMコンテナスニペットはチェックアウトページで動作しません。

対処法: Shopifyのカスタムピクセル（Customer Events）を使用してください。カスタムピクセルはチェックアウトページでも動作するため、begin_checkoutやpurchaseイベントを取得できます。

4. currencyが設定されておらず売上が0になる

原因: ecommerceオブジェクトにcurrencyフィールドが含まれていない。

対処法: すべてのeコマースイベントにcurrency（例: "JPY"）を含めてください。currencyがないとGA4が金額データを正しく処理できません。

まとめ

GTMでGA4のeコマース計測をShopifyサイトに設定する手順を解説しました。ポイントを整理します。

dataLayerのecommerceオブジェクトはGA4の仕様に準拠した構造で実装する
pushの前に { ecommerce: null } で前のデータをクリアする
GA4タグで「eコマースデータを送信」を有効にする
Shopifyのチェックアウトページはカスタムピクセルで対応する
transaction_idを含めて重複カウントを防止する
公開前にGTMプレビューモードとGA4 DebugViewでテストする

eコマース計測は設定項目が多いため、一つの設定ミスがデータ全体の信頼性に影響します。正確な計測基盤があってこそ、売上改善やマーケティング施策の効果検証が可能になります。