📊
React+GA4+BigQueryで作る！顧客属性で分析するWebアプリのモダン分析基盤

賀来健人
2025/11/06に公開
 はじめにWeb サイトのユーザー行動分析ツールとして広く使われている Google Analytics 4（GA4）ですが、一般的には「サイトを訪れた不特定多数の匿名ユーザー」を分析する目的で使われるケースが多いです。
しかし、ログインが前提となる SaaS サービスにおいては、「誰が」「いつ」「どのように」サービスを利用しているかを高い解像度で把握することが、顧客満足度の向上や解約率の低下、さらにはプロダクトの改善に直結します。
本記事では、React で構築された Web アプリケーションを題材に、Firebase と GA4 を連携させ、ログイン済みユーザーの行動を顧客情報と紐づけて分析できる基盤を構築した事例をご紹介します。
この記事では、次の内容を解説します。
Firebase Analyticsを使い、Reactアプリから簡単な実装でユーザー行動ログを送信する方法
取得したログと既存の顧客情報を紐づけ、顧客属性（例：契約プラン、利用期間など）ごとの詳細な分析を実現するアプローチ

 🚀 技術スタック
フロントエンド: React

ログ送信: Firebase Analytics (Google Analytics 4)

ユーザー特定: Firebase Authentication

データウェアハウス: BigQuery

可視化（BI）ツール: Looker Studio

 🗺️ データフロー全体像構築した分析基盤のデータフローは以下です。

React アプリから送信されたログが、最終的に Looker Studio 上で可視化されるまでのプロセスを解説します。

Reactアプリケーション：ユーザーの操作（画面表示、ボタンクリックなど）をトリガーにイベントログを送信します。このとき、イベントログへ Firebase Authentication のユーザーIDを付与します。

Firebase Analytics (GA4)：送信されたログを収集・集計します。

BigQuery：GA4 の生データを自動でエクスポート（シンク）し、顧客マスタとログを結合します。

Looker Studio：BigQueryのデータを参照し、グラフや表として可視化します。

 1. React から GA4 のログを送信まずは分析の起点となる、ユーザーの行動ログを React アプリから送信する部分です。

Firebase Analytics SDKを利用することで、非常にシンプルに実装できます。

 FirebaseのセットアップFirebase プロジェクトが作成され、React アプリに Firebase SDK が導入されている前提で進めます。

未設定の場合は、公式ドキュメントを参考に設定してください。
以下のように 、firebase.js で Analytics と Auth を初期化しておきます。
// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAnalytics, logEvent, setUserId } from "firebase/analytics";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // ...ご自身のFirebaseプロジェクトの設定を記述
};

// Firebaseアプリを初期化
const app = initializeApp(firebaseConfig);

// 各サービスを取得
export const auth = getAuth(app);
export const analytics = getAnalytics(app);

// ログ送信用の関数をエクスポートしておくと便利
export const sendLog = (eventName, eventParams) => {
  logEvent(analytics, eventName, eventParams);
};

 イベントログの送信ログは主に useEffect（画面表示時）や onClickハンドラ（クリック時）内で送信します。
重要なのは、どのユーザーの行動かを特定するために、Firebase Authentication で認証済みのユーザーIDを GA4 に設定することです。 これにより、GA4 のログを自社の顧客データベースと安全に紐づけることが可能になります。

 App.js：ルートコンポーネントでのuser_id設定onAuthStateChangedリスナーをルートコンポーネントに配置し、ユーザーのログイン・ログアウトを検知してsetUserIdを実行します。
// src/App.js
import React, { useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth, analytics } from './firebase';
import { setUserId } from 'firebase/analytics';
import Dashboard from './Dashboard'; // 表示するコンポーネントの例

function App() {
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        // ★★★ 認証済みのユーザーIDをGA4に一度だけ設定する ★★★
        // これ以降、sendLogで送信するすべてのイベントにこのIDが紐付けられます。
        setUserId(analytics, user.uid);
      } else {
        // ユーザーがログアウトした場合
        setUserId(analytics, null);
      }
    });

    // クリーンアップ関数でリスナーを解除
    return () => unsubscribe();
  }, []); // マウント時に一度だけ実行

  return (
    <div className="App">
      {/* ここにルーターや他のコンポーネントが入ります */}
      <Dashboard />
    </div>
  );
}

