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

e コマースレポートをGoogle タグマネージャーを使って計測する方法をご紹介します。

株式会社イー・エージェンシー 2020/9/9 18:12 アクセス解析／データ分析 | 解説／ノウハウ

0 0 0

※この記事は読者によって投稿されたユーザー投稿です：

編集部の見解や意向と異なる内容の場合があります
編集部は内容について正確性を保証できません
画像が表示されない場合、編集部では対応できません
内容の追加・修正も編集部では対応できません

【お知らせ】「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 コマース購入情報をGoogle タグマネージャーで計測するためのdataLayerは以下のようになります。

ユニバーサルアナリティクスでは、「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 タグマネージャーを使って購入情報を送信する方法をご説明いたしました。

次回は、計測した e コマース情報が、Google アナリティクスのレポートでどのように表示されるかをご案内する予定です。

イー・エージェンシーでは、購入情報だけでなく、この記事でご紹介していないショッピング行動全体の計測・分析をお手伝いすることも可能です。
ご興味をお持ちになった方は、お気軽にイー・エージェンシーまでお問い合わせください！

Google Marketing Platform導入・活用支援サービス
https://googleanalytics360-suite.e-agency.co.jp/

株式会社イー・エージェンシー
https://www.e-agency.co.jp/

特集記事
【アプリ + ウェブプロパティに e コマースレポート登場！】第2弾 e コマースレポートの見方と確認できるデータ＜標準レポート編＞
https://googleanalytics360-suite.e-agency.co.jp/blog/2564/
アプリ + ウェブプロパティの e コマースレポートで、Google タグマネージャーを使って計測したデータがどのように表示され、確認できるのか？　e コマースレポートの見方と確認できるデータ、拡張 e コマースとの違いについて、わかりやすくご紹介しています。