外部連携アカウント

Google Tag Managerを利用したGoogle Analytics 4へのデータ連携

ecforceではGoogle Analytics 4とのデータ連携に、Google Tag Managerを利用できます。
Google Tag Managerを利用することで測定したいイベントのタグを自由に設定可能です。

テーマをご利用の場合

カスタマイズ対応テーマテンプレート(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) をもとに、以下の手順で実施してください。

  1. shared_partial body_google_tag_manager」をテーマガイドと同じ内容で記載・保存する(PC/SP版ともに)

  2. shared_partial head_google_tag_manager」をテーマガイドと同じ内容で記載・保存する(PC/SP版ともに)

  3. 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 注文完了したとき

連携方法

事前準備

ecforceとGoogle Tag Managerの連携

1.Google Tag ManagerのコンテナIDを取得する。

Google Tag Managerの[ワークスペース]にアクセスします。
ウィンドウ上部にあるコンテナ ID(「GTM-XXXXXX」の形式)をコピーしてください。 __________2023-05-29_17.49.01.png

2.ecforceの外部連携アカウント管理に登録する。

ecforceの「設定 > 外部連携アカウント管理」にアクセスします。 __________2023-05-29_17.15.26.png

Google Tag Managerの「Google Tag Manager GA4連携 データレイヤー タグ出力」を有効にします。
取得したコンテナID(「GTM-XXXXXX」の形式)を貼り付け、[保存]を押下してください。 __________2023-05-29_17.15.52.png

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

__________2023-05-29_17.37.55.png

2.「DOM Ready」トリガーの作成

サイドバーの「トリガー」をクリックします。
トリガーの新規作成を行います。下記のように設定し保存してください。

トリガーのタイプ DOM Ready

__________2023-05-29_17.46.25.png

3.「GA4設定」タグの作成

Google Analyticsにアクセスし、測定ID(G-XXXXXXの形式)をコピーします。
Google Tag Managerの[ワークスペース]にアクセスし、サイドバーの「タグ」をクリックします。
タグの新規作成を行います。下記のように設定し保存してください。

タグの種類 Googleアナリティクス:GA4設定
測定ID 先ほどコピーしたG-XXXXXX形式のもの
設定フィールド フィールド名 user_id
+マークを押下し、作成したuser_id変数を選択
ユーザープロパティ フィールド名 customer_id
+マークを押下し、作成したuser_id変数を選択

__________2023-05-29_18.11.28.png トリガーの追加を求められるため、作成したDOM Readyトリガーを選択し保存してください。 __________2023-05-29_18.25.31.png

4.公開設定

ウィンドウ右上の「公開」をクリックします。
バージョン名とバージョンの説明を入力し、再度「公開」をクリックしてください。 __________2023-05-29_18.32.45.png

各イベントのデータ測定に必要な設定方法

Google Tag Managerで各イベントの測定に必要な変数・トリガー・タグを作成することでGoogle Analytics 4に測定されたデータが連携されます。任意の測定したいイベントごとに設定を行ってください。
設定後はプレビュー機能でタグの動作を確認し、公開まで行ってください。

Caution!!

  • 変数・トリガー・タグを作成した後に「公開」を行わないとデータ連携が開始されません。
  • パラメータによってGoogle Analyticsへのデータ反映に時間がかかるものがあります。

1.sign_up, login(会員登録、ログインのイベント)

変数の作成

ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

ecommerce.method

データレイヤーの変数名 ecommerce.method
変数のタイプ データレイヤーの変数

スクリーンショット 2023-05-30 11.32.05.png

トリガーの作成

トリガーの新規作成を行います。下記のように設定し保存してください。

会員登録

トリガーのタイプ カスタムイベント
イベント名 sign_up
このトリガーの発生場所 一部のカスタムイベント
true条件 Event
含む
sign_up

スクリーンショット 2023-05-30 11.35.27.png

ログイン

トリガーのタイプ カスタムイベント
イベント名 login
このトリガーの発生場所 一部のカスタムイベント
true条件 Event
含む
login

スクリーンショット 2023-05-30 15.46.23.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

会員登録, ログイン

タグの種類 Googleアナリティクス:GA4イベント
イベント名 {{Event}}
 イベントパラメータ パラメータ名 method
