Antigravity × Google Analytics 4 完全統合ガイド — WebとモバイルのGA4実装を自動化する

取り組みの背景：なぜ GA4 × Antigravity なのか

アプリやWebサービスを公開した後、「ユーザーがどこで離脱しているか」「どの機能がよく使われているか」を把握することは、プロダクトの成長に欠かせません。Google Analytics 4（GA4）はその答えを提供する強力な分析基盤ですが、実装には意外と手間がかかります。

Antigravity（Google の AI IDE）を活用すれば、GA4 の実装作業を大幅に効率化できます。ここではNext.js や React アプリへの GA4 統合から、カスタムイベントの設計、Firebase 経由のモバイルアプリ連携まで、実践的なワークフローをご紹介します。

この記事で学べること：

Antigravity を使った GA4 の基本セットアップ方法
カスタムイベント設計とデータレイヤーの実装
コンバージョン計測の自動化
モバイルアプリ（Firebase Analytics）との統合

GA4 の基礎知識：Universal Analytics との違い

GA4 は、従来の Universal Analytics（UA）と異なり、イベントベースのデータモデルを採用しています。UAではセッションとページビューが中心でしたが、GA4ではすべてのインタラクションが「イベント」として記録されます。

主な変更点：

イベントベース: クリック・スクロール・購入など、すべての操作がイベントとして統一的に扱われる
クロスプラットフォーム: Web・iOS・Android のデータを 1 つのプロパティで管理可能
BigQuery 連携: 無料で BigQuery へエクスポートでき、高度な分析が可能
機械学習の活用: 予測指標（離脱予測・収益予測など）が標準搭載

Step 1：Antigravity に GA4 プロジェクトの情報を渡す

Antigravity でGA4実装を始める前に、プロジェクトのコンテキストを整理しておくと作業がスムーズになります。

まず、AGENTS.md（または .antigravity/rules.md）に以下を記述します：

## Analytics Requirements
- GA4 Measurement ID: G-XXXXXXXXXX
- Framework: Next.js 15 (App Router)
- Events to track:
  - page_view (auto)
  - button_click (custom)
  - form_submit (custom)
  - purchase (enhanced ecommerce)
- Conversion goals:
  - form_submit → Lead
  - purchase → Revenue

このコンテキストを設定することで、Antigravity が適切なコード生成を行いやすくなります。

Step 2：Next.js への GA4 基本実装

Antigravity のチャットで次のようにプロンプトを入力します：

Next.js 15 App Router に Google Analytics 4 を実装してください。
Measurement ID は G-XXXXXXXXXX です。
- src/components/GoogleAnalytics.tsx を作成
- layout.tsx に組み込む
- next/script の afterInteractive で読み込む
- 開発環境では無効にする

Antigravity が生成するコードの例：

// src/components/GoogleAnalytics.tsx
import Script from "next/script";
 
interface GoogleAnalyticsProps {
  measurementId: string;
}
 
