chakkun1121's blog

Next.jsでGoogleアナリティクスを設定する方法

投稿日:2023/10/16

next.jsnextjsgoogle-analytics

環境

  • next.js 13.5 (app router使用)

設定方法

1.Googleアナリティクスの測定IDを入手する

ストリートを開き、

  1. 管理(設定アイコンのやつ)
  2. データストリーム
  3. 使用するストリームの左にある >
  4. ストリートの詳細にある測定ID(G- から始まるやつ)をコピーする

2. 環境変数に計測IDを入れる

.envに入れてもいいですが、デバック時に邪魔なので .env.production に入れることを推奨します。

1NEXT_PUBLIC_GA_ID= "G-XXXXXXXXXX" //上で取得した測定IDを入れてください。

3. gtag.tsの作成

gtag.tsを作成します。これはsrcディレクトリを使用していなければroot、使用していればsrcディレクトリ内に作成します。

1export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID || "";
2
3export const existsGaId = GA_MEASUREMENT_ID !== "";
4
5export const pageview = (path: string) => {
6  window.gtag("config", GA_MEASUREMENT_ID, {
7    page_path: path,
8  });
9};

これでは型についての警告が出るので型を定義します。

1# npmの場合
2npm add -D @types/gtag.js
3# yarnの場合
4yarn add -D @types/gtag.js
5# pnpmの場合
6pnpm add -D @types/gtag.js

4.Google Analytics Client Componentを作成する

Google Analyticsのコードはクライアントサイトで使用する必要があるため、"use client"を指定する必要があります。 components/GoogleAnalytics.tsx

1"use client";
2
3import { usePathname, useSearchParams } from "next/navigation";
4import Script from "next/script";
5import { useEffect } from "react";
6
7import { existsGaId, GA_MEASUREMENT_ID, pageview } from "../lib/gtag";
8
9const GoogleAnalytics = () => {
10  const pathname = usePathname();
11  const searchParams = useSearchParams();
12
13  useEffect(() => {
14    if (!existsGaId) {
15      return;
16    }
17    const url = pathname + searchParams.toString();
18    pageview(url);
19  }, [pathname, searchParams]);
20
21  return (
22    <>
23      <Script
24        strategy="lazyOnload"
25        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
26      />
27      <Script id="gtag-init" strategy="afterInteractive">
28        {`
29          window.dataLayer = window.dataLayer || [];
30          function gtag(){dataLayer.push(arguments);}
31          gtag('js', new Date());
32          gtag('config', '${GA_MEASUREMENT_ID}', {
33            page_path: window.location.pathname,
34          });
35        `}
36      </Script>
37    </>
38  );
39};
40
41export default GoogleAnalytics;

5. layout.tsxから呼び出す

1import GoogleAnalytics from "@/components/GoogleAnalytics";
2
3// 省略...
4
5export default function RootLayout({
6  children,
7}: {
8  children: React.ReactNode;
9}): JSX.Element {
10  return (
11    <html lang="jp">
12      <GoogleAnalytics />
13      <body>{children}</body>
14    </html>
15  );
16}

2023/11/10追記

next.js v14では上記の方法では、Entire page deopted into client-side renderingというエラーを吐き出し、勝手にnoindexタグが設定されます。(このブログはこれが原因で1週間ぐらい新規ページが検索に載りませんでした)そのため、以下のようにSuspenseで囲う必要があります。

1<Suspense fallback={<></>}>
2  <GoogleAnalytics />
3</Suspense>

最後に

このようにすることでNext.js製のアプリにgoogleアナリティクスを投入できます。

参考資料

最新の記事5件