📊
【Next.js】Googleアナリティクスを設定する。
今回は、Next.jsのアプリケーションでGoogleアナリティクス（GA）のタグを設置する方法メモです。
今回紹介する方法では、Googleタグマネージャ（GTM）をタグを設置して、GTM上でアナリティクスのタグを設定しています。
事前に用意するもの
- Googleタグマネージャの「コンテナID」（GTM-XXXXXXXX）
- Googleアナリティクスの「測定ID」（G-XXXXXXXX）
【Next.js側】の設定
1）ライブラリをインストール
$ npm install @next/third-parties@latest
2）.envを変更する
# .env
GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXXX # GoogleタグマネージャのコンテナID
3）layout.tsxを変更する
GoogleTagManagerコンポーネントを追加します。
// layout.tsx
import { GoogleTagManager } from "@next/third-parties/google";
...
export default function RootLayout({children,}: {children: React.ReactNode;}) {
return (
<html lang="ja">
<body>
<Header />
<main>{children}</main>
<Footer />
</body>
{/* --------------------------------------------- */}
{/* Googleタグマネージャ */}
{/* --------------------------------------------- */}
<GoogleTagManager gtmId={process.env.GOOGLE_TAG_MANAGER_ID??""} />
</html>
);
}
【Googleタグマネージャ側】の設定
1）トリガーを作成する
トリガーの作成画面
画像では、URLにgazai.netを含む場合に限定して、ページビュー時に発火するような設定にしています。
トリガーの設定ができました。
2）タグを作成する
タグの作成画面
ここでGoogleアナリティクスの「測定ID」を設定しています。
そして、先ほど設定したトリガーをきっかけにこのタグが呼び出されるように設定しています。
タグの設定ができました。
3）編集内容を公開する
変更した設定を公開するとタグマネージャでの設定は終了です。
設定完了
これでNext.jsサイト上でのユーザー数などのデータがGoogleアナリティクスに反映されます。
参考ページ
Discussion