export const GoogleAnalytics = ({ measurementId }: GoogleAnalyticsProps) => {
  // 開発環境ではGA4を無効化（不要なデータ汚染を防ぐ）
  if (process.env.NODE_ENV !== "production") {
    return null;
  }
 
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${measurementId}', {
              page_path: window.location.pathname,
              send_page_view: false
            });
          `,
        }}
      />
    </>
  );
};

// src/app/layout.tsx（抜粋）
import { GoogleAnalytics } from "@/components/GoogleAnalytics";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <GoogleAnalytics measurementId={process.env.NEXT_PUBLIC_GA_ID!} />
      </body>
    </html>
  );
}

環境変数の設定: .env.local に NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX を追加します。本番環境では Vercel や Cloudflare Workers の環境変数として設定してください。

Step 3：カスタムイベントのユーティリティ関数を自動生成

GA4 のカスタムイベントを送信するユーティリティ関数を Antigravity に作成してもらいます：

以下の GA4 カスタムイベント用ユーティリティを TypeScript で実装してください：
- trackEvent(eventName, params): 汎用イベント送信
- trackButtonClick(buttonName, location): ボタンクリック追跡
- trackFormSubmit(formName, success): フォーム送信追跡
- trackPurchase(transactionId, value, currency): 購入イベント
- 型安全性を確保すること（GA4 標準パラメータの型定義）

生成されるユーティリティ関数：

// src/lib/analytics.ts
 
// GA4標準イベントパラメータの型定義
type GA4EventParams = {
  [key: string]: string | number | boolean | undefined;
};
 
// gtag関数が存在するか確認してからイベント送信
const gtag = (...args: unknown[]) => {
  if (typeof window !== "undefined" && "gtag" in window) {
    (window as Window & { gtag: (...a: unknown[]) => void }).gtag(...args);
  }
};
 
/**
 * 汎用イベント送信
 */
export const trackEvent = (eventName: string, params?: GA4EventParams) => {
  gtag("event", eventName, params);
};
 
/**
 * ボタンクリック追跡
 * @param buttonName ボタンの名前（例: "sign_up_button"）
 * @param location ボタンの設置場所（例: "hero", "navbar"）
 */
export const trackButtonClick = (buttonName: string, location: string) => {
  trackEvent("button_click", {
    button_name: buttonName,
    button_location: location,
  });
};
 
/**
 * フォーム送信追跡
 * @param formName フォームの識別名
 * @param success 送信成功かどうか
 */
export const trackFormSubmit = (formName: string, success: boolean) => {
  trackEvent("form_submit", {
    form_name: formName,
    success: success,
  });
};
 
/**
 * 購入イベント（コンバージョン計測）
 * @param transactionId 注文ID
 * @param value 購入金額
 * @param currency 通貨コード（例: "JPY"）
 */
export const trackPurchase = (
  transactionId: string,
  value: number,
  currency: string = "JPY"
) => {
  trackEvent("purchase", {
    transaction_id: transactionId,
    value: value,
    currency: currency,
  });
};

Step 4：ページビュー追跡（App Router 対応）

Next.js の App Router では、クライアントサイドのナビゲーションを自動追跡するための処理が必要です。Antigravity にプロンプトします：

Next.js App Router でのクライアントサイドナビゲーション時に
GA4 の page_view イベントを送信する仕組みを実装してください。
usePathname と useSearchParams を使ったカスタムフックを作成してください。

// src/hooks/usePageView.ts
"use client";
 
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { trackEvent } from "@/lib/analytics";
 
export const usePageView = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
 
  useEffect(() => {
    // ページパスが変わったときにpage_viewイベントを送信
    const url = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
 
    trackEvent("page_view", {
      page_path: url,
      page_title: document.title,
    });
  }, [pathname, searchParams]);
};

このフックを layout.tsx 内の Client Component から呼び出します：

// src/components/PageViewTracker.tsx
"use client";
 
import { Suspense } from "react";
import { usePageView } from "@/hooks/usePageView";
 
const PageViewTrackerInner = () => {
  usePageView();
  return null;
};
 
// useSearchParams は Suspense でラップする必要がある
export const PageViewTracker = () => (
  <Suspense fallback={null}>
    <PageViewTrackerInner />
  </Suspense>
);

Step 5：Firebase Analytics でモバイルアプリに対応する

iOS・Android アプリでは、Firebase Analytics（GA4 のモバイル版）を使います。Antigravity に Firebase Analytics の実装も依頼できます：

React Native アプリに Firebase Analytics を統合してください。
- @react-native-firebase/analytics を使用
- カスタムイベント送信の共通関数を作成
- iOS と Android 両対応

Firebase Analytics と GA4 は同じ管理画面で確認できるため、Web とモバイルのデータを一元管理できます。詳細な Firebase 連携については、Antigravity × Firebase 自動プロビジョニングガイドも参考にしてください。

Step 6：コンバージョン計測の自動化テスト

実装後は、GA4 のデータが正しく送信されているかを確認する必要があります。Antigravity でテストコードも自動生成できます：

GA4 analytics.ts のユーティリティ関数のユニットテストを Vitest で書いてください。
window.gtag のモックも含めてください。

// src/lib/__tests__/analytics.test.ts
import { describe, it, expect, vi, beforeEach } from "vitest";
import { trackEvent, trackButtonClick, trackPurchase } from "../analytics";
 
describe("GA4 Analytics Utils", () => {
  let gtagMock: ReturnType<typeof vi.fn>;
 
  beforeEach(() => {
    // window.gtag をモック
    gtagMock = vi.fn();
    Object.defineProperty(window, "gtag", {
      value: gtagMock,
      writable: true,
    });
  });
 
  it("trackEvent が正しいパラメータで gtag を呼ぶ", () => {
    trackEvent("button_click", { button_name: "signup" });
 
    expect(gtagMock).toHaveBeenCalledWith("event", "button_click", {
      button_name: "signup",
    });
  });
 
  it("trackButtonClick がイベントを送信する", () => {
    trackButtonClick("signup_button", "hero");
 
    expect(gtagMock).toHaveBeenCalledWith("event", "button_click", {
      button_name: "signup_button",
      button_location: "hero",
    });
  });
 
  it("trackPurchase が購入イベントを送信する", () => {
    trackPurchase("order_123", 1480, "JPY");
 
    expect(gtagMock).toHaveBeenCalledWith("event", "purchase", {
      transaction_id: "order_123",
      value: 1480,
      currency: "JPY",
    });
  });
 
  it("gtag が存在しない場合はエラーを投げない", () => {
    // @ts-expect-error window.gtagを削除
    delete window.gtag;
 
    // エラーが発生しないことを確認
    expect(() => trackEvent("test_event")).not.toThrow();
  });
});

テストを実行：

# Antigravityのターミナルから
npx vitest run src/lib/__tests__/analytics.test.ts

期待される出力：

✓ src/lib/__tests__/analytics.test.ts (4)
  ✓ trackEvent が正しいパラメータで gtag を呼ぶ
  ✓ trackButtonClick がイベントを送信する
  ✓ trackPurchase が購入イベントを送信する
  ✓ gtag が存在しない場合はエラーを投げない

Test Files  1 passed (1)
Tests       4 passed (4)

Step 7：GA4 BigQuery 連携でデータ分析を深化させる

GA4 の強力な機能のひとつが、BigQuery との無料連携です。Antigravity にデータ分析クエリの作成も依頼できます：

GA4 BigQuery エクスポートデータから以下を分析する SQL を書いてください：
- 過去30日のページ別コンバージョン率
- デバイス別の平均セッション時間
- ファネル分析（top_page → form_view → form_submit）

Antigravity が生成するサンプルクエリ：

-- ページ別コンバージョン率（過去30日）
SELECT
  page_path,
  COUNT(DISTINCT user_pseudo_id) AS total_users,
  COUNTIF(event_name = 'form_submit') AS conversions,
  ROUND(
    COUNTIF(event_name = 'form_submit') * 100.0 / COUNT(DISTINCT user_pseudo_id),
    2
  ) AS conversion_rate_pct
FROM
  `your-project.analytics_XXXXXXX.events_*`
WHERE
  _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY))
  AND FORMAT_DATE('%Y%m%d', CURRENT_DATE())
GROUP BY page_path
ORDER BY total_users DESC
LIMIT 20;

まとめ

Antigravity を使った GA4 統合のポイントをまとめます。

実装の流れ: プロジェクトコンテキストを AGENTS.md に記述 → GoogleAnalytics コンポーネントの生成 → カスタムイベントユーティリティの作成 → ページビュー追跡フックの実装 → テストコードの自動生成。

Antigravity の強み: 型安全な TypeScript コードの生成、テストコードの自動化、BigQuery 分析クエリの作成など、GA4 実装全体を効率化できます。GA4 のドキュメントを参照しながら実装する手間を大幅に削減できるのが大きなメリットです。

GA4 の実装が完了したら、取得したデータをもとにプロダクトを改善し続ける点が肝心です。データに基づく意思決定（Data-Driven Decision Making）は、個人開発においても大きな武器になります。

分析基盤の構築と並行して、より精度の高い A/B テストやファネル分析に興味がある方には、Antigravity × Sentry エラー監視との組み合わせガイドもあわせてご覧ください。

GA4 の概念からビジネス活用まで体系的に学べる一冊です。