2022.04.15

GA4 eコマース設定 | オンラインセミナー　アーカイブ動画＋テキスト起こし（2022年4月14日開催）

セミナーアーカイブ

GA4のeコマース設定については、2022年8月より、新しい方法が利用可能になりました。このページで紹介してある方法でも設定できますが、新しい方法では、設定に必要な工数が少なくなっておりますので、下記の記事もご参照ください。

GA4 イベントタグの「詳細設定」に「e コマースデータを送信」が実装されました。

2022年4月14日に開催さたオンラインセミナーの内容です。

当日のセミナー動画

このセミナーのテキストのダウンロードはこちらから

eコマース設定をしておくと、どんなことが分かるか

レポート > ライフサイクル > 収益化 > eコマース購入数

赤線の枠の表について解説します。

上記の(1)～(7)の解説が下記にあります。

No.	項目	意味
(1)	アイテムの表示回数	アイテムの詳細が表示された回数。
(2)	カートに追加	ユーザーがショッピングカートにアイテムを追加した回数。
(3)	表示後にカートに追加された商品の割合	カートに商品を追加したユーザー数を、同じ商品を表示したユーザー数で割った値。
(4)	eコマース購入数	ユーザーが購入手続きを完了した回数。
(5)	表示後購入された商品の割合	商品を購入したユーザーの数を、同じ商品を表示したユーザー数で割った値。
(6)	商品の購入数量	購入イベントに含まれる一つのアイテムの数量。
(7)	アイテムの収益	アイテム毎の合計収益（税金と配送料を除く）

たとえば「リンク先ページ（英語名：Landing Page）」の列を追加すると、入口ページ毎に、アイテムの販売状況を把握することができます。

（解説）「リンク先ページ」（英語画面でLandding Page）

本日の内容＝eコマースに関わる9つのイベント

「 e コマース（GA4）デベロッパーガイド」（公式ヘルプ： https://developers.google.com/tag-manager/ecommerce-ga4?hl=ja ）では、eコマースに関わる9つのイベントの解説が掲載されています（左の表）。この9つのイベントは全て、第3回の「イベント設定」の回でご紹介した「推奨イベント：オンライン販売」（右の表）に含まれています。

※はじめに、第3回で取り上げたイベント「purchase」の設定を振り返ります。

推奨イベント　設定例　purchase

ここでは、当セミナーのサイトのセミナー登録完了ページを購入完了ページ見立てて、下記のような構成で、推奨イベント、purchaseを設定してみます。

データレイヤーに書き込まれた情報を、GTMで取得して、GA4に送信します。

「どうしてもデータレイヤーが必要なのか？」については、弊社GA4サイトの解説記事もご参照ください。

GA4にdataLayer（データレイヤー）の直書きは必須なの？

purchaseのdataLayerの書き方

公式ヘルプ:
https://developers.google.com/tag-manager/enhanced-ecommerce?hl=ja

（例）セミナー4回目の申し込み完了を、購入完了に見立てて、purchaseのdataLayerを書いている。

（備考）
「このテキストのdataLayerはGA4用のものとなっております。既にUAで拡張eコマースなど利用していてdataLayerが存在する場合、後述のGTMでの変数設定方法が変更となります。dataLayer側の記述をGA4用に書き直すか、あるいは、andaにご相談ください」

解説：window.dataLayer = window.dataLayer || [];

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "purchase",
    ecommerce: {
（以下省略）

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

について解説します。

dataLayerはJavaScriptで「配列」と呼ばれるものになります。

「配列」は中にいろいろな要素をリスト形式で保有することができるもので、

そして「配列」はその要素を追加・削除・検索など行うことが可能です。

dataLayerは「継ぎ足し継ぎ足ししていく」のが本来的な使い方です。

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

は、「dataLayerという名前で配列を新規作成する」というものになります。

GTMはページ上にdataLayerという配列が存在したらそちらを利用する形です。

(存在しない場合はGTMが勝手に作成します)

そして、dataLayer.push()というのは上で触れた「配列に要素を追加する」ものとなり、()の中身をdataLayerに追加する、という文法になっています。これによって、「作成した配列に対してpurchase用のデータを追加する」形になります。

推奨イベント　設定例　purchase GTMのデータレイヤー変数

データレイヤー変数の追加

「変数タイプを選択」で「データレイヤーの変数」を選択。

データレイヤー変数「ecommerce.transaction_id」の設定例です。

他の変数も同様に設定していきます。

資料：商品アイテム（itemes）データ

商品アイテム（items）のパラメータ名	説明
item_id	商品アイテム ID（SKU)
item_name	商品アイテム名
quantity	アイテムの数量
item_brand	商品アイテムのブランド
item_category	商品アイテムカテゴリ
item_category2	商品アイテムに多数のカテゴリがある場合に利用します。
item_category3	商品アイテムに多数のカテゴリがある場合に利用します。
item_category4	商品アイテムに多数のカテゴリがある場合に利用します。
item_category5	商品アイテムに多数のカテゴリがある場合に利用します。
item_variant	商品アイテムのバリエーション
price	指定された通貨パラメータの単位で表した商品アイテムの価格
currency	通貨（3 文字の ISO 4217 形式）
tax	取引に関連付けられた税金
affiliation	仕入れ先業者や実店舗を指定する商品アフィリエーション
coupon	購入に使用されたクーポンコード
discount	購入に関連付けられた割引の金銭的価値