export default App;

 Dashboard.js：各画面でのイベント送信ルートコンポーネントでuser_idが設定済みのため、各画面のコンポーネントはイベントを送信することだけに集中できます。
// src/components/Dashboard.js
import React, { useEffect } from 'react';
import { sendLog } from '../firebase';

const Dashboard = () => {
  useEffect(() => {
    // この画面が表示されたことを示すログを送信
    // user_idはApp.jsで設定済みなので、ここでは指定不要
    sendLog('page_view', {
      page_title: 'Dashboard',
      page_location: '/dashboard',
    });
  }, []);

  const handleCreateReportClick = () => {
    // ボタンがクリックされたことを示すログを送信
    sendLog('button_click', {
      button_name: 'create_report',
      location: 'dashboard_header',
    });
    // ...レポート作成処理
  };

  return (
    <div>
      <h1>ダッシュボード</h1>
      <button onClick={handleCreateReportClick}>レポートを作成する</button>
      {/* ...その他のUI */}
    </div>
  );
};

export default Dashboard;
このように責務を分離しておくことで、コードの見通しがよくなり、user_idの設定漏れも防げます。
Firebase Analytics（GA4）は、フロントエンドから簡単にログを送信できる のが大きな利点です。

 2. GA4 から BigQuery へデータ連携続いて、GA4 に蓄積されたログデータを BigQuery へエクスポートし、柔軟な分析を可能にします。

一度設定すれば、以降は自動でデータ連携が行われます。

 BigQuery 連携の設定手順Firebase Console へアクセス
左メニューの歯車アイコンから「プロジェクトの設定」を選択
「統合」タブを開き、BigQuery のカード内にある「リンク」をクリック
画面の指示に従い、GA4 と BigQuery のリンクを有効にします。
設定後、BigQuery 内に analytics_<your_project_id> というデータセットが作成され、イベントログが日別でテーブルに保存されるようになります。

 よく使うGA4の主要カラムイベントログには多くのデータカラムがありますが、主に使用するのは以下の 3つです。

event_name: イベントの種別（例：page_view、button_click など）

event_params: イベントの詳細情報（配列形式）

user_id: setUserIdで設定した Firebase Authentication のユーザーID
user_id をキーに顧客マスタ（契約プラン、登録日など）を JOIN することで、「どのプランのユーザーが、どの機能をよく使っているか」 といった分析が可能になります。

 3. Looker Studio でデータを可視化BigQuery に蓄積されたデータを Looker Studio で可視化します。
GA4 の行動ログと、自社の 顧客情報テーブル（ユーザーマスタ） を結合することで、アクセスデータが意味のある「顧客行動データ」に変わります。

 BigQuery で分析用ビューを作成（顧客情報の結合）運用やパフォーマンスを考慮し、BigQuery 上に分析用ビュー（仮想テーブル）を用意します。
CREATE OR REPLACE VIEW `your-project.your_dataset.user_action_with_attributes` AS
SELECT
  -- usersテーブルから取得した顧客属性
  u.plan,
  u.registration_date,
  u.user_segment, -- 例：'法人' or '個人'

  -- eventsテーブルから取得した行動ログ
  e.event_date,
  e.event_timestamp,
  e.event_name,
  (SELECT value.string_value FROM UNNEST(e.event_params) WHERE key = 'page_title') AS page_title,
  (SELECT value.string_value FROM UNNEST(e.event_params) WHERE key = 'button_name') AS button_name,

  -- 結合キー
  e.user_id
FROM
  `your-project.analytics_xxxx.events_*` AS e
INNER JOIN
  -- ここで自社で管理する顧客マスタと結合する
  `your-project.your_dataset.users` AS u
ON
  e.user_id = u.user_id
WHERE
  e.user_id IS NOT NULL;
