Google Tag Manager 経由での Google Analytics 管理に対応した、eコマース/拡張eコマースタグおよびGA4タグ設置プラグイン。通常のeコマース計測はもちろん実装の難しい拡張eコマースやGA4もこれ一つで対応!その他 User ID レポート、カスタム速度、サイト内プロモ計測などにも対応しています。Google Analytics の拡張eコマース/eコマース機能や
本プラグインで eコマース/拡張eコマースを実施するためには以下の準備が必要です。
1. Google Tag Manager
Google Tag Manager がないと、eコマース/拡張eコマースタグを発行することができません。まだ アカウントを持っていない人は、
ここからアカウントを開設してください。
[Google Analytics の場合]
2. タグ設定
[Google Analytics タグ]
Track Type: Page View
Google Analytics Settings: 任意の名称の設定を作成
Triggering: Custom Event - gtmgaeec ※後述①
Google Analytics 設定
Tracking ID : あなたの GA トラッキングIDを設定してください(APPENDIX 参照)
userID : DataLayer - gaeec_user_id ※後述②
Ecommerce :
- Enable Enhanced Ecommerce Features を有効化し、Use Data Layer を選択してください。
①
gtmgaeec というトリガーを追加し、これを上記GAタグ発行の条件に設定してください。
②
gaeec_user_id という DataLayer 変数を用意し、これを上記GAタグの userId フィールドの値としてください。
[Google Analytics - カスタム速度タグ]
Track Type: Timing
Var: EC-CUBE GtmGaEEC Plugin
Category: load
Value: DataLayer - gaeec_user_timings ※後述③
Google Analytics Settings: 上記のGA設定で作成したものをそのまま流用
Triggering: Custom Event - 上記のGA設定で作成したものをそのまま流用
③
gaeec_user_timings という DataLayer 変数を用意し、これを上記GAタグの Value フィールドの値としてください。
以上でGTMの設定は完了です。プレビューで問題ないことを確認したうえで公開してください。
[GA4 の場合]
2. GA4タグ設定
Name: Google Analytics: GA4 Configuration
Track Type: Google Analytics: GA4 Configuration
Measurement ID: 貴方の GA4 メジャーメントIDを設定
Field Name:
- user_id : {{GA4 user_id}} ※後述①
- debug_mode : true
Triggering: すべてのページ
①
user_id という DataLayer 変数を用意し、これを上記GA4タグの user_id フィールドの値としてください。
3. dataLayer を設定
以下 5つの variables を設定します
* GA4 dataLayer ecommerce.items
* GA4 dataLayer ecommerce.shipping
* GA4 dataLayer ecommerce.tax
* GA4 dataLayer ecommerce.transaction_id
* GA4 dataLayer ecommerce.value
[GA4 dataLayer ecommerce.items]
Name: GA4 dataLayer ecommerce.items
Variable Type: Data Layer Variables
Dat Layer Variable Name: ecommerce.items
[GA4 dataLayer ecommerce.shipping]
Name: GA4 dataLayer ecommerce.shipping
Variable Type: Data Layer Variables
Dat Layer Variable Name: ecommerce.shipping
[GA4 dataLayer ecommerce.tax]
Name: GA4 dataLayer ecommerce.tax
Variable Type: Data Layer Variables
Dat Layer Variable Name: ecommerce.tax
[GA4 dataLayer ecommerce.transaction_id]
Name: GA4 dataLayer ecommerce.transaction_id
Variable Type: Data Layer Variables
Dat Layer Variable Name: ecommerce.transaction_id
[GA4 dataLayer ecommerce.value]
Name: GA4 dataLayer ecommerce.value
Variable Type: Data Layer Variables
Dat Layer Variable Name: ecommerce.value
4. トリガーを設定
以下 6つの trigger を設定します
* view_item_list
* view_item
* add_to_cart
* begin_checkout
* confirmation
* purchase
[view_item_list]
Name: GA4 - view_item_list
Trigger Type: Custom Event
Event name: view_item_list
[view_item]
Name: GA4 - view_item
Trigger Type: Custom Event
Event name: view_item
[add_to_cart]
Name: GA4 - add_to_cart
Trigger Type: Custom Event
Event name: add_to_cart
[begin_checkout]
Name: GA4 - begin_checkout
Trigger Type: Custom Event
Event name: begin_checkout
[confirmation]
Name: GA4 - confirmation
Trigger Type: Custom Event
Event name: confirmation
[purchase]
Name: GA4 - purchase
Trigger Type: Custom Event
Event name: purchase
5. GA4イベントタグ設定
計測したいイベント毎にタグを作成します。ここでは以下6つのイベントの計測タグを追加します。
* view_item_list
* view_item
* add_to_cart
* begin_checkout
* confirmation
* purchase
[view_item_list]
Name: GA4 Event - view_item_list
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: view_item_list
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Trigger: GA4 - view_item_list
[view_item]
Name: GA4 Event - view_item
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: view_item
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Trigger: GA4 - view_item
[add_to_cart]
Name: GA4 Event - add_to_cart
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: add_to_cart
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Trigger: GA4 - add_to_cart
[begin_checkout]
Name: GA4 Event - begin_checkout
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: begin_checkout
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Trigger: GA4 - begin_checkout
[confirmation]
Name: GA4 Event - confirmation
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: confirmation
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Trigger: GA4 - confirmation
[purchase]
Name: GA4 Event - purchase
Track Type: Google Analytics: GA4 Event
Configuration Tag: 4で作成した GA4 Configuration を指定
Event Name: purchase
Parameter Name: items
Value: {{GA4 dataLayer ecommerce.items}}
Parameter Name: shipping
Value: {{GA4 dataLayer ecommerce.shipping}}
Parameter Name: tax
Value: {{GA4 dataLayer ecommerce.tax}}
Parameter Name: transaction_id
Value: {{GA4 dataLayer ecommerce.transaction_id}}
Parameter Name: value
Value: {{GA4 dataLayer ecommerce.value}}
Parameter Name: currency
Value: JPY ※ ec-cube を日本円以外の通貨で運用の場合は
通貨リファレンスに従い適切なコードを設定してください。
Trigger: GA4 - purchase
以上で設定は完了です、GTM タグを publish してください。
NOTE:
v2.2.0 より追加された mypage, mypage_login, sign_up, sign_up_confirm, sign_up_initiated, shopping_login, shopping_nonmember イベントはそれぞれ以下のページの dataLayer に盛り込まれております。GTMに設定して計測にご利用くださいませ。
ログイン完了の計測も可能です。ただしこちらは GTM 上の開発が伴うため有償対応としております。お気軽にご相談ください。
Event名 | URL | ノート |
---|
mypage | /mypage | マイページ表示 |
mypage_login | /mypage/login | 通常のログインページ表示 |
sign_up | /entry/complete | 新規会員登録 完了 |
sign_up_confirm | /entry | 新規会員登録 入力内容確認 |
sign_up_initiated | /entry | 新規会員登録ページ表示 |
shopping_login | /shopping/login | 購入からのログインページ表示 |
shopping_nonmember | /shopping/nonmember | ゲスト購入ページ表示 |