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 コマースと比べると以下のようになります。
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 | – | 商品スコープのカスタムディメンション |
キー/パラメータ名が異なっているほか、以下の違いがあります。
カテゴリ構造 | 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 | 購入可能な商品に利用できるクーポンコード |
キー/パラメータ名が異なっている以外は、違いはありません。
アプリ + ウェブ プロパティ用の 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 タグマネージャーでユニバーサルアナリティクスの拡張 e コマースを計測するには、「拡張 e コマース機能を有効にする」「データレイヤーを使用する」の二つのチェックボックスにチェックを入れるだけ、ととてもシンプルな設定内容でした。
アプリ + ウェブ プロパティ用のGTMタグには、まだそのような機能は用意されていないため、必要な情報を取得する変数を作成し、イベントとパラメータを送信するタグを作成する必要があります。
また、ユニバーサルアナリティクスのように、ページビューのヒットとセットで e コマース情報を送信することはできないため、e コマース情報を送信するためのイベントを専用で用意する必要があります。
トランザクションIDなど、トランザクションの情報を取得する変数は以下のように設定します。
商品情報を取得する変数は以下のように設定します。
これらの変数を利用して、購入情報を送信するタグは以下のようになります。
「purchase」というイベント名で送信する必要があります。
トリガーについては、アプリ + ウェブ プロパティ用のものがあるわけではないので、dataLayerが出力されるタイミングに合わせて、適したものを指定してください。
Google タグマネージャーの設定が完了したら、動作の確認です。
ブラウザの開発者ツールなどを利用して、Google アナリティクスに送信されるデータ(ペイロード。ビーコンと呼ぶこともある)を確認すると、以下のような形式になっています。
ユニバーサルアナリティクスでは商品情報の各項目ごとにパラメータが分かれていましたが、アプリ + ウェブ プロパティでは1商品のパラメータの中に「~」でつないだ形で送信されています。
アプリ + ウェブ プロパティはまだβ版ということもあり、ユニバーサルアナリティクスと併用して(デュアルタギングで)ご利用されていることが多いのではないでしょうか。
そこで、アプリ + ウェブ プロパティとユニバーサルアナリティクスの両方に e コマース情報を送信する方法を、2パターンご案内します。
アプリ + ウェブ プロパティは、ユニバーサルアナリティクスの拡張 e コマースのdataLayerとも互換性がありますが、「データ構造」の章でご説明したように構造に違いがあります。
アプリ + ウェブ プロパティの機能をフルに活用いただくためには、アプリ + ウェブ プロパティ用のdataLayerをサイトに設置することをお勧めいたします。
アプリ + ウェブ プロパティとユニバーサルアナリティクスのdataLayerは、サイト上に併記することができます。
ただし注意点として、
1. アプリ + ウェブ プロパティのdataLayer
2. ユニバーサルアナリティクスのdataLayer
3. Google タグマネージャー コンテナスニペット
の順序で記載してください。
ユニバーサルアナリティクスのdataLayerの方が上になっていると、「拡張 e コマース機能を有効にする」「データレイヤーを使用する」のチェックボックスで計測している場合に、商品情報が正しく取得できなくなってしまいます。
タグの併記例
Google タグマネージャーの設定は、ユニバーサルアナリティクス用のものは変更する必要ありません。
アプリ + ウェブ プロパティ用のものは、前述の「Google タグマネージャーの設定方法」に沿って行ってください。
dataLayerを新しく設置することは、サイトの運用面で容易ではないことがあります。とくに購入完了ページはECシステムが関係するため、なかなか難しいことも多いのではないでしょうか。
そういう場合は、既存のユニバーサルアナリティクスのdataLayerを使ってデータを送信することも可能です。
ただし、アプリ + ウェブ プロパティにしかない項目を送信することは難しいです。また、商品のカテゴリは、第1階層にすべてのカテゴリ情報がセットされます。
トランザクションIDなど、ユニバーサルアナリティクスのアクションフィールドの情報を取得する変数は以下のように設定します。
ユニバーサルアナリティクスの商品情報を取得する変数は以下のように設定します。
これらの変数を利用して、購入情報を送信するタグは以下のようになります。
この方法で送信すると、カテゴリ情報は以下のようにレポートに表示されます。
これを階層ごとに分けたい場合は、カスタムjavascript変数を使って「/」で分割する必要があります。また、複数商品の情報を処理して「items」にセットするためにもカスタムjavascript変数が必要です。いささか難しい処理になるため、javascriptの知識をお持ちの方が設定することをお勧めします。
以上、アプリ + ウェブ プロパティの e コマースレポートに、 Google タグマネージャーを使って購入情報を送信する方法をご説明いたしました。
イー・エージェンシーでは、購入情報だけでなく、この記事でご紹介していないショッピング行動全体の計測・分析をお手伝いすることも可能です。次世代のアクセス解析プラットフォーム、Google アナリティクス 4 プロパティ(GA4)の導入・運用にご興味をお持ちになった方は、ぜひお気軽にお問い合わせください!
Google アナリティクス 4 プロパティ(GA4)について知りたい情報が詰まった資料を公開しています。
従来のGoogle アナリティクス(ユニバーサルアナリティクス )」との違いって?
導入にあたって何から取り組むべき?
おさえておきたいポイントをわかりやすく解説しました。
本書は 無料でダウンロードいただけます。以下のフォームよりお申込みください。