こんにちは。サーバーサイドエンジニアの柿本です。
みなさんは Google Analytics してますか？
Webサービスを運営していて Google Analytics のお世話にならない方はあまりいないと思いますが、 GA4 とか GTM とか色々な言葉が出てきて、「よくわからん」という方も多いのではないでしょうか？
私もそれです！とりあえず Google のヘルプサイトをなぞってスニペットを置いたらそれっぽく動いているからこれでいいや、となっているタイプです。
ですが、そのままだと、「検証環境はどうするの？」とか「園ごとの利用状況はどうやって見るのさ？」となるわけです。
どんなサービスでも検証環境は必ずありますし、ユーザーの所属組織ごとの利用状況を知りたいケースはToBサービスを提供している会社では多いと思います。
そういった場合に、スニペットを置いたその次にやることを書きたいと思います。
達成したいこと
- 検証環境で Google Analytics の動作も検証したい
- ユーザー組織ごとの利用状況も Google Analytics に集めたい
前提
- Google Tag Manager を使った設定方法です。
- GA は本番環境用と検証環境用で分けているとします。
- Web アプリケーションを想定しています。
- ユーザーの所属組織(
organization_id)ごとに集計したいとします。
設定内容
GTM 設定・実装・GA 設定、の3つに分けて説明します。
GTM 設定
管理 > 環境
検証用の環境（例： Staging ）を作成します。
本番環境はデフォルトの Live 環境を使いましょう。
＜ポイント＞
公開時に環境を選択できるため、検証環境だけに適用して動作確認できます。つまり安全に公開できます。
ユーザー定義変数
以下の5つを設定します。
organization_id- タイプ：
データレイヤーの変数 - 変数名：
organization_id
- タイプ：
ga4-measurement-id-all-env- タイプ：
正規表現の表 - 変数：
{{Page Hostname}} - 正規表現の表：（例）
hoge\.sample\.com->(本番環境用のGA4測定ID)hoge-stg\.sample\.com->(検証環境用GA4測定ID)
- タイプ：
data-gtm-trigger- タイプ：
自動イベント変数 > 要素の属性 - 属性名：
data-gtm-trigger
- タイプ：
gtag-config-set- タイプ：
Googleタグ: 設定 - 構成パラメータ：
organization_id:{{organization_id}}
- タイプ：
gtag-event-set- タイプ：
Googleタグ: イベントの設定 - Google Analytics User Properties：
organization_id:{{organization_id}}
- タイプ：
＜ポイント＞
- 以下２つにより、検証環境での動作が本番環境での動作を保証します。
organization_id,data-gtm-triggerは実装（後述）から取得- GA4測定IDはホスト名を正規表現で振り分ける
- 構成パラメータに
organization_idを設定することで自動収集を含むすべてのイベントのパラメータとして利用可能になります。 - User Properties に
organization_idを設定することで GA のカスタムディメンションに利用可能になります。
Googleタグ（旧GA4設定タグ）
以下1つを設定します。
ga4-hoge-service-all-env（例）- タグの設定：
- 種類：
Google タグ - タグID：
{{ga4-measurement-id-all-env}} - 設定 > 構成の設定変数：
{{gtag-config-set}} - 共有イベントの設定 > イベントの設定変数：
{{gtag-event-set}}
- 種類：
- トリガー：
All Pages
- タグの設定：
＜ポイント＞
Google タグは同じ条件でトリガーされるものを複数作らないようにしましょう。設定フィールドやユーザープロパティが想定通りに適用されなくて躓きました。
トリガー
検知したいトリガーを設定します。以下は１例。
クリック:メッセージを送信- タイプ：
クリック > 全ての要素 - 発生場所：
一部のクリック - 条件：
Page Path|等しい|/messages/newdata-gtm-trigger|等しい|message-send-button
- タイプ：
＜ポイント＞
本番・検証環境で共通の条件を指定します。
GA4イベントタグ
トリガーにひもづくイベントのタグを設定します。
メッセージを送信- タグの設定：
- 種類：
GA4 イベント - 測定ID：
{{ga4-measurement-id-all-env}} - イベント名：
send_message
- 種類：
- トリガー：
クリック:メッセージを送信
- タグの設定：
＜ポイント＞
Google タグの設定が適用されるため、個別に「イベントパラメータ」「ユーザープロパティ」を設定する必要はありません。
実装
GTM Script
本番環境は GTM のクイックスタートガイドに記載の通りに行います。
検証環境は「GTMのコンソール > 管理 > 環境 > 操作 > コードを取得」から入手します。
＜ポイント＞
本番環境に Live 環境用のスニペットを設定しないようにしましょう。パフォーマンスが最適化されないようです。（参考）
dataLayer
dataLayer に organization_id を追加します。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
organization_id: #{current_user.organization.id}
});
</script>
＜ポイント＞
GTM Script より上に設定しましょう。 page_view イベントはコンテナがロードされたタイミング（＝GTM scriptが実行されたタイミング）で呼ばれるためそれより前に dataLayer が organization_id を保持している必要があります。
data属性
イベントを計測したい要素に data-gtm-trigger 属性で固有の値を設定します。
＜ポイント＞
属性名はなんでも良いですが、開発ルールとして固定しましょう。
GA 設定
カスタムディメンション
ユーザープロパティとして organization_id を設定します。
organization_id- ディメンション名：
organization_id - 範囲：
ユーザー - ユーザープロパティ：
organization_id
- ディメンション名：
＜ポイント＞
ユーザーの属性として利用可能になります。
最後に
一見すると設定が多く感じますが、最初のみです。上記を設定しておけば追加のイベントを設定したいときは、
- 実装： data-gtm-trigger を対象の要素の属性に追加
- GTM： トリガーと GA4 イベントタグを作成
すれば良いので簡単です。
GTM は設定を多重化できて奥が深いですが、今回は GTM の基本的な設定のみで構成しているため比較的わかりやすいかと思います。
みなさんの参考になれば幸いです。
ユニファでは随時一緒に働く仲間を募集しています。以下募集要項をご参照ください！
