GTMでGA4のeコマース計測を設定する方法

2023年06月7日

Google Tag Manager Googleアナリティクス 4(旧：App＋Web)

今回は、GA4のeコマースを実装する方法を初心者の方向けに解説します。
サイトへdataLayerを追加し、GTMでそのdataLayerを活用しながら設定・公開する実装方法です。
外部へサイト開発を依頼している場合は、dataLayerの設置を依頼する必要がある可能性がありますのでご注意ください。

ユニバーサルアナリティクス(UA)からGA4にeコマース計測移行したい場合は、弊社野田のコラムもご参照ください。

GTMでUAからGA4へeコマース計測移行する3つの方法

dataLayerとは
dataLayerサンプル
dataLayerの記述の注意点
GTM設定方法
参考：GA4 eコマースイベント一覧
参考：GA4 eコマースのデータ構造とパラメータ
おわりに

dataLayerとは

今回はdataLayer を使った方法でeコマース計測する方法をご紹介します。では、dataLayerとはなんなのか、おさらいしましょう。

dataLayerとは、ページ側からデータを受け渡しするのにGoogleタグマネージャが推奨しているjavascriptのことです。HTML上で「dataLayer変数へ値を渡す」JavaScriptを動作させることで「Googleタグマネージャへデータを渡す」ことができます。

サイトにdataLayerを設置するとGTMで値が取り出しやすく、設定が簡単になるため、初心者の方にはdataLayerを使ってEコマース計測する方法を筆者は推奨しています。

dataLayerサンプル

今回は例としてpurchase(購入完了)の実装について解説します。以下は、「purchase」のdataLayerのサンプルです。

アイテムパラメータ（items: []）は複数商品対応できるように配列にします。

必須以外のパラメータは必要なもののみ設置しましょう。

また、例えばtransaction_id: “T_12345”の「T_12345」部分はそれぞれの値を動的に入れる必要があります。

dataLayer.push({ ecommerce: null });  // 以前の e コマース オブジェクトをクリア
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T_12345",//必須
      value: 25.42, //必須
      tax: 4.90,
      shipping: 5.99,
      currency: "USD",//必須
      coupon: "SUMMER_SALE",
      items: [
       {
        item_id: "SKU_12345",//必須
        item_name: "Stan and Friends Tee",//必須
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 9.99,
        quantity: 1
      },
      {
        item_id: "SKU_12346",
        item_name: "Google Grey Women's Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        discount: 3.33,
        index: 1,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "gray",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 20.99,
        promotion_id: "P_12345",
        promotion_name: "Summer Sale",
        quantity: 1
      }]
  }
});

dataLayerの記述の注意点

イベント計測のページビューもしくはクリックのタイミングそれぞれで、dataLayerを記述する場所に注意点があります。

■ページビュー

ページにdataLayerを実行する場合は、必ずGTMスニペットタグよりも上にHTMLに設置しましょう。

■クリック

カート追加など、ユーザーがクリックしたタイミングのeコマースデータを計測したい場合は、クリック時にscriptタグとして実行します。

GTM設定方法

トリガー

トリガーを新規追加し、トリガータイプを「カスタムイベント」にします。今回は購入完了(purchase)を計測したいので、イベント名に「purchase」を入れます。

カスタムイベントトリガーは、指定したイベント名に一致するイベントがdataLayerにプッシュされた時に反応するトリガーです。ですので、他のイベントを計測するときも、eコマースのイベント名と一致するものをカスタムイベントのイベント名に入れてください。

トリガーの発生場所は、ページなど指定する必要があればしましょう。今回は全てのページのpurchaseイベントを計測して良いと判断したため、「すべてのカスタムイベント」を選択しています。これでeコマース購入完了のトリガーの完成です。

ここがタグ設置の一番のポイントですが、詳細設定部分で「eコマースデータを送信」にチェックを入れ、データソースに「Data Layer」を選択します。このチェックを入れ、データソースに「Data Layer」を選択すれば、GTMでパラメータを設定せずにサイトに設置したdataLayerからeコマースのパラメータと値を自動でGA4に送ります。

先ほど作成したトリガーを設定すればタグの設定は完了です。GTMのプレビューモードで問題ないか確認してからタグを公開しましょう。

よくある質問

すでにUA(ユニバーサルアナリティクス)でdataLayerを設置している場合、GA4のdataLayerは設置した方がいいでしょうか。

UAとGA4はdataLayerの形式が違いますが、互換性があるのでUAのdataLayerでも計測自体は可能です。

参考に、こちらの画像は、UAの時に使っていたdataLayerでGA4に送ったデータ内容です。問題なく計測できています。

ただし、GA4のdataLayer形式では「purchase」イベントとしてdataLayerにpushされるのに対して、UAのdataLayer形式ではイベントとして「purchase」がpushされないので、先ほどご紹介したカスタムイベントトリガーが使えません。

トリガーのタイミングや、dataLayerの形式の違いについて理解している方でしたらトリガーを変更することは可能だと思いますが、難しいようであればUAとGA4両方ともdataLayer設置しておいた方が良いと思います。

ただし、ユニバーサルアナリティクスの計測が停止になる2023年7月以降の無料版アカウントではUA用のdataLayerは不要なので、GA4用のdataLayerのみ設置しましょう。

参考：GA4 eコマースイベント一覧

eコマースの各イベント名は決められたものを使用します。すべてのイベントをとる必要はないので、計測に必要なイベントのみ実装しましょう。

Google公式ヘルプ：[GA4] 推奨イベント

イベント一覧

イベント	トリガーのタイミング
add_payment_info	ユーザーが支払い情報を送信したとき
add_shipping_info	ユーザーが配送先情報を送信したとき
add_to_cart	ユーザーがカートに商品を追加したとき
add_to_wishlist	ユーザーがウィッシュリストに商品を追加したとき
begin_checkout	ユーザーが購入手続きを開始したとき
generate_lead	ユーザーが問い合わせのためにフォームまたはリクエストを送信したとき
purchase	ユーザーが購入を完了したとき
refund	ユーザーが払い戻しを受けたとき
remove_from_cart	ユーザーがカートから商品を削除したとき
select_item	ユーザーがリストから商品を選択したとき
select_promotion	ユーザーがプロモーションを選択したとき
view_cart	ユーザーがカートを表示したとき
view_item	ユーザーが商品を表示したとき
view_item_list	ユーザーが商品やサービスの一覧を表示したとき
view_promotion	ユーザーがプロモーションを表示したとき