Next.jsでGoogle Tag Managerを設定する

Next.js

2024/10/05このページはPRを含みます

事前準備

GTMなど外部のドメインから読み込むスクリプトのことをサードパーティスクリプトという。Next.jsでは主要なサードパーティスクリプトに対応したパッケージが配布されているので今回はそれを利用する

npm i @next/third-parties

実装方法

meta情報を読み込んでいるapp/layout.tsxに追加をする。このブログの場合は以下のようにしている。追加できたらあとはgithubにプッシュすれば完了。

import "./globals.css";
import { GoogleTagManager } from "@next/third-parties/google"; // 追加

import type { Metadata } from "next";
import Header from "./_components/Header";
import Footer from "./_components/Footer";

export const metadata: Metadata = {
  metadataBase: new URL("https://monaka496.com"),
  title: {
    template: "%s | monaka",
    default: "monaka",
  },
  description: "日々の学びをアウトプットするブログです。",
  openGraph: {
    title: "monaka",
    description: "日々の学びをアウトプットするブログです。",
    images: ["/ogp.png"],
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
      <GoogleTagManager gtmId="GTM-XXXXXXXX" />　// 追加
    </html>
  );
}