January Monday,10th 2022: AM

Next.js for GoogleAnalytics

Next.jsにGoogleAnalyticsを導入したやり方

プロパティ作成→管理/データストリーム/クリックして測定IDを入れます。

Google アナリティクス 4 じゃなかったら普通にトラッキングIDの方で大丈夫です。

ローカルの環境変数は.env.localなどに記述します。

開発環境のlocalhost:3000でもこの設定でGoogle Analyticsに発火されます。

NEXT_PUBLIC_GA_ID=ここに入れる

サーバーの環境変数にも追加します。

Vercelの場合Environment VariablesからNAMEとVALUEを記述してADD

gtagの型定義をプロジェクトにインストールします。

npm install @types/gtag.js

libs/gtag.ts

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID || "";
export const pageview = (url: string): void => {
 if (!GA_TRACKING_ID) return;
 window.gtag("config", GA_TRACKING_ID, {
  page_path: url,
 });
};

_app.tsx

import { GA_TRACKING_ID, pageview } from "../libs/gtag";
import { useEffect } from "react";
import { AppProps } from "next/app";

const MyApp = ({ Component, pageProps, router }: AppProps): JSX.Element => {
  useEffect(() => {
    if (!GA_TRACKING_ID) return;
    const handleRouteChange = (url: string) => {
      pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (

    export default MyApp;

_document.tsx(Headタグの中にスクリプト埋め込みます)

import { GA_TRACKING_ID } from "../libs/gtag";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="JA">
        <Head>
          {GA_TRACKING_ID && (
            <>
              <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
        `,
                }}
              />
            </>
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

流れとしては.env.localやサーバーに入れたNEXTPUBLICGA_IDをgtag.tsでGA_TRACKING_IDにしてエクスポート、

それらを読み込みつつ発火の仕組みを_app.tsx内で行い、Google Analyticsのスクリプトを_document.tsxに記述します。

間違ってるサイト多いのでdocumentにスクリプトを書いてください。appの方にはスクリプトは書きません。

意外と導入しちゃえば二度と触ることないんで難易度低いしどのサイトにも入れられるし簡単だし、やってみて欲しいです！！