My Tech Blog

【Next.js × Cloudflare】アクセス解析の選び方とCloudflare Web Analyticsをサブドメイン単体で導入する手順

公開日: 2026年08月14日

Commit: bb0aeff

Next.js で構築した技術ブログに「アクセス解析」を導入したいと考えた際、以下のような疑問や課題に直面しました。

❓ 「Cloudflare の管理画面で見るのがいいの？ それとも Google Analytics (GA4) を入れるべき？」
❓ 「Cloudflare Web Analytics を使いたいけど、親ドメイン（example.com）全体ではなく、ブログ用サブドメイン（blog.example.com）だけで独立して計測・ダッシュボード管理するにはどうすればいい？」

今回は、各種アクセス解析ツールの特徴比較と選び方、そして Cloudflare Web Analytics を Next.js (App Router / SSG) にサブドメイン単位で導入した手順 を備忘録としてまとめます。

1. アクセス解析ツールの比較と選び方

Web サイトのアクセス解析にはいくつかの選択肢があり、「何を知りたいか（目的）」 によって最適なツールが異なります。

ツール 主なメリット デメリット・注意点 向いている用途
Cloudflare Analytics(CDN/DNS標準) ・設定不要（自動集計）・ボット遮断やキャッシュ率、転送量がわかる・DNSを通る全リクエストを集計 ・ボットやクローラーも含まれるため「人間のPV」より多く出る・流入元やユーザー行動は追えない インフラ・セキュリティ監視
Cloudflare Web Analytics(無料JSビーコン) ・超軽量＆Cookie不要（プライバシー配慮）・表示速度（Core Web Vitals）も計測可能・完全無料で手軽 ・GA4ほど細かいコンバージョンやユーザー属性分析はできない シンプルなPV・流入国・表示速度の把握
Google Analytics (GA4) ・業界標準。検索キーワード・流入元分析が強力・Search Consoleと連携可能・イベント追跡・CV分析が充実 ・管理画面が複雑で慣れが必要・アドブロッカーで10〜30%欠損する・Cookie利用のため同意バナーが必要な地域あり 本格的なSEO・収益化・マーケティング
Microsoft Clarity ・完全無料でヒートマップ＆画面録画が可能・どこまで読まれたか（スクロール深度・離脱箇所）が一目瞭然 ・SEO流入分析というよりUI/UX改善向け 記事の読まれ方・離脱分析
Umami ・オープンソースで Docker Compose でセルフホスト可能・UIが非常にシンプルで直感的・Cookie不要でプライバシー完全保護 ・自前サーバーでの管理が必要 自前ホスト派・プライバシー重視

💡 結論：どれを選ぶべき？

  • ブログのPVや人気記事、表示速度をシンプル・軽量に知りたい場合
    👉 Cloudflare Web Analytics（今回採用）
  • 本格的なSEO流入分析や検索キーワード順位と連携したい場合
    👉 GA4 ＋ Google Search Console
  • 読者が記事のどこで離脱しているかを視覚的に見たい場合
    👉 Microsoft Clarity（併用がおすすめ）

2. 課題：親ドメインとサブドメインの混在問題

Cloudflare でドメイン（example.com）をプロキシしている場合、Web Analytics を有効化すると自動的にドメイン全体のアクセスが集計されます。

しかし、「ポートフォリオやメインサイト（example.com）と、技術ブログ（blog.example.com）のアクセス数を分けて、ブログ単体のダッシュボードを作りたい」 というケースがあります。

解決する2つのアプローチ

  1. 既存ダッシュボードでフィルターをかける
    • example.com のダッシュボード上で 「＋ Add filter」→「Host = blog.example.com」 を指定して絞り込む（手軽だが毎回フィルター操作が必要）。
  2. サブドメイン専用のサイト（Site）を追加して独立管理する（推奨）
    • Cloudflare Web Analytics で blog.example.com 専用のサイトを追加し、発行された個別トークンを Next.js に埋め込む。
    • これにより、管理画面の一覧で ブログ単体の独立したアクセス解析ダッシュボード を閲覧できるようになります。

3. 実装手順：Next.js への導入

今回は 「アプローチ2（サブドメイン専用の個別トークンで独立管理）」 の実装手順を紹介します。

