【アプリ + ウェブ プロパティ (現: GA4) e コマースレポート登場!】 第1弾 Google タグマネージャーを使って e コマース計測を行う方法 - Google アナリティクス 4 プロパティ

【お知らせ】「Google アナリティクス 4 プロパティ(GA4)」リリース!
2020年10月14日(米国時間)、Google アナリティクスの「アプリ + ウェブ プロパティ」は、ベータ版から新名称の正式版「Google アナリティクス 4 プロパティ(GA4)」にアップデートされました。詳細はこちらでご確認ください。
→「Google アナリティクス 4 プロパティ(GA4)」リリース! GAの進化と「GA4」を導入するメリット3つ

Google アナリティクスの次世代のアクセス解析プラットフォーム「アプリ + ウェブ プロパティ(App + Web プロパティ)」に、待望の e コマースレポートが登場しました。
プロパティごとに順次適用されていくため、すでにご覧いただいている方もいらっしゃるのではないでしょうか。
この e コマースレポートをGoogle タグマネージャーを使って計測する方法をご紹介します。

e コマースレポートでは、サイト内の購入情報を計測できるだけでなく、商品の表示、カート追加、決済途中の離脱状況などのショッピング行動全体を詳しく分析することができます。
ただ、これらすべてを計測するためには、ECサイトの仕様に沿って適切に計測内容を設計・実装する必要があるため、それなりの手間がかかります。
そこで、まずは一番重要なデータである購入情報に絞って、ご説明いたします。

※ e コマース計測についての Google アナリティクスのヘルプは、記事執筆時点では残念ながら一部情報が不足しているところがあります。そのため、記事の一部は弊社独自の調査に基づいて記載しています。今後ヘルプが更新された場合に、本記事と内容が異なる可能性がありますのでご了承ください。

[参考ドキュメント]
Ecommerce with gtag.js | App + Web Properties | Google Developers(Last updated 2020-09-01 UTC.)
https://developers.google.com/analytics/devguides/collection/app-web/ecommerce
Ecommerce (App + Web) Developer Guide(Last updated 2020-08-07 UTC.)
https://developers.google.com/tag-manager/ecommerce-appweb

アプリ + ウェブ プロパティの e コマースデータ構造

アプリ + ウェブ プロパティで e コマースの計測をするためのデータ構造をユニバーサルアナリティクスの拡張 e コマースと比べると以下のようになります。

商品データの構造

UAキー A+Wパラメータ 必須 説明
id item_id ○* 商品の一意の ID(SKU)
name item_name ○* 商品名
brand item_brand   商品のブランド
category item_category   (UA)商品が属するカテゴリ。区切り文字として「/」を使って最大 5 レベルの階層を指定
(A+W)商品のカテゴリの 1 番高いレベルまたは最上位
item_category2   商品のカテゴリの 2 番目のレベルまたは 2 番目に高いレベル
item_category3   商品のカテゴリの 3 番目のレベルまたは 3 番目に高いレベル
item_category4   商品のカテゴリの 4 番目のレベルまたは 4 番目に高いレベル
item_category5   商品のカテゴリの 5 番目のレベルまたは 5 番目に高いレベル
variant item_variant   商品のバリエーション
affiliation   このイベントが発生したショップまたはアフィリエーション
discount   商品に関連付けられた割引
coupon coupon   商品に関連付けられたクーポン
price price   商品の購入価格
currency   収集された価格の現地通貨
quantity quantity   指定した商品の数
dimensionXX   商品スコープのカスタムディメンション
* 商品ID または 商品名 どちらか必須。

キー/パラメータ名が異なっているほか、以下の違いがあります。

カテゴリ構造 UAのカテゴリは、ひとつのキーに「/」区切りでカテゴリ階層を記述しましたが、A+Wのカテゴリは階層ごとにパラメータが分かれます。
A+Wにしかないもの 商品単位のアフィリエーション、割引、現地通貨
UAにしかないもの 商品スコープのカスタムディメンション

