Next.js + Vercel環境 で GAタグを使用する方法

Next.js + Vercel環境 で Google Analytics のタグを埋め込もうとしてハマったので、手順を残します。

1. GAタグ取得

公式サイト にて、GAタグを取得します。

GAタグとは、例えば↓のような文字列です。

G-XXXXXXXXXX

（「XXXXXXXX」はご自身のIDに置き換えてください）

また、下記のようなタグも取得できるはずです。

GAサイトから取得するタグ
<!-- Google tag (gtag.js) -->
<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>

2. .env.development.local 作成

アプリケーションのルートディレクトリに、下記のファイルを作成します。

.env.development.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXX

注意点として、必ず先頭に NEXT_PUBLIC_ をつけてください。

こうすることで環境変数の値がブラウザに出力されます。

ドキュメント

※ NEXT_PUBLIC_ をつけないと、環境変数の値が undefined となります。

3. Script埋め込み

続いて、headタグの外 に Script オブジェクトを作成します。

headタグの外
<Script
    async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`} />
<Script
    dangerouslySetInnerHTML={{
        __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}');
    `,
    }}
/>

※ head タグの中に Script オブジェクトを埋め込むことはできません

ここまでで、ローカル環境ではタグが埋め込まれているはずです！

4. Vercel に環境変数を設定

最後に、Vercel に環境変数を設定します。

Vercelトップ → Project → Settings と進みます。

Environment Variables ページで、以下のように入力し「Save」を押します。

Key: NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

Value: G-XXXXXXXX

これで準備は完了です！

5. デプロイ

最後に、Vercel でアプリケーションをデプロイします。

これでGAタグの設置が終了しました！

参考になれば幸いです。