AstroへGA4を本番環境だけで重複なく読み込む実装

GA4の読み込みはコミット29d7397で追加した。ページごとのコンポーネントへタグを書くと、レイアウトの入れ子や将来の変更で同じページに複数回読み込む危険がある。このサイトではsrc/components/SEOHead.astroを共通の配置場所とし、サイト定数に置いたMeasurement IDを一度だけ参照する構成にした。

共通ヘッドから本番時だけ追加する

SEOHeadはすべての公開ページのheadから呼ばれる。ここでブラウザのhostnameがサイト定数の正規ホストと一致する場合だけ、Googleタグ用scriptを動的に追加する。ローカル開発サーバーや別ホストのプレビューでは一致しないため、ページ表示だけで本番の計測へ送信しない。

if (window.location.hostname === productionHost) {
  const googleTag = document.createElement('script');
  googleTag.async = true;
  googleTag.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
  document.head.append(googleTag);
  gtag('config', measurementId);
}

Measurement IDの実値はサイトの設定にあり、本記事には転載しない。識別子が公開タグに含まれることと、複数の配置場所へ重ねて書くことは別問題である。初期化位置を一か所に保ち、gtag('config', ...)をその分岐内で一度だけ呼ぶことを優先した。

確認方法と判断理由

npm run build後に生成HTMLを確認し、本番ページでGA4の読み込み処理が一組だけ出ることを確認する。さらにローカルとプレビューのhostnameでは外部scriptを追加する条件が成立しないことを確認する。実際の解析画面に届くイベント数だけでは、二重初期化を見つけにくいため、生成HTMLとNetwork表示を合わせて見る。

計測コードをheadへ置くのは、全ページで同じ条件を適用するためであり、各記事の本文へ分析用scriptを追加するためではない。IDをログ、記事、問い合わせ内容へ出さないことも、設定値を一元化する判断と合わせて運用する。

失敗しやすい点

本番判定をせずに開発環境でも初期化すると、検証アクセスが計測へ混ざる。別コンポーネントにも同じタグを追加すると、ページビューやイベントが重複する可能性がある。変更後は本番・ローカル・プレビューをそれぞれ条件として確認する。

この実装ではAstroのビルド時にhostを固定するのではなく、ブラウザで現在のhostnameを見ている。したがって、同じ生成物を開発・プレビュー・本番へ配っても、実行時のホストに応じて読み込みを分けられる。正規ホストを変更する場合は、GA4の条件だけでなく、サイト定数、Astroのsite、canonicalの基準も同時に確認する。

タグの追加や変更は、ページを一つだけ見て終えず、共通レイアウトを使う固定ページと記事ページでも同じ条件が保たれるかを確認する。

公式資料と関連記事

Google Analytics公式: Set up Google tag — Googleタグの設置方法を確認できる。
Astro公式: Scripts and event handling — Astroでブラウザ用scriptを扱う際の確認先。
Astroで構築するSEOに強いメタタグとOGP画像の共通コンポーネント設計 — 共通headの責務を扱う。