購入データの構造

UAキー A+Wパラメータ 必須 説明
id transaction_id トランザクションの一意の ID
affiliation affiliation   トランザクションが発生したショップやアフィリエーション
revenue value   イベントに関連する値(つまり収益)
currencyCode currency △* 収集された価格の現地通貨
tax tax   税額
shipping shipping   配送料
coupon coupon   購入可能な商品に利用できるクーポンコード
* 現時点では、A+Wは「currency」パラメータを設定しないと、収益がレポートに反映されないようです。

キー/パラメータ名が異なっている以外は、違いはありません。

アプリ + ウェブ プロパティ用の e コマース購入情報 dataLayer

アプリ + ウェブ プロパティ用の e コマース購入情報 dataLayer
アプリ + ウェブ プロパティの e コマース購入情報をGoogle タグマネージャーで計測するためのdataLayerは以下のようになります。

(2021年10月更新)
同一ページ内に複数のeコマースイベントがある場合などに互いの商品情報が干渉してしまうことがあるため、
後述の「eコマースオブジェクトを消去する」記述を画像内の21行目と22行目の間に追加いただくことをおすすめいたします。

・eコマースオブジェクトを消去する記述
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object. 

ユニバーサルアナリティクスでは、「purchase」アクションのアクションフィールドにトランザクションの情報を記述し、「products」の配下に商品情報を記述していました。
それに対してアプリ + ウェブ プロパティでは、「purchase」の配下にトランザクションの情報を記述し、「items」の配下に商品情報を記述する形式に変わっています。

なお、アプリ + ウェブ プロパティは、ユニバーサルアナリティクスの拡張 e コマースのdataLayerとも互換性があります。互換される情報については下部で詳しく記載します。

Google タグマネージャーの設定方法

Google タグマネージャーでユニバーサルアナリティクスの拡張 e コマースを計測するには、「拡張 e コマース機能を有効にする」「データレイヤーを使用する」の二つのチェックボックスにチェックを入れるだけ、ととてもシンプルな設定内容でした。
アプリ + ウェブ プロパティ用のGTMタグには、まだそのような機能は用意されていないため、必要な情報を取得する変数を作成し、イベントとパラメータを送信するタグを作成する必要があります。
また、ユニバーサルアナリティクスのように、ページビューのヒットとセットで e コマース情報を送信することはできないため、e コマース情報を送信するためのイベントを専用で用意する必要があります。

トランザクションIDなど、トランザクションの情報を取得する変数は以下のように設定します。

商品情報を取得する変数は以下のように設定します。

これらの変数を利用して、購入情報を送信するタグは以下のようになります。
「purchase」というイベント名で送信する必要があります。

トリガーについては、アプリ + ウェブ プロパティ用のものがあるわけではないので、dataLayerが出力されるタイミングに合わせて、適したものを指定してください。

e コマースの送信データ

Google タグマネージャーの設定が完了したら、動作の確認です。
ブラウザの開発者ツールなどを利用して、Google アナリティクスに送信されるデータ(ペイロード。ビーコンと呼ぶこともある)を確認すると、以下のような形式になっています。

ユニバーサルアナリティクスでは商品情報の各項目ごとにパラメータが分かれていましたが、アプリ + ウェブ プロパティでは1商品のパラメータの中に「~」でつないだ形で送信されています。

アプリ + ウェブ プロパティとユニバーサルアナリティクスの両方(デュアルタギング)で利用する方法

アプリ + ウェブ プロパティはまだβ版ということもあり、ユニバーサルアナリティクスと併用して(デュアルタギングで)ご利用されていることが多いのではないでしょうか。
そこで、アプリ + ウェブ プロパティとユニバーサルアナリティクスの両方に e コマース情報を送信する方法を、2パターンご案内します。

① アプリ + ウェブ プロパティとユニバーサルアナリティクスのdataLayerを併記する

