GTM+GA4でデータ計測できるようにする②
ここでは、カスタムディメンションについて解説していきます。
イベントタグの追加
GTMのdataLayerを使うことで、任意のイベント、任意の変数を計測することができます。
ここでは、商品詳細ページにイベント「product_event」からカスタムディメンション「product_id」を計測してみます。
GA4
管理＞プロパティ＞カスタム定義＞カスタムディメンションを作成 から、カスタムディメンションを作成します。
範囲はイベント、イベントパラメータは「product_id」としました。ディメンション名はあとから編集可能なので適当でいいです。
一度追加したカスタムディメンションは削除できません。注意してください。
GTM
GTMでも同様の設定をします。
GTMでは変数を追加します。
変数＞ユーザ定義変数＞新規＞変数の設定＞データレイヤーの変数を選択します。
次に、トリガー＞トリガーの設定＞カスタムイベントを選択します。
イベント名は「product_event」、発生場所は「すべてのカスタムイベント」にします。
今度はイベント用のタグを作成します。
イベント用のタグに先ほど作成した変数、トリガーを紐づけることで、タグを発火させる準備ができます。
タグ＞新規＞タグの設定から「Googleアナリティクス: GA4イベント」を選択します。
設定タグは「GA4設定」を選択
イベント名は{{Event}}
イベントパラメータにパラメータ名「product_id」、値に「{{product_id}}」を設定します。
トリガーには先ほど作成したカスタムイベント「product_event」を設定します。
※トリガーについて
URLの一致も設定できます。
その場合はイベント名を「gtm.js」ってやったほうがよいかもしれないです。
EC-CUBE
商品詳細ページで発火させるタグなので、default/detail.tplに以下のタグを挿入します。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'product_event',
'product_id': '<!--{$tpl_product_id}-->',
});
</script>
プレビュー
GTM
GTMのプレビュー画面を確認すると、商品詳細ページで先ほど設定したGA4イベントのタグが発火しているのが確認できます。
GA4
GA4側も見てみます。
今度はDebugViewで確認してみます。
管理＞プロパティ＞DebugViewを選択します。
この画面ではデバッグモードのとき、リアルタイムのイベントの挙動を確認することができます。
chromeの拡張機能Google Analytics Debuggeを有効にするか、あるいはGTMのGA4設定タグから、debug_mode trueを設定すると使用できます。
参考
イベント「product_event」が発火しているのが確認できるのでproduct_eventをクリックして
パラメータからproduct_idを選択します。
product_idの中には2が含まれており、閲覧していたURLは/products/detail.php?product_id=2だったのでカスタムディメンションproduct_idが正常に計測できていることが確認できます。
参考
Discussion