Dash board
公開日: 2026/01/30
Google Analyticsは、ウェブサイトの訪問者数、ページビュー、ユーザーの行動などを分析するための強力なツールです。Next.js App RouterでGoogle Analyticsを適切に設定することで、パフォーマンスを損なうことなく、詳細な分析データを取得できます。
この記事では、Next.js 14+のApp Routerを使用したプロジェクトにGoogle Analyticsを設定する方法を、ステップバイステップで解説します。
まず、Google Analyticsアカウントを作成する必要があります。
Google Analyticsの設定が完了すると、測定ID（Measurement ID）が発行されます。形式は G-XXXXXXXXXX です。
G-4RY2NGDNBF）Next.jsでは、外部スクリプトを読み込む際にnext/scriptのScriptコンポーネントを使用します。これにより、パフォーマンスを最適化しながらスクリプトを読み込めます。
app/layout.tsxファイルの先頭に、以下のインポートを追加します：
import Script from "next/script";
Google Analyticsのスクリプトは、すべてのページで読み込まれる必要があるため、ルートレイアウト（app/layout.tsx）に追加します。
<body>タグ内に、以下のコードを追加します：
<body className={`${inter.variable} ${notoSansJP.variable} antialiased`}>
{/* Google Analytics */}
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-4RY2NGDNBF"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4RY2NGDNBF');
`}
</Script>
{children}
</body>
上記のコード内の G-4RY2NGDNBF を、あなたのGoogle Analytics測定IDに置き換えてください。
Next.jsのScriptコンポーネントは、外部スクリプトを最適化して読み込むためのコンポーネントです。通常の<script>タグと異なり、以下の利点があります：
strategy="afterInteractive"は、スクリプトの読み込み戦略を指定するプロパティです。この設定により：
他の戦略オプション：
beforeInteractive: ページがインタラクティブになる前に読み込む（慎重に使用）lazyOnload: ブラウザのアイドル時間に読み込む（低優先度のスクリプト向け）最初のScriptコンポーネントは、Google Analyticsのメインライブラリ（gtag.js）を読み込みます：
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-4RY2NGDNBF"
strategy="afterInteractive"
/>
2つ目のScriptコンポーネントは、Google Analyticsの初期化と設定を行います：
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4RY2NGDNBF');
`}
</Script>
各コードの説明：
window.dataLayer: Google Analyticsがデータを格納する配列gtag関数: Google Analyticsのコマンドを実行する関数gtag('js', new Date()): Google Analyticsライブラリのバージョンを設定gtag('config', 'G-4RY2NGDNBF'): 測定IDでGoogle Analyticsを初期化重要: 2つ目のScriptコンポーネントにはid="google-analytics"を設定してください。これにより、Next.jsがスクリプトを適切に管理できます。
以下は、app/layout.tsxの完全な実装例です：
import type { Metadata } from "next";
import { Inter, Noto_Sans_JP } from "next/font/google";
import Script from "next/script";
import "./globals.css";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
display: "swap",
});
const notoSansJP = Noto_Sans_JP({
subsets: ["latin"],
variable: "--font-noto-sans-jp",
display: "swap",
});
export const metadata: Metadata = {
title: "Your App Title",
description: "Your app description",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja" className={`${inter.variable} ${notoSansJP.variable}`}>
<head>
{/* その他のhead要素 */}
</head>
<body className={`${inter.variable} ${notoSansJP.variable} antialiased`}>
{/* Google Analytics */}
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-4RY2NGDNBF"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4RY2NGDNBF');
`}
</Script>
{children}
</body>
</html>
);
}
gtag/jsというリクエストが表示されることを確認注意: データが表示されるまでに数分かかる場合があります。
strategy="afterInteractive"を使用: ページの初期読み込みに影響を与えない環境変数を使用する場合：
const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || 'G-4RY2NGDNBF';
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
strategy="afterInteractive"
/>
.env.localファイルに追加：
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-4RY2NGDNBF
GDPRやCCPAなどのプライバシー規制に対応するため、Cookie同意バナーを実装することを推奨します。ユーザーが同意するまで、Google Analyticsのスクリプトを読み込まないようにする必要があります。
localhostでもデータは収集されますが、フィルタが設定されている場合は除外される可能性がありますgtag/jsのリクエストが失敗していないか確認strategy="afterInteractive"を使用していることを確認Next.js App RouterでGoogle Analyticsを設定する方法を解説しました。主なポイントは以下の通りです：
next/scriptのScriptコンポーネントを使用strategy="afterInteractive"でパフォーマンスを最適化app/layout.tsx）に追加この設定により、パフォーマンスを損なうことなく、詳細な分析データを取得できます。
前の記事
ありません