Next.js に Google Analytics を導入する際のベストプラクティス

2021.10.29 - 2021.11.14

Web サイトに対してアクセス解析を行う場合、一般的には Google Analytics を利用します。今回は Next.js で作成した Web サイトに Google Analytics を導入する方法について紹介します。

はじめに

Google Analytics では解析データを収集するために、以下のコードを Web サイトに埋め込む必要があります。

html

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

しかし、TypeScript を利用している場合など、型チェックが働いている環境では、Next.js にコードをコピペするとコンパイルエラーが発生してしまいます。少し古い情報だと dangerouslySetInnerHTML を使ってスクリプトを一旦文字列として埋め込む方法もありますが、2021年10月現在では後述の方法がおすすめです。

ベストプラクティス

HTML の script タグを、Next.js に実装されている Script タグに置き換えて埋め込みます。この方法を使えば、 dangerouslySetInnerHTML のようなサニタイズしたくなってしまう方法を使わず、スマートに記述できます。以下のコードは全てのページに Google Analytics のコードを埋め込みます。環境変数（ NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ）に値が設定されている場合のみ、コードを埋め込む条件を追加しているので、うまく環境変数を設定すればローカル環境やプレビュー環境からのノイズを気にしなくて良くなります。

_app.tsx

typescript

import type { AppProps } from 'next/app'
import Script from 'next/script'

const analyticsId = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
  <>
    {analyticsId &&
      <>
        <Script async src={`https://www.googletagmanager.com/gtag/js?id=${analyticsId}`} />
        <Script id="gtag">{`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${analyticsId}');
        `}</Script>
      </>
    }
    <Component {...pageProps} />
  </>
)

export default MyApp

process-env.d.ts

環境変数の型定義も合わせて載せておきます。

typescript

namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: string | undefined
  }
}

参考リンク

Components: Script | Next.js

Menu Using App Router Features available in /app Latest Version 16.1.6 Getting Started Installation Project Structure Layouts and Pages Linking and Navigating Server and Client Components Cache Compo...

No Image

レベル別プログラマの特徴まとめ

独断と偏見で、プログラマをレベル付けして特徴をまとめました。

Alpine Linux の Docker イメージで動的に環境変数を設定するベストプラクティス

Dockerfile を書いていると、「 aarch64 の場合だけ」のように特定の条件を満たす時に環境変数を設定したい場合がありますよね。しかし Dockerfile としてビルド時の分岐がそもそもサポートされていないので、今回はそのような場合に有効な Dockerfile の作成方法を紹介します

Docker の Redis イメージに初期データをロードするベストプラクティス