+マークを押下し、作成したecommerce.method変数を選択
ユーザープロパティ パラメータ名 customer_id
+マークを押下し、作成したuser_id変数を選択
詳細設定 「e コマースデータを送信」にチェックを入れる
データソース Date Layer

トリガーの追加を求められるため、作成した会員登録とログイントリガーを選択し保存してください。

スクリーンショット 2023-05-30 15.47.59.png

2.search(商品名検索のイベント)

変数の作成

ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

ecommerce.search_term

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.search_term

スクリーンショット 2023-05-30 16.00.33.png

トリガーの作成

トリガーの新規作成を行います。下記のように設定し保存してください。

検索

トリガーのタイプ カスタムイベント
イベント名 search
このトリガーの発生場所 一部のカスタムイベント
true条件 Page Path
含む
shop

スクリーンショット 2023-05-30 16.01.46.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

検索

タグの種類 Googleアナリティクス:GA4イベント
イベント名 {{Event}}
 イベントパラメータ パラメータ名 search_term
+マークを押下し、作成したecommerce.search_term変数を選択
ユーザープロパティ パラメータ名 customer_id
+マークを押下し、作成したuser_id変数を選択
詳細設定 「e コマースデータを送信」にチェックを入れる
データソース Date Layer

トリガーの追加を求められるため、作成した検索トリガーを選択し保存してください。

スクリーンショット 2023-05-30 16.40.41.png

3.view_item(商品詳細ページ表示のイベント)

変数の作成

ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

ecommerce.currency

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.currency

スクリーンショット 2023-05-30 16.21.53.png

ecommerce.value

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.value

スクリーンショット 2023-05-30 16.23.11.png

ecommerce.items

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.items

スクリーンショット 2023-05-30 16.28.16.png

トリガーの作成

トリガーの新規作成を行います。下記のように設定し保存してください。

商品詳細

トリガーのタイプ カスタムイベント
イベント名 view_item
このトリガーの発生場所 一部のカスタムイベント
true条件 Page  URL
含む
{ショップURL}/shop/products/

スクリーンショット 2023-05-30 17.40.18.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

商品詳細

タグの種類 Googleアナリティクス:GA4イベント
イベント名 {{Event}}
 イベントパラメータ




パラメータ名 currency
+マークを押下し、作成したecommerce.currency変数を選択
パラメータ名 value
+マークを押下し、作成したecommerce.value変数を選択
パラメータ名 items
+マークを押下し、作成したecommerce.items変数を選択
ユーザープロパティ パラメータ名 customer_id
+マークを押下し、作成したuser_id変数を選択
詳細設定 「e コマースデータを送信」にチェックを入れる
データソース Date Layer

トリガーの追加を求められるため、作成した商品詳細トリガーを選択し保存してください。

スクリーンショット 2023-05-30 17.44.47.png

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

スクリーンショット 2023-05-30 17.52.39.png

カート表示

トリガーのタイプ カスタムイベント
イベント名 view_cart
このトリガーの発生場所 一部のカスタムイベント
true条件1 Event
等しい
view_cart
true条件2


Page Path
等しい
/shop/cart

スクリーンショット 2023-05-30 17.56.12.png

カート削除

トリガーのタイプ カスタムイベント
イベント名 remove_from_cart
このトリガーの発生場所 一部のカスタムイベント
true条件1 Event
等しい
remove_from_cart
true条件2


Page Path
等しい
/shop/cart

スクリーンショット 2023-05-30 17.57.32.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

カート

タグの種類 Googleアナリティクス:GA4イベント
イベント名 {{Event}}
 イベントパラメータ




パラメータ名 currency
+マークを押下し、作成したecommerce.currency変数を選択
パラメータ名 value
+マークを押下し、作成したecommerce.value変数を選択
パラメータ名 items
+マークを押下し、作成したecommerce.items変数を選択
ユーザープロパティ パラメータ名 customer_id
+マークを押下し、作成したuser_id変数を選択
詳細設定 「e コマースデータを送信」にチェックを入れる
データソース Date Layer

トリガーの追加を求められるため、作成したカート追加、カート表示、カート削除トリガーを選択し保存してください。

スクリーンショット 2023-05-30 17.44.47.png

5.begin_checkout(注文手続き開始のイベント)

※注文手続き開始イベントが測定できるのはSHOPのみです。LPは測定できません。

変数の作成

ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