このビューを使うことで、「どのプランのユーザーが」「どの機能を」「どれくらい使っているか」 を簡単に把握できるようになります。

 Looker Studioでダッシュボードを作成Looker Studioを開き、新しいデータソースを作成
コネクタから「BigQuery」を選択し、作成したビュー を指定
データを接続したら、新しいレポートを作成し、グラフや表を追加
ここまで構築できれば、あとはダッシュボードの設計次第でさまざまな分析が行えます。

契約プラン別 のアクティブユーザー数の推移

登録月別 の平均セッション時間

特定の機能 を利用しているユーザーのプラン構成
最近アクセスのないユーザーを顧客セグメント別に抽出
このように、顧客情報と行動ログを掛け合わせることで、通常のアクセス解析では得られない深いインサイト を導き出すことができるようになりました。
本記事で紹介した分析基盤を構築・運用する際には、ユーザーのプライバシー保護を最優先事項として位置づける必要があります。以下の点を必ず遵守してください。
プライバシーポリシーへの明記
取得するデータの種類、利用目的、第三者提供の有無（Google Analyticsへのデータ送信を含む）などを、プライバシーポリシーに明確に記載してください。また、ユーザーがいつでも内容を確認できるよう、アプリやWebサイト上で適切に公開しておく必要があります。
ユーザーからの同意取得
アプリの利用開始時など、データの取得・利用が始まる前に、プライバシーポリシーへの同意を得るプロセスを必ず設けてください。これは、日本の個人情報保護法やEUのGDPRなど、関連法令を遵守するために必要な措置です。
GA4利用規約の遵守
Google Analytics 4（GA4）の利用規約では、個人を特定できる情報（PII：Personally Identifiable Information）──たとえば氏名、メールアドレス、電話番号など──をGA4に直接送信することが厳しく禁止されています。
そのため、user_id には個人情報と直接結びつかない一意の識別子（例：Firebase AuthenticationのUIDなど）を使用してください。個人情報との紐付けが必要な場合は、BigQueryにエクスポートした後、アクセス制御が適切に施されたセキュアな環境下で実施するよう設計してください。

 おわりに今回は、React・Firebase・GA4・BigQuery・Looker Studio を組み合わせて、顧客単位で行動を深く分析できるモダンな分析基盤の構築方法を紹介しました。
この仕組みの最大の価値は、単なるアクセス解析を超えて、「顧客ごとのプロダクト利用状況をデータで理解できる」 ことにあります。
どの機能が、どの顧客層に支持されているのか
利用が減少している顧客に共通点はあるのか
利用期間に応じて、顧客行動はどのように変化しているのか
こうした分析結果は、プロダクト改善や顧客サポートの質を高め、さらにはビジネス成長を後押しする大きなヒントとなります。
行動データを正しく整理し、継続的に活用できる環境を整えることで、より精度の高い意思決定と、プロダクトの持続的な成長につなげることができます。
本記事が、行動分析基盤の設計や改善を考える際の一助となれば幸いです。
株式会社キーウォーカー　テックブログPublication
株式会社キーウォーカーは「世界の未来を可視化する」をミッションにWebデータを始めとするビッグデータの収集と正規化、Tableau等のBIツールを基にしたデータビジュアライゼーション、テキスト分析支援サービスや画像処理技術、統計学やAIによるデータ分析ソリューションを提供しています。
React+GA4+BigQueryで作る！顧客属性で分析するWebアプリのモダン分析基盤

はじめに

🚀 技術スタック

🗺️ データフロー全体像

1. React から GA4 のログを送信

Firebaseのセットアップ

イベントログの送信

`App.js`：ルートコンポーネントでの`user_id`設定

`Dashboard.js`：各画面でのイベント送信

2. GA4 から BigQuery へデータ連携

BigQuery 連携の設定手順

よく使うGA4の主要カラム

3. Looker Studio でデータを可視化

BigQuery で分析用ビューを作成（顧客情報の結合）

Looker Studioでダッシュボードを作成

おわりに

Discussion
