Zenn
📈

[Next.js] Google Anaryticsを導入する方法

2024/10/14に公開
Google Analytics
Next.js
Node.js
TypeScript
Google
tech

はじめに

この記事では、Next.js（app router）プロジェクトにGoogle Analyticsを導入する方法を解説します。
特に、環境変数を使用してトラッキングIDを安全に管理し、@next/third-parties パッケージを活用して簡単にGoogle Analyticsを設定する方法を紹介します。

目次

  1. はじめに
  2. 動作環境
  3. 前提条件
  4. 導入手順
  5. 終わりに

動作環境

技術 バージョン
node.js 10.2.4
Next.js 14.2.5

前提条件

  • 基本的なNext.jsのプロジェクトがセットアップ済みであること
    • 今回、既にに運用しているNext.jsのプロジェクトを前提に話を進めるため、プロジェクトの作成等に関しては省略します。
  • Google Analyticsアカウントが既に作成され、トラッキングIDを取得済みであること。
    • トラッキングID取得までは各自で準備をお願い致します。

導入手順

1.Google Anaryticsのセットアップをする

https://analytics.google.com/analytics/
目的：Google Analyticsのアカウントを作成し、トラッキングID（G-XXXXXXXXXX 形式）を取得します。
このIDが、ウェブサイトのトラッキングを行います。

手順

Google Analyticsにアクセスし、アカウントを作成します。
「プロパティを作成」ボタンをクリックして、ウェブサイト用のプロパティを作成します。
トラッキングID（G-XXXXXXXXXX）を取得し、次のステップで使用します。

2. .envに環境変数の設定

目的：トラッキングIDを安全に管理するために環境変数を使用する。

.env
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX

.env ファイルにトラッキングIDを記載することで、IDがコードベースに直接書き込まれることを防ぎ、セキュリティを強化します。
NEXT_PUBLIC_ プレフィックスを使用することで、クライアントサイドでもこの変数にアクセス可能になります。

3.必要なパッケージのインストール（Next.js：v14~）

目的 ：@next/third-parties パッケージを使用してGoogle Analyticsを簡単に導入する。

npm i @next/third-parties@canary

4.layout.tsx の設定

目的: Google Analyticsをサイト全体で有効にするため、layout.tsx ファイルに設定を追加する。

layout.ts
import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <head>
        {/* 他のメタタグやリンクは省略 */}
      </head>
      <body>
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_TRACKING_ID!} />
        {children}
      </body>
    </html>
  );
}

5. 動作確認

ブラウザでサイトにアクセスし、Google Analyticsのリアルタイムレポートを確認します。
正しく設定されていれば、訪問者データがリアルタイムで表示されるはずです。

終わりに

headタグに直書きでもいいのですが、色々とWebサイトや記事を漁っていると、パフォーマンス向上のために今回の方法を推奨していることが多いことに気づきました。
しかも意外と導入までのコストは小さいため大した労力でもなかったことに驚きです。

Discussion