Google Tag Managerを利用したGoogle Analytics 4へのデータ連携【推奨イベントの設定方法】
推奨イベントとは
推奨イベントは、Googleがウェブやアプリの計測のために推奨している各種イベントです。
ログインや検索、商品購入など、用途によってさまざまなパラメータが用意されているため、その中から計測したいイベント名とイベントパラメータ名を選択して実装します。
サイトに合わせて別途実装が必要なイベントなので、自動で計測されることはありません。
自動収集イベントよりも高度な設定が必要ですが、取得できるデータも多岐にわたります。
テーマをご利用の場合
カスタマイズ対応テーマテンプレート（ec_force_basic_theme）バージョン1.5.0 未満、ならびに 2023/6/20 以前に提供した ec_force_default_themeをご利用の場合は本設定の他に、別途テーマ更新が必要です。
テーマファイルの編集・更新作業については自社の担当コーダー様宛にご確認・ご依頼ください。
①カスタマイズ対応テーマテンプレート（ec_force_basic_theme）をご利用、かつ自動更新がOFFの場合
以下のいずれかをご対応ください。
(1)テーマファイルを自動更新ONにアップデートする
コード編集したカスタマイズ対応テーマテンプレート（ec_force_basic_theme）を最新のバージョンにアップデートする方法
(2)自動更新OFFのまま、テーマファイルの編集を行う
- 最新の ec_force_basic_themeをDLして差分ファイルの追加、ソースコードの追記を行う
- ec_force/shop/sections/__head_google_tag_manager.html.liquid
- ec_force/shop/sections/__body_google_tag_manager.html.liquid
- shop/order.html.liquid
- shop.html.liquid
② 2023/6/20 以前に提供した ec_force_default_themeをご利用の場合
ecforceテーマガイド 更新履歴 2023/06/20(1) をもとに、以下の手順で実施してください。
- 「shared_partial body_google_tag_manager」をテーマガイドと同じ内容で記載・保存する（PC/SP版ともに）
- 「shared_partial head_google_tag_manager」をテーマガイドと同じ内容で記載・保存する（PC/SP版ともに）
- 「layout 購入（レイアウト）」「layout 購入以外（レイアウト）」に対して、テーマガイドを参照して 1,2 で追加したファイルを読み込む記述を記載する（PC/SP版ともに）
※誤ったファイルパス・ファイル名 / 存在しないファイルを読み込む記述をすると、ショップの表示がエラーとなります。作業順・編集テーマに注意して、作業をご実施ください。
テーマ編集時の注意事項
「現在のテーマ」（本番適用中）のテーマファイルを更新した場合、即座にサイトに反映されます。
テーマ編集時は現在ご利用中のテーマファイルをコピーした新規テーマを作成し、 コピーしたテーマがテーマライブラリにある（本番適用外）状態での編集を推奨します。
動作確認はプレビュー表示にて実施し、動作確認が完全に終了した後に適用テーマの切り替えを実施します。
測定できるイベント
Google Tag Managerでタグ設定を行うことで測定できるイベントは以下のとおりです。
| イベント | 測定タイミング |
|---|---|
| sign_up | 会員登録したとき |
| login | ログインしたとき |
| search | 商品名を検索したとき |
| view_item | 商品詳細ページを表示したとき |
| add_to_cart | カートに商品を追加したとき |
| view_cart | カート画面を表示したとき |
| remove_from_cart | カートから商品を削除したとき |
| begin_checkout | 注文手続きを開始したとき |
| purchase | 注文完了したとき |
連携方法
事前準備
- Googleのアカウントをお持ちでない場合はアカウントを作成してください。
- Google Tag Managerをインストールし、アカウントとコンテナを作成してください。
- Google Analyticsアカウントを作成し、プロパティの作成とデータストリーム追加を行ってください。
ecforceとGoogle Tag Managerの連携
Google Tag Managerについて
GTM側の項目は最新版と異なる可能性があるため、あくまで参考としてご確認ください。
なお、設定詳細についてはGoogle社へお問い合わせください。
1.Google Tag ManagerのコンテナIDを取得する。
Google Tag Managerの[ワークスペース]にアクセスします。
ウィンドウ上部にあるコンテナ ID（「GTM-XXXXXX」の形式）をコピーしてください。
2.ecforceの外部連携アカウント管理に登録する。
ecforceの「設定 > 外部連携アカウント管理」にアクセスします。
Google Tag Managerの「Google Tag Manager GA4連携 データレイヤー タグ出力」を有効にします。
取得したコンテナID（「GTM-XXXXXX」の形式）を貼り付け、[保存]を押下してください。
Google Tag ManagerとGoogle Analytics 4の連携
「user_id」について
ecforceではGoogle Tag Managerで設定を行うことにより、「user_id」をGoogle Analyticsに送信できます。
「user_id」を活用することで以下のような分析が可能です。
- ログインしているユーザーとログインしていないユーザーを比較したい。
- ユーザー セグメントを探索し、個々のユーザーの利用状況を詳しく確認したい。
- ユーザー ID に基づいて、ユーザー単位のデータを確認したい。
活用方法については[GA4] User-ID のベスト プラクティスをご確認ください。
1.「user_id」変数の作成
Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「変数」をクリックします。
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | user_id |
2.「DOM Ready」トリガーの作成
サイドバーの「トリガー」をクリックします。
トリガーの新規作成を行います。下記のように設定し保存してください。
| トリガーのタイプ | DOM Ready |
3.「GA4設定」タグの作成
●事前準備
Google Analyticsにアクセスし、測定ID(G-XXXXXXの形式)をコピーします。
Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「タグ」をクリックします。
●設定手順
1. タグの新規作成を行います。新規作成を押下し、下記のように設定し、保存してください。
| タグの種類 | Googleタグ | |
| 測定ID | 先ほどコピーしたG-XXXXXX形式のもの | |
| 設定 | 構成パラメータ | user_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
2. サイドバーから「変数」に移動し、ユーザー定義変数の新規作成を押下してください。
3. 「変数のタイプ > Google タグ：イベントの設定」を選択してください。
4. 「Google Analytics User Properties」を開き、下記のように設定し、保存してください。
| Google Analytics User Properties | プロパティ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 |
5. 1のタグ設定画面に戻り、「共有イベントの設定」にて「イベントの設定変数 > ユーザープロパティ」を選択し、保存してください。
6. 「トリガー」の項目にて、作成したDOM Readyトリガーを選択し保存してください。
4.公開設定
ウィンドウ右上の「公開」をクリックします。
バージョン名とバージョンの説明を入力し、再度「公開」をクリックしてください。
各イベントのデータ測定に必要な設定方法
Google Tag Managerで各イベントの測定に必要な変数・トリガー・タグを作成することでGoogle Analytics 4に測定されたデータが連携されます。任意の測定したいイベントごとに設定を行ってください。
設定後はプレビュー機能でタグの動作を確認し、公開まで行ってください。
Caution!!
- 変数・トリガー・タグを作成した後に「公開」を行わないとデータ連携が開始されません。
- パラメータによってGoogle Analyticsへのデータ反映に時間がかかるものがあります。
1.sign_up, login(会員登録、ログインのイベント)
変数の作成
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
ecommerce.method
| データレイヤーの変数名 | ecommerce.method |
| 変数のタイプ | データレイヤーの変数 |
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
会員登録
| トリガーのタイプ | カスタムイベント |
| イベント名 | sign_up |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Event |
| 含む | |
| sign_up |
ログイン
| トリガーのタイプ | カスタムイベント |
| イベント名 | login |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Event |
| 含む | |
| login |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
会員登録, ログイン
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
| イベントパラメータ | パラメータ名 | method |
| 値 | +マークを押下し、作成したecommerce.method変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成した会員登録とログイントリガーを選択し保存してください。
2.search(商品名検索のイベント)
変数の作成
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
ecommerce.search_term
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.search_term |
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
検索
| トリガーのタイプ | カスタムイベント |
| イベント名 | search |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Page Path |
| 含む | |
| shop |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
検索
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
| イベントパラメータ | パラメータ名 | search_term |
| 値 | +マークを押下し、作成したecommerce.search_term変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成した検索トリガーを選択し保存してください。
3.view_item(商品詳細ページ表示のイベント)
変数の作成
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
ecommerce.currency
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.currency |
ecommerce.value
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.value |
ecommerce.items
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.items |
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
商品詳細
| トリガーのタイプ | カスタムイベント |
| イベント名 | view_item |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Page URL |
| 含む | |
| {ショップURL}/shop/products/ |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
商品詳細
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
|
イベントパラメータ |
パラメータ名 | currency |
| 値 | +マークを押下し、作成したecommerce.currency変数を選択 | |
| パラメータ名 | value | |
| 値 | +マークを押下し、作成したecommerce.value変数を選択 | |
| パラメータ名 | items | |
| 値 | +マークを押下し、作成したecommerce.items変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成した商品詳細トリガーを選択し保存してください。
4.add_to_cart,view_cart,remove_from_cart(カート追加、カート表示、カート削除のイベント)
変数の作成
下記変数を作成していない場合は、ユーザー定義変数の新規作成を行います。
- ecommerce.currency
- ecommerce.value
- ecommerce.items
※設定値は「3.view_item(商品詳細ページ表示のイベント)」を参照してください。
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
カート追加
| トリガーのタイプ | カスタムイベント |
| イベント名 | add_to_cart |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Event |
| 等しい | |
| add_to_cart |
カート表示
| トリガーのタイプ | カスタムイベント |
| イベント名 | view_cart |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件1 | Event |
| 等しい | |
| view_cart | |
|
true条件2 |
Page Path |
| 等しい | |
| /shop/cart |
カート削除
| トリガーのタイプ | カスタムイベント |
| イベント名 | remove_from_cart |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件1 | Event |
| 等しい | |
| remove_from_cart | |
|
true条件2 |
Page Path |
| 等しい | |
| /shop/cart |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
カート
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
|
イベントパラメータ |
パラメータ名 | currency |
| 値 | +マークを押下し、作成したecommerce.currency変数を選択 | |
| パラメータ名 | value | |
| 値 | +マークを押下し、作成したecommerce.value変数を選択 | |
| パラメータ名 | items | |
| 値 | +マークを押下し、作成したecommerce.items変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成したカート追加、カート表示、カート削除トリガーを選択し保存してください。
5.begin_checkout(注文手続き開始のイベント)
※注文手続き開始イベントが測定できるのはSHOPのみです。LPは測定できません。
変数の作成
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
ecommerce.affiliation
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.affiliation |
ecommerce.transaction_id
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.transaction_id |
また、下記変数を作成していない場合はユーザー定義変数の新規作成を行います。
- ecommerce.currency
- ecommerce.items
※設定値は「3.view_item(商品詳細ページ表示のイベント)」を参照してください。
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
購入開始
| トリガーのタイプ | カスタムイベント |
| イベント名 | begin_checkout |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Page URL |
| 含む | |
| {ショップURL}/shop |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
購入開始
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
|
イベントパラメータ |
パラメータ名 | currency |
| 値 | +マークを押下し、作成したecommerce.currency変数を選択 | |
| パラメータ名 | items | |
| 値 | +マークを押下し、作成したecommerce.items変数を選択 | |
| パラメータ名 | affiliation | |
| 値 | +マークを押下し、作成したecommerce.affiliation変数を選択 | |
| パラメータ名 | transaction_id | |
| 値 | +マークを押下し、作成したecommerce.transaction_id変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成した購入開始トリガーを選択し保存してください。
6.purchase(注文手続き完了のイベント)
ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。
ecommerce.tax
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.tax |
ecommerce.shipping
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.shipping |
ecommerce.coupon
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.coupon |
ecommerce.discount
| 変数のタイプ | データレイヤーの変数 |
| データレイヤーの変数名 | ecommerce.discount |
※GA4で取得できるdiscount(割引額)の値は1つの受注内の割引額合計になります。商品ごとや割引方法ごとの割引額は測定できません。
また、下記変数を作成していない場合はユーザー定義変数の新規作成を行います。
- ecommerce.currency
- ecommerce.items
- ecommerce_transaction_id
- ecommerce_affiliation
- ecommerce_value
※設定値は「begin_checkout(注文手続き開始のイベント)」を参照してください。
トリガーの作成
トリガーの新規作成を行います。下記のように設定し保存してください。
購入完了-SHOP
| トリガーのタイプ | カスタムイベント |
| イベント名 | purchase |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Page URL |
| 先頭が一致 | |
| {ショップURL}/shop |
購入完了-LP
| トリガーのタイプ | カスタムイベント |
| イベント名 | purchase |
| このトリガーの発生場所 | 一部のカスタムイベント |
| true条件 | Page URL |
| 先頭が一致 | |
| {ショップURL}/lp |
タグの作成
タグの新規作成を行います。下記のように設定し保存してください。
購入完了
| タグの種類 | Googleアナリティクス：GA4イベント | |
| イベント名 | {{Event}} | |
|
イベントパラメータ |
パラメータ名 | items |
| 値 | +マークを押下し、作成したecommerce. items変数を選択 | |
| パラメータ名 | transaction_id | |
| 値 | +マークを押下し、作成したecommerce.transaction_id変数を選択 | |
| パラメータ名 | affiliation | |
| 値 | +マークを押下し、作成したecommerce.affiliation変数を選択 | |
| パラメータ名 | value | |
| 値 | +マークを押下し、作成したecommerce.value変数を選択 | |
| パラメータ名 | tax | |
| 値 | +マークを押下し、作成したecommerce.tax変数を選択 | |
| パラメータ名 | shipping | |
| 値 | +マークを押下し、作成したecommerce.shipping変数を選択 | |
| パラメータ名 | currency | |
| 値 | +マークを押下し、作成したecommerce.currency変数を選択 | |
| パラメータ名 | coupon | |
| 値 | +マークを押下し、作成したecommerce.coupon変数を選択 | |
| パラメータ名 | discount | |
| 値 | +マークを押下し、作成したecommerce.discount変数を選択 | |
| ユーザープロパティ | パラメータ名 | customer_id |
| 値 | +マークを押下し、作成したuser_id変数を選択 | |
| 詳細設定 | 「e コマースデータを送信」にチェックを入れる | |
| データソース | Date Layer | |
トリガーの追加を求められるため、作成した購入完了-SHOPと購入完了-LPトリガーを選択し保存してください。
設定の確認方法
2~3の設定が正しくできている場合は、該当ページでGTMタグの出力が確認できます。該当ページで「ページのソースを表示」（Chromeの場合）を行い、タグ内容が出力されていることを確認します。
タグが表示されていない場合、2~3の設定に不備がある可能性が高いため、見直しが必要です。
なお、タグの出力ができている状態で測定や集計がうまく行かない場合については、GTM、GA4の設定内容をご確認ください。
・ecforce上に出力されているイベントをGTM・GA4間で突き合わせたうえで、GA4側までパラメータが引き継がれているか確認
・GA4のプロパティによってデータ更新頻度が異なるため、ecforce側とGA4のデータ更新のタイムラグによるものではないか 等
弊社サポートについて
GTM、GA4の設定内容についてはサポートの対象外となります。
関連記事
この記事の目次
このセクションの記事