Zenn
株式会社ソニックムーブPublicationへの投稿
📌

GA4/GTMを利用したカスタムディメンション計測の実装手順

tacos
に公開
Google Analytics
mtg
ga
Google Tag Manager
tech

はじめに

これまであまり触れてこなかったGAやGTMに触れる機会があった為、簡単に知見をまとめていきます。

やったこととしてはシンプルで、既存のアプリケーションにGoogle Analytics 4（GA4）と Google Tag Manager（GTM）を導入し、カスタムディメンションを用いてユーザー行動を計測する方法です。

本記事では、主に以下の内容を説明していきます。

  1. GA4とGTMのアカウント設定
  2. アプリケーション側へのGTMの実装
  3. カスタムディメンションの設定と活用方法
  4. データの検証方法
  5. GAでのレポート確認

GA4とGTMの基本セットアップ

GA4 のアカウントの作成

まずは GA4 のアカウントを作成します。

GA4アカウント作成の詳細手順
  1. Google Analyticsにアクセスし、Google アカウントでログインします
  2. 「アカウントを作成」をクリックして、アカウント名を入力（例：「My App Analytics」）
  3. プロパティ名を入力（例：「User App」）
  4. ビジネス情報、利用目的などの基本情報を入力して進みます
  5. 「作成」をクリックしてプロパティを作成

データストリームの作成

GAのアカウントが作成できたら、計測用のデータストリームを作成します。

  1. 左側のメニューから「管理」>「データストリーム」を選択
  2. 「ストリームを作成」をクリック
  3. プラットフォームとして「ウェブ」を選択
  4. サイトの URL とストリーム名を入力
  5. 「ストリームを作成」をクリック
  6. 表示された「測定 ID」（G-XXXXXXXX 形式）をメモしておきます（後で GTM で使用）

GA4のデータストリーム作成画面

GTM のアカウントとコンテナの作成

次に、GTM のアカウントとコンテナを作成します。

  1. Google Tag Managerにアクセス
  2. 「アカウントを作成」をクリック
  3. アカウント名を入力（例：「My App Tags」）
  4. コンテナ名を入力（例：「User App Web」）
  5. ターゲットプラットフォームとして「Web」を選択
  6. 「作成」をクリック
  7. 利用規約に同意

GTMのアカウント作成画面

コンテナが作成されると、アプリケーション側に挿入するためのコードが表示されます。
このコードをコピーして次のステップで使用します。

アプリケーションにGTM設定を実装する

必要なコードの実装

HTMLへのGTM初期化コードの埋め込み

上記でGTMから提供された2つのコードをindex.htmlファイルに追加します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", "GTM-XXXXXXXX"); // GTM-XXXXXXXXは自分のコンテナIDに置き換え
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <!-- GTM-XXXXXXXXは自分のコンテナIDに置き換え -->
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      >
      </iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="app"></div>
  </body>
</html>

dataLayer の基本的な使い方

GTMではdataLayerというオブジェクトを通じてデータをやり取りします。

dataLayer の初期化とデータ送信

アプリケーションの起動時にdataLayerを初期化し、基本データを送信します。

main.js
// グローバルなdataLayerの初期化（main.js、App.jsなどのエントリーポイント）
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  // アプリケーション共通の情報
  userStatus: "anonymous",
  // 他のグローバルな値など...
});

カスタムディメンションの設定と実装

GA側でのカスタムディメンション設定

カスタムディメンションは、GAでデフォルトで収集されない独自の指標を計測するための機能です。
https://support.google.com/analytics/answer/14240153?hl=ja

カスタムディメンションの作成手順

  1. GAの管理画面を開く
  2. 左側のメニューから「管理」>「データの表示」>「カスタム定義」>「カスタムディメンション」を選択
  3. 「カスタムディメンションを作成」をクリック
  4. 以下の情報を入力：
    • ディメンション名：わかりやすい名前（例：「流入元」）
    • 範囲：このディメンションの適用レベルを選択
      • イベント：特定のイベントに関連する値
      • ユーザー：ユーザー全体に関連する値
    • イベントパラメータ / ユーザープロパティ：dataLayer から送信される変数名
  5. 「保存」をクリック

GA4のカスタムディメンション作成画面