アプリ + ウェブ プロパティは、ユニバーサルアナリティクスの拡張 e コマースのdataLayerとも互換性がありますが、「データ構造」の章でご説明したように構造に違いがあります。
アプリ + ウェブ プロパティの機能をフルに活用いただくためには、アプリ + ウェブ プロパティ用のdataLayerをサイトに設置することをお勧めいたします。

アプリ + ウェブ プロパティとユニバーサルアナリティクスのdataLayerは、サイト上に併記することができます。

ただし注意点として、

1. アプリ + ウェブ プロパティのdataLayer
2. ユニバーサルアナリティクスのdataLayer
3. Google タグマネージャー コンテナスニペット


の順序で記載してください。

ユニバーサルアナリティクスのdataLayerの方が上になっていると、「拡張 e コマース機能を有効にする」「データレイヤーを使用する」のチェックボックスで計測している場合に、商品情報が正しく取得できなくなってしまいます。

タグの併記例

Google タグマネージャーの設定は、ユニバーサルアナリティクス用のものは変更する必要ありません。
アプリ + ウェブ プロパティ用のものは、前述の「Google タグマネージャーの設定方法」に沿って行ってください。

② ユニバーサルアナリティクスのdataLayerだけで、アプリ + ウェブ プロパティにもデータを送信する

dataLayerを新しく設置することは、サイトの運用面で容易ではないことがあります。とくに購入完了ページはECシステムが関係するため、なかなか難しいことも多いのではないでしょうか。
そういう場合は、既存のユニバーサルアナリティクスのdataLayerを使ってデータを送信することも可能です。
ただし、アプリ + ウェブ プロパティにしかない項目を送信することは難しいです。また、商品のカテゴリは、第1階層にすべてのカテゴリ情報がセットされます。

トランザクションIDなど、ユニバーサルアナリティクスのアクションフィールドの情報を取得する変数は以下のように設定します。

ユニバーサルアナリティクスの商品情報を取得する変数は以下のように設定します。

これらの変数を利用して、購入情報を送信するタグは以下のようになります。

この方法で送信すると、カテゴリ情報は以下のようにレポートに表示されます。

これを階層ごとに分けたい場合は、カスタムjavascript変数を使って「/」で分割する必要があります。また、複数商品の情報を処理して「items」にセットするためにもカスタムjavascript変数が必要です。いささか難しい処理になるため、javascriptの知識をお持ちの方が設定することをお勧めします。

以上、アプリ + ウェブ プロパティの e コマースレポートに、 Google タグマネージャーを使って購入情報を送信する方法をご説明いたしました。

イー・エージェンシーでは、購入情報だけでなく、この記事でご紹介していないショッピング行動全体の計測・分析をお手伝いすることも可能です。次世代のアクセス解析プラットフォーム、Google アナリティクス 4 プロパティ(GA4)の導入・運用にご興味をお持ちになった方は、ぜひお気軽にお問い合わせください!

私たちは、ビジネスの課題解決するための支援を行っております
サービスについてお気軽にご相談・お問い合わせください

Google アナリティクス 4 プロパティ(GA4)資料ダウンロードのご紹介

最初に読みたい!
GA4(Google アナリティクス 4 プロパティ)-基本編- 資料

Google アナリティクス 4 プロパティ(GA4)について知りたい情報が詰まった資料を公開しています。
従来のGoogle アナリティクス(ユニバーサルアナリティクス )」との違いって?
導入にあたって何から取り組むべき?
おさえておきたいポイントをわかりやすく解説しました。
本書は 無料でダウンロードいただけます。以下のフォームよりお申込みください。



私たちは、ビジネス課題を解決する支援を行っております
サービスについてお気軽にご相談・お問い合わせください
この記事を書いた人
本舩坂 香

EC・CMS・モバイルなどシステム系Webサイトのディレクション・プロジェクトマネージャーを長く経験。 近年は主にGoogleアナリティクス関連の導入に携わっています。