ecommerce.affiliation

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.affiliation

スクリーンショット 2023-05-30 18.04.04.png

ecommerce.transaction_id

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.transaction_id

スクリーンショット 2023-05-30 18.05.05.png

また、下記変数を作成していない場合はユーザー定義変数の新規作成を行います。

  • ecommerce.currency
  • ecommerce.items

※設定値は「3.view_item(商品詳細ページ表示のイベント)」を参照してください。

トリガーの作成

トリガーの新規作成を行います。下記のように設定し保存してください。

購入開始

トリガーのタイプ カスタムイベント
イベント名 begin_checkout
このトリガーの発生場所 一部のカスタムイベント
true条件 Page  URL
含む
{ショップURL}/shop

スクリーンショット 2023-05-30 18.07.47.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

購入開始

タグの種類 Googleアナリティクス:GA4イベント
イベント名 {{Event}}
 イベントパラメータ






パラメータ名 currency
+マークを押下し、作成したecommerce.currency変数を選択
パラメータ名  items
+マークを押下し、作成したecommerce.items変数を選択
パラメータ名 affiliation
+マークを押下し、作成したecommerce.affiliation変数を選択
パラメータ名 transaction_id
+マークを押下し、作成したecommerce.transaction_id変数を選択
ユーザープロパティ パラメータ名 customer_id
+マークを押下し、作成したuser_id変数を選択
詳細設定 「e コマースデータを送信」にチェックを入れる
データソース Date Layer

トリガーの追加を求められるため、作成した購入開始トリガーを選択し保存してください。

スクリーンショット 2023-05-30 18.15.01.png

6.purchase(注文手続き完了のイベント)

ユーザー定義変数の新規作成を行います。下記のように設定し保存してください。

ecommerce.tax

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.tax

スクリーンショット 2023-05-30 18.27.13.png

ecommerce.shipping

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.shipping

スクリーンショット 2023-05-30 18.34.57.png

ecommerce.coupon

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.coupon

スクリーンショット 2023-05-30 18.38.36.png

ecommerce.discount

変数のタイプ データレイヤーの変数
データレイヤーの変数名 ecommerce.discount

※GA4で取得できるdiscount(割引額)の値は1つの受注内の割引額合計になります。商品ごとや割引方法ごとの割引額は測定できません。

スクリーンショット 2023-05-30 18.40.05.png

また、下記変数を作成していない場合はユーザー定義変数の新規作成を行います。

  • ecommerce.currency
  • ecommerce.items
  • ecommerce_transaction_id
  • ecommerce_affiliation
  • ecommerce_value

※設定値は「begin_checkout(注文手続き開始のイベント)」を参照してください。

トリガーの作成

トリガーの新規作成を行います。下記のように設定し保存してください。

購入完了-SHOP

トリガーのタイプ カスタムイベント
イベント名 purchase
このトリガーの発生場所 一部のカスタムイベント
true条件 Page  URL
先頭が一致
{ショップURL}/shop

スクリーンショット 2023-05-30 18.53.11.png

購入完了-LP

トリガーのタイプ カスタムイベント
イベント名 purchase
このトリガーの発生場所 一部のカスタムイベント
true条件 Page  URL
先頭が一致
{ショップURL}/lp

スクリーンショット 2023-05-30 18.55.08.png

タグの作成

タグの新規作成を行います。下記のように設定し保存してください。

購入完了

タグの種類 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トリガーを選択し保存してください。

スクリーンショット 2023-05-31 10.36.28.png

設定の確認方法

2~3の設定が正しくできている場合は、該当ページでGTMタグの出力が確認できます。該当ページで「ページのソースを表示」(Chromeの場合)を行い、タグ内容が出力されていることを確認します。
タグが表示されていない場合、2~3の設定に不備がある可能性が高いため、見直しが必要です。

なお、タグの出力ができている状態で測定や集計がうまく行かない場合については、GTM、GA4の設定内容をご確認ください。
ecforce上に出力されているイベントをGTM・GA4間で突き合わせたうえで、GA4側までパラメータが引き継がれているか確認
GA4のプロパティによってデータ更新頻度が異なるため、ecforce側とGA4のデータ更新のタイムラグによるものではないか 等

GTM、GA4の設定内容についてはサポートの対象外となります

この記事の目次

このセクションの記事

外部連携アカウント