Next.jsのApp Routerを使用している場合、クライアントサイドナビゲーション時にGoogle Analyticsのページビューが自動的にトラッキングされません。
この記事では、Next.js公式のベストプラクティスに従った実装方法を紹介します。
問題の背景
- トップページから公園詳細ページへの遷移時にページビューがトラッキングされない
- 手動でページビュートラッキングを実装する必要がある
Next.jsのApp Routerでは、Linkコンポーネントを使用したクライアントサイドナビゲーション時に、ページのリロードが発生しません。
そのため、Google Analyticsの初期設定だけでは、トップページから詳細ページへの遷移時にページビューがトラッキングされないという問題があります。
最初の実装（手動トラッキング）
最初は、usePathnameフックを使用して手動でページビュートラッキングを実装しました。
// components/GoogleAnalytics.tsx
"use client";
import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
export function GoogleAnalytics() {
const pathname = usePathname();
const prevPathnameRef = useRef<string | null>(null);
useEffect(() => {
if (!process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID) {
return;
}
const checkGtag = (retries = 0) => {
const hasDataLayer = typeof window.dataLayer !== "undefined";
const hasGtag = typeof window.gtag === "function";
if (!hasDataLayer || !hasGtag) {
if (retries < 10) {
setTimeout(() => checkGtag(retries + 1), 100);
}
return;
}
if (prevPathnameRef.current !== pathname) {
const pagePath = window.location.pathname + window.location.search;
window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, {
page_path: pagePath,
page_title: document.title,
});
prevPathnameRef.current = pathname;
}
};
const timeoutId = setTimeout(() => checkGtag(), 100);
return () => clearTimeout(timeoutId);
}, [pathname]);
return null;
}この実装でも動作はしますが、以下の問題がありました：
gtagの読み込みを待つ処理が複雑usePathname()とwindow.locationの併用で混乱の可能性- メンテナンスコストが高い
ベストプラクティス：@next/third-partiesを使用
Next.js公式では、@next/third-partiesパッケージを使用することを推奨しています。
このパッケージは、Google Analyticsを含む主要なサードパーティサービスとの統合を最適化し、自動的にページビュートラッキングを処理してくれます。
インストール
npm install @next/third-parties実装
app/layout.tsxにGoogleAnalyticsコンポーネントを追加するだけです。
// app/layout.tsx
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>
{children}
{/* Google Analytics - 自動的にページビュートラッキング */}
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
)}
</body>
</html>
);
}これだけで、以下の機能が自動的に有効になります：
- クライアントサイドナビゲーション時の自動ページビュートラッキング
- パフォーマンス最適化されたスクリプト読み込み
- 型安全性の確保
実装の比較
手動実装 vs @next/third-parties
| 項目 | 手動実装 | @next/third-parties |
|---|---|---|
| コード量 | 約70行 | 約3行 |
| メンテナンス | 複雑 | シンプル |
| パフォーマンス | 手動最適化が必要 | 自動最適化 |
| 公式サポート | なし | あり |
| ページビュートラッキング | 手動実装が必要 | 自動 |
環境変数の設定
.env.localファイルにGoogle Analytics IDを設定します。
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX動作確認
- 開発環境での確認
- ブラウザの開発者ツールのNetworkタブで、Google Analyticsへのリクエストを確認
- コンソールエラーがないことを確認
- 本番環境での確認
- Google Analyticsのリアルタイムレポートでページビューを確認
- トップページから詳細ページへの遷移が正しくトラッキングされているか確認
まとめ
Next.js App RouterでGoogle Analyticsを実装する際は、公式の@next/third-partiesパッケージを使用することを強く推奨します。
メリット
- シンプルな実装: 数行のコードで完了
- 自動ページビュートラッキング: クライアントサイドナビゲーション時に自動でトラッキング
- パフォーマンス最適化: Next.jsが自動的に最適化
- 公式サポート: Next.js公式がメンテナンス
- 型安全性: TypeScriptの型定義が含まれている
学んだこと
最初は手動で実装しましたが、公式のベストプラクティスを確認することで、より良い実装方法を見つけることができました。
開発時は、まず公式ドキュメントやベストプラクティスを確認することが重要です。
コメント