🏷️

@next/third-parties でNext.jsにGoogleタグマネージャを設置する

2023/12/25に公開

Next.js

React

Google Tag Manager

tech

先日、Next.jsでGoogleタグマネージャ（以下 GTM）を設置する方法について、以下の記事を公開しました。

しかし、公式のライブラリを使用すると非常に簡単にGTMを設置できたので紹介します。

@next/third-parties をインストール

@next/third-parties は、Next.js アプリケーションで一般的なサードパーティライブラリを簡単にロードし、パフォーマンスと開発体験を向上させるためのライブラリです。
GTMの設置もこれを使用することで、非常に簡単に設置することができます。

以下のコマンドを使用し、ライブラリをインストールします。

npm install @next/third-parties

LayoutにGoogleTagManagerコンポーネントを設置

app/layout.tsxにGoogleTagManagerコンポーネントを設置して、GTMのIDを指定します。

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

たったこれだけで、全てのページでGTMを有効にすることができました。
GTMで設定したGA4もちゃんと動いていることが確認できます。

@next/third-parties をインストール

LayoutにGoogleTagManagerコンポーネントを設置

Discussion