Next.jsへのGoogleAnalyticsの導入について
この記事は、自分のNext.js WebAppにGoogleAnaluticsを導入した経験から記述したものです。
なお、Next.js 14.1.4を対象に行なっています。
手順
GoogleAnalytics上での作業
- Google Analyticsにアクセス
Google Analyticsのウェブサイトにアクセス: Google Analytics にアクセスします。
URL:GoogleAnalytics
Googleアカウントにサインイン: 既にGoogleアカウントをお持ちの場合はサインインします。まだGoogleアカウントを持っていない場合は、新しいアカウントを作成します。 - アカウントの作成
「スタートガイド」をクリック: Google Analyticsのホームページに移動すると、「無料で始める」または「スタートガイド」といったボタンがあります。これをクリックします。
アカウント名の入力: アカウント名を入力します。アカウント名は後で変更可能です。
データ共有設定の選択: データ共有設定を選択します。これはGoogleとデータを共有するオプションです。必要に応じてチェックボックスをオンまたはオフにします。 - プロパティの設定
プロパティ名の入力: ウェブサイトやアプリケーションの名前を入力します。
レポートのタイムゾーンと通貨を選択: レポートのタイムゾーンと通貨を選択します。これにより、データが正確に表示されます。
詳細なビジネス情報の設定:業界カテゴリを選択します。ビジネスのサイズを選択します。どのようにGoogle Analyticsを使用するかの詳細を入力します。 - データストリームの設定
データストリームを作成: ウェブサイト、iOSアプリ、またはAndroidアプリのいずれかを選択します。
ウェブサイトの情報を入力: ウェブサイトのURLとストリーム名を入力します。
ストリームの詳細を設定: 推奨される設定や追加のトラッキングオプションを選択します。 - トラッキングコードの取得
Google Analyticsタグの設定: 作成したプロパティに対して、トラッキングID（G-XXXXXXX）が表示されます。
IDE上での作業
1. Next.jsプロジェクトのルートディレクトリに移動
2. @next/third-partiesパッケージをインストール
npm install @next/third-parties
3. layout.tsxを開く
4. layout.tsxにインポート文を記述
import { GoogleAnalytics } from '@next/third-parties/google'
5. layout.tsxに<GoogleAnalytics gaId="G-XXXXXXXXXX" />を挿入
以下のように、</body>の後に<GoogleAnalytics gaId="G-XXXXXXXXXX" />を挿入します。
なお、xxxxxxxxxxには、トラッキングID（G-XXXXXXX）を代入します。
import type { Metadata } from "next";
import "./globals.css";
import { GoogleAnalytics } from '@next/third-parties/google'
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: ,
description: ,
keywords:
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<head>
</head>
<body className={inter.className}>
<div className="flex min-h-screen border border-solid border-gray-200">
<main className="flex-1 bg-white text-gray-800">{children}</main>
</div>
</body>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
</html>
);
}
以上です。４８時間以内に反映されるはずです。