【Next.js 14】にGoogle Analytics(GA4)タグを設置する方法
公開日:
更新日:
開発環境
開発環境はこちらになります。↓
・言語: Typescript
・ライブラリ: React
・フレームワーク: Next.js （バージョン：15.0.3）App Router形式
・CSSフレームワーク: Tailwind
やり方 ： @next/third-partiesを利用する
まず@next/third-partiesをインストールします。
ターミナルで下記を入力
1npm install @next/third-parties@latest次にlayout.tsxに上記でインストールしたコンポーネントを配置します。
layout.tsx
1import { GoogleAnalytics } from "@next/third-parties/google";
2
3export default function RootLayout({
4 children,
5}: Readonly<{
6 children: React.ReactNode;
7}>) {
8 const gaId = process.env.NEXT_PUBLIC_GA_ID;
9 return (
10 <html lang="js">
11 <body>
12 {gaId && <GoogleAnalytics gaId={gaId} />}
13 </body>
14 </html>
15 );
16}
17次に.envファイルに環境変数としてGoogle AnalyticsのトラッキングIDを格納します。
.env
1NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"最後に使用しているプラットフォーム（VercelやAWS Amplify）に上記と同じ環境変数を登録すればOKです。
私はGoogle Analytics(GA4)設置について色んな記事を調べました。
中でもバージョンの違いなどでGoogleAnalyticsコンポーネントをhead内に含めるのかbody内に含めるのかが異なるらしく迷いました。
結論としては上記で紹介しているようにbodyの閉じタグの直前に含めれば機能してくれました。
参考にさせて頂いた記事
Next.js 14（App Router）にGoogle Analytics 4を導入する方法
【Next.js】Next.js14でGoogleAnalytics（GA4）を導入する方法
【Next.js】App Router採用プロジェクトでのGoogle Analytics導入
本記事は以上になります。
ご一読頂きありがとうございました。