ステップ 1: Cloudflare でサブドメイン専用サイトを追加

  1. Cloudflare ダッシュボード にログインします。
  2. 左メニューの 「Analytics & Logs（分析とログ）」 → 「Web Analytics」 を開きます。
  3. 右上の 「Add site（サイトを追加）」 ボタンをクリックします。
  4. ホスト名にブログのサブドメイン（例: blog.example.com）を入力して作成します。
  5. 作成後に表示される JS スニペットから token（英数字文字列） をコピーします。 
    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "YOUR_CF_ANALYTICS_TOKEN"}'></script>

ステップ 2: 環境変数の設定

Next.js のフロントエンド環境（.env.local）に、取得したトークンを設定します。

# .env.local
NEXT_PUBLIC_SITE_URL=https://blog.example.com
NEXT_PUBLIC_CF_WEB_ANALYTICS_TOKEN=your_cloudflare_analytics_token_here

ステップ 3: layout.tsx にスクリプトを組み込む

Next.js (App Router) では、next/script コンポーネントを使用して src/app/layout.tsx の <body> 末尾にビーコンスクリプトを追加します。

環境変数が存在する場合のみ読み込まれるようにしておくことで、ローカル開発環境やトークン未設定時にも安全に動作します。

// src/app/layout.tsx
import type { Metadata } from 'next';
import Script from 'next/script';
import './globals.css';

const cfAnalyticsToken = process.env.NEXT_PUBLIC_CF_WEB_ANALYTICS_TOKEN;

export default function RootLayout({
  children,
  sidebar,
}: Readonly<{
  children: React.ReactNode;
  sidebar: React.ReactNode;
}>) {
  return (
    <html lang='ja'>
      <body className='bg-slate-50 text-slate-800 font-sans'>
        {/* ヘッダーやメインコンテンツ */}
        <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10'>
          <div className='flex flex-col lg:flex-row gap-8'>
            <main className='lg:w-2/3'>{children}</main>
            <aside className='lg:w-1/3 space-y-8'>{sidebar}</aside>
          </div>
        </div>

        {/* Cloudflare Web Analytics ビーコン */}
        {cfAnalyticsToken && (
          <Script
            defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon={JSON.stringify({ token: cfAnalyticsToken })}
            strategy='afterInteractive'
          />
        )}
      </body>
    </html>
  );
}

ポイント (strategy="afterInteractive"):
Next.js の strategy="afterInteractive" を指定することで、ページのハイドレーション（主要なコンテンツ読み込み）完了後にスクリプトが非同期で実行されます。ページの表示速度スコア（LCP/FCP）を一切邪魔しません。

4. 動作確認

① ビルド時の確認（SSG / 静的エクスポートの場合）

静的エクスポート（output: 'export'）を行っている場合、ビルドを実行して出力された HTML にビーコン情報が正しく含まれているか確認します。

pnpm run build

出力ディレクトリ（out/index.html など）に beacon.min.js と設定した token が出力されていれば成功です。

② ブラウザでの通信確認

デプロイ後、公開サイト（https://blog.example.com）にアクセスし、ブラウザの開発者ツールを開きます。

  1. F12 キーを押して開発者ツールを開き、「Network（ネットワーク）」 タブを開く。
  2. フィルターに cloudflare または rum と入力してページを更新。
  3. 以下の2つのリクエストが確認できれば、計測が正常に動作しています。
    • beacon.min.js（スクリプト本体の読み込み）
    • https://cloudflareinsights.com/cdn-cgi/rum（アクセスデータの送信 / ステータス 200 または 204）

5. まとめ

  • Cloudflare Web Analytics は Cookie を使用せず、スクリプトも軽量で Core Web Vitals（表示速度）も一緒に計測できるため、個人ブログのファーストチョイスとして非常に優秀です。
  • 親ドメインとサブドメインでアクセス解析を分けたい場合は、Web Analytics でサブドメイン専用のサイト（Site）を追加してトークンを発行 することで、完全に独立したダッシュボードで運用できます。
  • Next.js (App Router) では next/script を使って環境変数からトークンを渡すだけで、パフォーマンスを損なわずに綺麗に導入できます。
#Tech