ECサイト上でのコンバージョン結果をGoogleアナリティクスにて計測するにあたり、これまでのユニバーサルアナリティクスでは、eコマース機能を利用したトラッキングコード設定が欠かせないものでした。新規格のGoogle アナリティクス4（以下、GA4）においては、それに代わり、本記事にてご案内する設定が必要となります。
GA4では、eコマース関連のデータは「収益化」内のレポートで確認し分析していくこととなります。このレポート画面にECサイト上のコンバージョンデータを反映させるために必要な設定方法を解説していきます。より効率的に設定を進める為に、Googleタグマネージャー（以下、GTM）を活用した設定方法を解説して参ります。
GA4を関連付けたGTMのトラッキングコードをの設定方法や、クロスドメイン運用の場合に必要な設定についてご不明な場合は、それぞれの記事をご確認いただき、先に設定を済ませて頂く必要があります。
GA4のイベント種類は3種類
GA4では新しい概念が取り入れられ、分析の指標はすべてイベント単位となります。イベントには、大きく分けて3種類あります。各イベントの内容について解説していきます。
自動的に収集されるイベント
GA4タグを設置することで自動的に収集されるイベントです。代表的なものとして、以下があります。
| イベント | 自動的にトリガーされるタイミング |
|---|---|
| page_view | ページが読み込まれるたび、またはアクティブなサイトによって閲覧履歴のステータスが変更されるたび |
| first_visit | ユーザーが初めてアクセスまたは起動したとき |
| session_start | ユーザーがウェブサイトを利用したとき |
さらに詳しく確認したい場合は、アナリティクスヘルプの[GA4] 自動収集イベントをご確認ください。
測定機能の強化イベント
測定機能の強化イベントとは、Google アナリティクス管理画面で拡張計測機能を有効にすることで自動的に収集されるようになるイベントです。代表的なものとして、以下があります。
| イベント | トリガーされるタイミング |
|---|---|
| scroll | ユーザーが各ページの最下部まで初めてスクロールしたとき（垂直方向に 90% の深さまで表示されたときなど） |
| click | ユーザーが現在のドメインから移動するリンクをクリックするたびに記録されます。 |
| video_start | 動画の再生が開始されたとき |
さらに詳しく確認したい場合は、アナリティクスヘルプの[GA4] 測定機能の強化イベントをご確認ください。
手動で設定するイベント
手動で設定するイベントには、推奨イベントとカスタムイベントがあります。
これらのイベントを計測したい場合、GA4の管理画面やGTM上にて設定を行う必要があります。
推奨イベント
推奨イベントとはGoogleが推奨しているイベントです。その中でもEC運営に関連性のあるイベントとして以下があります。自社ECサイトの運営に必要なイベントを設定していきましょう。
| イベント | トリガーのタイミング |
|---|---|
| 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 | ユーザーがプロモーションを表示したとき |
カスタムイベント
イベントやパラメータ名を自由に設定できるカスタムイベントも用意されております。推奨イベントで用意されていないような独自のイベントを利用する必要性がある場合に設定します。詳細はアナリティクスヘルプの[GA4] カスタム イベントをご確認ください。
設定方法
GA4のイベント設定のうち、手動で設定する必要があるイベントについて設定方法を解説していきます。GA4の管理画面内の収益化レポートに、ECサイトのコンバージョンデータを反映させるためには最低限、推奨イベントのうちのpurchase、view_cart、view_itemの３つのイベント設定が必要になります。
GTMの設定
Googleタグマネージャーの管理画面にて、以下の設定を進めていきます。
トリガーの設定
GTM管理画面＞トリガーの画面で[新規]を選択、トリガーの設定箇所の[編集マーク]をクリックすると、以下の画面が表示されます。
上記画面で「カスタムイベント」を選択します。
イベント名は「view_item」を入力し、このトリガーの発生場所は「すべてのカスタム イベント」を選択して保存します。
イベント名は「view_cart」を入力し、このトリガーの発生場所を設定します。
「一部のカスタム イベント」を選択、Page URLに「basket.html」が「含む」と設定します。
イベント名は「purchase」を入力し、このトリガーの発生場所は「すべてのカスタム イベント」を選択して保存します。
変数の登録
GTM管理画面＞変数＞ユーザー定義変数の箇所の[新規]を選択、変数の設定の[編集マーク]をクリックすると、以下の画面が表示されます。
上記画面で「データレイヤーの変数」を選択します。
上記画面の赤枠内には変数「ecommerce.items」を入力し、保存します。
再び、GTM管理画面＞変数＞ユーザー定義変数の箇所の[新規]を選択し、以下のすべての変数が設定できるよう、作業を繰り返します。
「ecommerce.coupon」「ecommerce.currency」「ecommerce.shipping」「ecommerce.tax」
「ecommerce.transaction_id」「ecommerce.value」
以上7つの変数を設定し、以下の画面のように表示ができれば次の手順に進みます。
タグの設定
GTM管理画面＞タグの画面で[新規]を選択、タグの設定箇所の[編集マーク]から設定タグ、イベント名、イベント パラメータを設定します。
また、トリガー箇所の[編集マーク]をクリックし、配信トリガーを設定し、以下の画面のように設定します。
ECサイト上にタグを設置
GTMにて上記のように設定した場合、ECサイト上に設置する必要のあるタグをご案内していきます。設置するページによってタグの内容が変わる為、間違えないように設定していきましょう。
ここから先は、クラウド型ECサイト構築ASPのaishipシリーズに設定する方法を例に挙げております。aishipシリーズでは、<#〇〇>の形式で独自タグをご用意しており、対象のページに設置することで情報が動的に出力されます。aishipシリーズ以外のECサイトに設定する場合は、独自タグの部分をそれぞれのシステムに対応した内容に変更してご利用ください。
サイト管理＞レイアウト作成
商品詳細ページに適用しているレイアウトの<head>内挿入(GoogleTagManager)の箇所に以下を設置ください。（※商品詳細ページと商品検索ページ・商品カテゴリページに共通のレイアウトを設定している場合、意図しないイベント発火が発生する可能性があります。正確に計測する場合は、レイアウトを分けてご利用ください。）
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
value:"<#商品のみの合計>",
currency:"JPY",
items: [
{ item_name: "<#商品名>",
item_id: '<#商品管理番号>',
item_category: '<#商品カテゴリ1>',
item_category2: '<#商品カテゴリ2>',
item_category3: '<#商品カテゴリ3>',
item_category4: '<#商品カテゴリ4>',
item_category5: '<#商品カテゴリ5>',
price: <#商品単価>,
quantity: <#商品数量>
}]
} });
</script>
サイト管理＞レイアウト作成
カートページに適用しているレイアウトの<head>内挿入(GoogleTagManager)箇所に以下を設置ください。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_cart",
ecommerce: {
value:"<#商品のみの合計>",
currency:"JPY",
items: [
<#繰返始>
{ item_name: "<#商品名>",
item_id: '<#商品管理番号>',
item_category: '<#商品カテゴリ1>',
item_category2: '<#商品カテゴリ2>',
item_category3: '<#商品カテゴリ3>',
item_category4: '<#商品カテゴリ4>',
item_category5: '<#商品カテゴリ5>',
price: <#商品単価>,
quantity: <#商品数量>
},<#繰返終>]
} });
</script>
集客管理＞アフィリエイト/コンバージョン設定にて以下のように設置ください。
登録名:任意
有効／無効: 有効
コンバージョンポイント:購入完了画面
方式：scrpit方式
設置タグ: headタグ
スニペット：以下を入力
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "<#受付番号>",
value:"<#商品のみの合計>",
currency:"JPY",
tax:"<#商品合計の税金総額>",
shipping:"<#送料総額>",
coupon:"<#クーポンID>",
items: [
<#繰返始>
{ item_name: "<#商品名>",
item_id: '<#商品管理番号>',
item_category: '<#商品カテゴリ1>',
item_category2: '<#商品カテゴリ2>',
item_category3: '<#商品カテゴリ3>',
item_category4: '<#商品カテゴリ4>',
item_category5: '<#商品カテゴリ5>',
price: <#商品単価>,
quantity: <#商品数量>
},<#繰返終>]
} });
</script>
まとめ
いかがでしたでしょうか。クラウド型ECサイト構築ASPのaishipシリーズでは、2022年6月のバージョンアップにて、ECサイトのコンバージョン関連のイベント計測に最低限必要な、purchase、view_cart、view_itemの3つのイベントに対応しております。また、その他のイベントにつきましては、随時拡張予定となっております。
今回ご紹介した設定した内容は、今後イベントを追加で設定する際において、トリガーや変数などをそのまま使いまわせる場合も出てくる為、最初は手間に感じるかもしれませんがGTMで設定しておくことをお勧め致します。
