Next.js14 App Router利用時のGoogle Analytics導入

投稿日：2024/5/6

更新日：2024/5/28

Summary

Next.js14系で作成している自作ブログにGoogle Analyticsを導入したのでその備忘録です。

Next.jsの公式が出しているライブラリがあるみたいなのでそちらを利用するとめちゃくちゃ簡単です。

実装

まずは必要なライブラリを入れていきます。

Terminal

yarn add @next/third-parties

次にGAアカウントを作成していきます。

手順はめんどくさいのでカットします。

以下の記事とかを参考にアカウント作成してGAのID取得までを行ってください！

【Next.js】Next.jsにGoogleアナリティクスを設定する

https://zenn.dev/rh820/articles/8af90011c573fe

ここまでできたら以下を追加するだけで完成です。

GA_IDはlocal.envに登録しておいてそれを取得する形でいいかと思います。

layout.tsx

import { Inter } from "next/font/google";
import "./globals.scss";
import { GoogleAnalytics } from "@next/third-parties/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const GA_ID = process.env.NEXT_PUBLIC_GA_ID || "";

  return (
    <html lang="ja">
      <head>
        {/* 追加 */}
        <GoogleAnalytics gaId={GA_ID} />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

あっという間ですね！

GAタグの記事調べるとちょっと複雑なことしてる記事が多かったり（ライブラリ実装前に書かれた記事なのか、、

？）、ハードレーションエラーが出たりで苦労していたので助かりました！
一応YouTube入れたりMAP入れたりもできるみたいなのでそのうち試してみたいですね！

参考

Guides: Third Party Libraries | Next.js

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics

【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ

https://zenn.dev/chot/articles/introduction-of-next-third-parties

【Next.js】App Router採用プロジェクトでのGoogle Analytics導入 - Qiita

https://qiita.com/takakou/items/be939544716dc24598dc

Index

Summary
実装
参考