はじめに
Next.jsの公式パッケージ @next/third-parties を使って、簡単にGoogle Analyticsを導入したので、その方法を記録しておきます。
今回は、pnpm を使っていますが、npmやyarnでもinstall方法が少し異なるだけで、流れは大体同じかと思います。
以下のようなものを最近作っているので、見ていって、できればフィードバックください。
1. Google Analytics プロパティの作成
まずは Google Analytics でプロパティを作成します。
- Google Analytics にアクセス
- 「管理」→「プロパティを作成」をクリック
- プロパティ名、タイムゾーン、通貨を設定
- ビジネスの説明を入力
- 目標を選択
- 「ウェブ」（あるいは皆さんお好きなものを）を選択し、サイトのURLとストリーム名を入力
- 作成完了後、Measurement ID（
G-XXXXXXXXXX形式）をメモしておく
2. パッケージのインストール
Next.js公式のサードパーティ統合パッケージをインストール。
# pnpm の場合
pnpm add @next/third-parties@latest
# npm の場合
npm install @next/third-parties@latest
# yarn の場合
yarn add @next/third-parties@latest
3. 環境変数の設定
.env.local（ファイル名は人による） に Measurement ID を追加します。
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
NOTE
NEXT_PUBLIC_ プレフィックスをつけることで、クライアントサイドでも参照可能になります。
4. layout.tsx への実装
app/layout.tsx に GoogleAnalytics コンポーネントを追加します。
私の場合は以下みたいな感じに。
import { GoogleAnalytics } from '@next/third-parties/google';
import { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ja" suppressHydrationWarning>
<body suppressHydrationWarning>
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
)}
<Header />
<div className="flex-1">
{children}
</div>
<Footer />
</body>
</html>
);
}
環境変数が設定されている場合のみコンポーネントが読み込まれるようにしています。これにより、開発環境では Analytics を無効にするといった運用も可能です。
5. Vercel への環境変数の追加
最後に、Vercel のダッシュボードで環境変数を設定します。
注意
これ忘れがちです！
- Vercel のプロジェクトページを開く
- 「Settings」→「Environment Variables」に移動
- 以下を追加:
-
Key:
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID -
Value:
G-XXXXXXXXXX（取得した Measurement ID）
-
Key:
- 必要に応じて適用する環境（Production / Preview / Development）を選択
- 「Save」をクリック
- 再デプロイして反映
動作確認
デプロイ後、Google Analytics のリアルタイムレポートでアクセスが計測されていれば成功。数日待つかも？
まとめ
@next/third-parties を使うことで、面倒なスクリプトタグの埋め込みなしに、数行のコードで Google Analytics を導入できました。Next.js + Vercel の組み合わせなら、環境変数の管理も簡単ですね。
お疲れ様でした。
わからないところ、間違っているところ、もっといい方法がある場合は、コメントでもDMでも教えてください。