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に一向にデータが送信されなくて焦ったが、広告ブロックツールで防がれていたのが原因だった。

参考


Related #js

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

jsで配列からランダムにn件取得する

lodashのsampleSizeを使った

jsで連番の配列を作成する

Array.from(Array(n).keys())

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意