はじめに
先日、本ブログにGoogleアナリティクス（GA4）を導入を試みました。
ローカル環境では問題なくGoogleアナリティクスのID（GAID）が読み込めていたのに、なぜか本番環境にデプロイすると全く反映されない…。
数時間ハマったこの問題、原因は GitHubのSecrets設定の勘違い という、シンプルなものでした。
何が起きていたか？
状況を整理すると、以下の通りです。
.envファイルにGoogleアナリティクスのID（G-XXXXXXXXXX）を設定。- アプリケーションコード内で
import.meta.env.PUBLIC_GA_IDのように環境変数を読み込むように記述。 - ローカルサーバー（
npm run dev）で起動し、開発者ツールでGAIDがHTMLに埋め込まれ、アナリティクス上でも計測されていることを確認。 - GitHubにコードをプッシュし、GitHub Actions経由でデプロイが実行。
- デプロイされた本番サイトを確認すると、GAIDが読み込まれておらず、アナリティクスが全く機能していない。
コードに問題はなく、デプロイも成功している。
それなのに環境変数だけが空になっている現象に頭を悩ませていました。
原因：GitHub Secretsは2種類あった
結論から言うと、原因は GitHub Actionsのワークフローから参照されるべき正しい場所にSecretを設定していなかった ことでした。
GitHub Actionsのワークフロー内で ${{ secrets.HOGEHOGE }} という構文で値を参照するには、
Repository secrets に登録する必要があります。
私が設定していたのは Environment secrets でした。
そのため、GitHub Actionsが実行される際に「そんなSecretは存在しない」と判断され、環境変数が空のままビルドが進んでいました。(正常に値が反映されていれば “PUBLIC_GA_ID=***” のようにマスク表示されます。)
GitHub Actionsで利用するSecretsの設定方法
- 対象のリポジトリに移動し、 [Settings] タブをクリック。
- 左側のサイドバーから [Security] > [Secrets and variables] > [Actions] を選択。
- [New repository secret] ボタンをクリック。
- Name 欄に、ワークフローファイルで参照したい名前（例：
GA_ID）を入力。 - Secret 欄に、環境変数の値を貼り付ける。
- [Add secret] をクリックして保存。
まとめ
この設定を行った後、再度GitHub Actionsを動かしてデプロイしたところ、無事に本番環境でもGoogleアナリティクスのIDが読み込まれ、計測が開始されました。 🎉
参考リンク: