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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた