toB向け管理画面へのGTMとGA導入：複数環境対応と設定のポイント
toB向けの管理画面にGoogle Tag Manager（以下、GTM）とGoogle Analytics（以下、GA）を導入したので、設定した内容について記載していきたいと思います。
概要
今回行った設定は大きく以下の３つになります。
- GTMは1つのコンテナ、GAは1つのアプリで複数環境（dev/stg/prd）を測定するための設定
- ログインのアカウントIDやテナントIDなどを連携
- SPAのページの設定
1. GTM/GAを１つのコンテナとアプリで計測
設定した管理画面にはdevelopment, staging, productionの３つの環境があります。
今回はこちらを１つのGTMコンテナ、１つのGAアプリで計測するようにしました。
理由としては、GTMコンテナやGAアプリが分かれてしまうと、それ毎に設定が必要となり、設定漏れやそれぞれで異なる設定をしてしまうことを避けるためです。
複数環境に対応するために、GTMの環境とGAのストリームをそれぞれの環境（development, staging, production）ごとに設定します。
1-1. GTM:環境を設定
GTMの「環境」の設定で、「Production」, 「Staging」, 「Development」の３つを作成します。
1-2. GA:ストリームを設定
GAのデータストリームとして、「Production」, 「Staging」, 「Development」の３つを作成します。
1-3. GTM:環境とストリームをマッピングするためのルックアップテーブル変数を作成
GTMで環境ごとに測定IDを振り分けるためのルックアップテーブルを作成します。
以下のように変数から変数のタイプ=ルックアップテーブルを選択し、環境ごとに異なる測定IDが出力されるように設定します。
ここで作成した変数を、GAタグを設定する際の測定IDとして利用します。
2. ログインのアカウントIDやテナントIDなどを連携
ログインした際のアカウントIDやテナントIDなど、管理画面のデータを参照する際に利用したいデータをカスタムディメンションを利用してGAに連携します。
2-1. GA:カスタム定義を作成する
GAのカスタム定義の設定から、連携するディメンションを作成します。
スコープとしてユーザー、イベント、項目を選択します。データの内容にあわせて選択してください。
今回は、ログインのアカウントIDと他に２つのデータをユーザースコープ、イベントスコープそれぞれ１つずつ設定しています。
2-2. GTM:データレイヤー変数として定義
連携する値をデータレイヤー変数として定義します。
2-3. GTM:Googleタグ設定として変数を設定
作成したデータレイヤー変数をGAタグに渡すための設定を行います。
具体的には、変数タイプ「Google タグ: イベントの設定」を利用して以下のように設定します。
- 左辺: GAのカスタム定義で設定したユーザープロパティ/イベント名
- 右辺: データレイヤー変数で定義した値
ユーザースコープで登録した変数は、「Google Analytics User Properties」に設定します。
ログインのIDを連携する場合は、UserIDとしても連携するように設定します。
※ユーザーIDについては、こちらに記載されています。
3. GAタグを設定する
これまで設定した変数を元に、GTMでGAタグを設定していきます。
今回はタグの種類として、「Googleアナリティクス: GA4イベント」を利用します。
測定ID、イベントパラメータは1-3, 2-3で利用した変数を設定します。
4. SPAページ用の設定
導入する管理画面がSPAのため、追加で以下のような設定を行いました。
※ 必要な設定については、SPAの実装によって異なると思いますので、あくまで参考として見ていただければと思います
4-1. GA:ページビューの計測設定の変更
データストリーム設定 > 拡張計測機能の設定で、ページビュー数の「ブラウザの履歴イベントに基づくページの変更」をオフにします。
オンにすることで、自動的に履歴変更、つまりSPAページ内のページ遷移を計測することができますが、カスタム定義が送信されないため、オフにします。
4-2. GTM:配信トリガーとして履歴の変更を追加
配信トリガーとして、「All Pages」だけではなく、「履歴の変更」も追加します。
自分の備忘録も兼ねて、GTM/GAで設定した内容を記載してみました。
この設定はこうしたほうが良い、などあればコメントなどで教えていただければと思います。
Discussion