Next.jsプロジェクトにGoogleAnalyticsを導入する

Next.jsアプリケーションにGoogleAnalyticsを導入する必要があったので対応した。

上記の公式プラグインを見つけたがまだ使わないほうがいいと書かれていたので代替のライブラリを探したところ、react-gaというのが良さそうだったのでこれを使うことにした。

metaタグ等共通で設定したいものをHeadコンポーネントとしてまとめていたので、Headコンポーネント内で[[ReactGA.pageview]]を呼ぶことにした。

開発環境ではPVを送信したくなかったのでtestModeを有効にした。

// Head.tsx
import NextHead from "next/head"
import { useRouter } from "next/router"

const initializeGa = () => {
    const gaOptions =
        process.env.NODE_ENV === "development"
            ? { titleCase: false, debug: true, testMode: true }
            : { titleCase: false };
    ReactGA.initialize(process.env.GA_TACKING_ID!, gaOptions);
}

export const sendGaPageview = (path: string) => {
    initializeGa()
    ReactGA.pageview(path);
}

const Head: React.FunctionComponent<Props> = () => {
  const router = useRouter();
  sendGaPageview(router.asPath);
  
  return (
    <NextHead>
      <title>SomeTitle</title
    </NextHead>
  )
}

eventの記録もできる。

本番環境に反映してもAnalyticsに一向にデータが送信されなくて焦ったが、広告ブロックツールで防がれていたのが原因だった。

参考

• Using Google Analytics with Next.js - Todd Austin - Medium