Next.jsでのGA4(Google Analytics 4)設定

はじめに

この記事では、Next.js 14でGoogle Tag Manager (GTM) 経由でGoogle Analytics 4 (GA4) を導入する手順を紹介します。

実施内容

Next.jsアプリケーションにGTMとGA4を統合し、ユーザーのページビューやイベントを追跡します。GA4の新機能を活用し、より詳細なユーザー分析を行いたいと考えています。
ありがたいことに、Next.js14からは楽ちんに設定できるように用意されてます。

準備

• Google Analytics 4プロパティの作成
• Google Tag Managerアカウントのセットアップ
• Next.js 14プロジェクト

実装手順

1. Google Analyticsの設定:

   • Google Analyticsにログインし、新しいGA4プロパティを作成します。
   • 設定で「測定ID」を取得します。

2. Google Tag Managerの設定:

   • GTMにログインし、新しいコンテナを作成します。
   • GA4のタグを新しいトリガー「All Pages」で設定します。

3. Next.jsでのGTM統合:

   • 必要なライブラリをインストールし、GTMコンポーネントを作成します。
     • 手順はこちら公式を参照

   npm install @next/third-parties@latest next@latest
   

   • ページコンポーネントまたは_app.jsにGTMコンポーネントを追加します。

   import { GoogleTagManager } from '@next/third-parties/google'
   
   export default function MyApp({ Component, pageProps }) {
     return (
       <>
         <Component {...pageProps} />
         <GoogleTagManager gtmId="GTM-XYZ" />
       </>
     )
   }
   

4. デプロイとテスト:

   • 変更をデプロイし、GTMプレビューモードでタグが正しく発火することを確認。

結果

設定後、リアルタイムレポートにてユーザーのページビューが正確に表示されることが確認できました。
※一応キャッシュで判定されないことあるかもなので、プライバシーモードでサイトアクセスしてリアルタイムレポートで確認したほうがいいかもです！

参考

• Next.js Documentation
• Google Analytics Help Center
• Google Tag Manager Help Center