今回は例として、以下のカスタムディメンションを作成します。
traffic（範囲：ユーザー）：ユーザーの流入経路

GTM 側での変数設定

データレイヤー変数の設定

  1. GTM の管理画面を開く
  2. 左側のメニューから「変数」を選択
  3. 「ユーザー定義変数」セクションで「新規」をクリック
  4. 変数名を入力（例：「traffic」）
  5. 「変数の設定」をクリックし、「データレイヤーの変数」を選択
  6. データレイヤー変数名に「traffic」と入力
  7. 必要であれば「デフォルト値を設定」にチェックを入れてデフォルト値を設定
  8. 「保存」をクリック

GTMのデータレイヤー変数設定画面

カスタムトリガーの作成

アプリケーション側から好きなタイミングで発火させる事ができるカスタムトリガーを作成することも可能です。

  1. 左側のメニューから「トリガー」を選択
  2. 「新規」をクリック
  3. トリガー名を入力
  4. 「トリガーの設定」をクリックし、「カスタムイベント」を選択
  5. イベント名に任意のトリガー名を入力（コード側から呼び出す際に使用する）
  6. 「保存」をクリック

GTMのトリガー設定画面

タグの設定

GTMからGAにデータを送信するためのタグを作成します。

  1. 左側のメニューから「タグ」を選択
  2. 「新規」をクリック
  3. タグ名を入力（例：「traffic」）
  4. 「タグの設定」をクリックし、「Google アナリティクス: GA4 イベント」を選択
  5. 「計測ID」で先ほど作成した GAの計測IDを選択
  6. イベント名を入力
  7. ユーザープロパティに以下を追加：
    • パラメータ名：「traffic」、値：「{{traffic}}」
  8. 「トリガー」セクションでこのタグを発火させたいトリガーを選択（複数設定可能）
  9. 「保存」をクリック

GTMのタグ設定画面

アプリケーションからのデータ送信実装

イベントの送信方法

以下のようにしてdataLayerにデータを送信できます。

// ユーザー詳細情報取得後のイベント送信
function sendUserDetailViewEvent(userData) {
  // dataLayerが定義されていることを確認
  window.dataLayer = window.dataLayer || [];

  // イベントとパラメータの送信
  window.dataLayer.push({
    event: "custom_trigger", // GTMのトリガー名と一致させる
    traffic: "Ad" // カスタムディメンションとして送信したい値（Line/Ad/Organicなど）
  });
}

動作確認とデバッグ

GTM プレビューモードでの確認

実装した dataLayerのデータ送信が正しく行われているか確認するにはGTMのプレビューモードを使用します。

  1. GTM ダッシュボードの右上にある「プレビュー」ボタンをクリック
  2. 開発中のWebサイトのURLを入力して「接続」をクリック
  3. 新しいタブでアプリケーションが開き、デバッグモードになります
  4. ページ遷移やユーザーアクションを実行して、イベントが正しく発火しているか確認

GTMのプレビューモード画面

GA4 DebugView での確認

GAのDebugViewを使用すると、リアルタイムでイベントデータが送信されていることを確認できます。

  1. GAの管理画面から「管理」>「DebugView」を選択
  2. GTMのプレビューモードを有効にした状態でアプリケーションを操作
  3. DebugView にイベントが表示されることを確認
  4. イベントをクリックして、送信されたパラメータの内容を確認

GAのDebugView画面

GA側での確認

一通り作業が確認したら、GA側でカスタムディメンションの値が計測できているか確認してみます。
以下のように絞り込み条件から、「カスタム」>「設定したカスタムディメンション名」を選択すると、確認できます。

まとめ

今回初めて計測系のツールに触れましたが、公式ドキュメントを含め情報は多く、それほど詰まるポイントはありませんでした。

ただ、計測していく中で「うまく計測できていない事」を検知することが難しいとも感じ、定期的に正しく計測できているかを調査する必要はあると感じました。

参考リソース

株式会社ソニックムーブ
株式会社ソニックムーブPublication

BtoCサービスのUX・CRM設計とその実現を得意とする、デジタルコミュニケーションデザインに特化した開発会社です。ソニックムーブ所属エンジニアが情報発信していきます。

Discussion