GA4のeコマースデータレイヤー構造の正しい書き方｜ecommerce:nullでリセットする理由｜未経験から100日後にGTMのプロになる話【Day 27】

Day11・12でdataLayer.pushとデータレイヤー変数の基本を扱いました。今日は、GA4のeコマース計測に特化した、正しいデータレイヤーの構造を整理します。ここは実装者によって書き方がバラバラになりがちな部分です。

eコマースのデータは「ecommerce」キーの中にまとめる

購入完了時のイベントを例にすると、次のようにトランザクションIDや金額をeventと同じ階層にフラットに並べたコードをよく見かけます。

window.dataLayer.push({
  'event': 'purchase',
  'transaction_id': 'T123456',
  'value': 9800,
  'currency': 'JPY',
  'items': [ ... ]
});

動かないわけではありませんが、GA4のeコマース計測としては推奨される構造ではありません。Googleが案内している正しい形は、eコマース関連の情報をecommerceという1つのキーの中にネストすることです。

window.dataLayer.push({ ecommerce: null });  // 直前のecommerceオブジェクトをクリア
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T123456',
    value: 9800,
    currency: 'JPY',
    items: [
      {
        item_id: 'P001',
        item_name: 'スニーカー',
        item_category: 'シューズ',
        price: 9800,
        quantity: 1
      }
    ]
  }
});

ここで見落とされがちなのが、最初にdataLayer.push({ ecommerce: null })を送っている点です。これは「おまじない」ではなく明確な理由があります。ECサイトでは、商品一覧の表示（view_item_list）→カート追加（add_to_cart）→購入完了（purchase）と、複数のeコマースイベントが同じページ内で連続して発生することがあります。直前のイベントでecommerceオブジェクトに入っていた値をクリアせずに次のイベントをpushすると、GTMのデータレイヤー変数が古いイベントのitemsを引きずったまま新しいイベントに紐付いてしまう、というデータ混入が起きることがあります。新しいeコマースイベントをpushする前に一度nullでリセットするのは、この事故を防ぐための定石です。

GTM側でのデータレイヤー変数の指定

ネストされた値を取得する場合、データレイヤー変数名にはドット区切りで階層を指定します。例えば購入金額を取るなら変数名はecommerce.value、商品配列全体ならecommerce.itemsです。Day12でも触れたとおり、ネストしたキー名の指定にも対応しているので、フラットな構造にする必要はありません。

今日のまとめ

GA4のeコマースイベントは、フラットな構造でも一応動きますが、Googleが定めたecommerceネスト構造に従うのが正解です。複数のeコマースイベントが連続するページでは、pushの前にecommerce: nullでリセットする習慣を開発者と共有しておいてください。次回は、ECサイト向けの計測設定を全体像として整理します。