Astroで超簡単！今さら聞けない Google Analytics（GA4）導入ガイド
この記事のレベル
目次
KAMEI RYOSUKE
フロントエンドエンジニア / 元調理師
12年の調理師経験を活かし、30代でWEBエンジニアに転身。現在は沖縄で愛犬のフレンチブルドックと共にフルリモートで開発業務に従事。Web開発やプログラミング学習の記録、エンジニア転職に役立つ書籍レビュー、リモートワークのガジェット紹介、愛犬との暮らしなど、キャリアとライフスタイルに関する情報を発信しています。
Astroで超簡単！今さら聞けない Google Analytics（GA4）導入ガイド
はじめまして、元調理師・現フロントエンドエンジニアの KAMEI です。
今回のテーマは 「今更聞けない Google Analitics の導入方法」。
「Astro でサイトは作ったけど GA をまだ入れてない…」
「せっかく作ったWEBサイト、実際にアクセスがあるか確認したい…」
そんな “いまさら” の不安を抱えるエンジニア仲間に、私の最新学習ログをシェアします。
結論
- UA 利用者や Google エコシステムと連携したいサイトは GA4 が必須：Universal Analytics は 2023 年で完全停止、今から始めるなら GA4 一択 Google for Developers
- Astro.js は <script is:inline> で埋め込むだけ：ビルドエラーを防ぎつつ gtag.js をそのまま設置できる
- リアルタイム計測は ３ 分で確認可能：タグ設置 → プレビュー → “リアルタイム” タブで即動作チェック！
背景と問題提起
なぜ GA4 導入が必須？
2024 年 4 月以降、Google は Google タグ（gtag.js）と Tag Manager を中心に統一的な計測エンジンを提供。GA4 を導入しないとデータ収集が途絶えるため対応は急務です。 Google for Developers。
静的サイト × Jamstack に最適解
Astro は HTML をビルド時に生成する SSG。サーバー不要で高速ですが、JS バンドルの最適化が厳しめ。タグ埋め込み方を間違えるとビルドでコケるのが落とし穴です。
学習ログ・実装ステップ
1. GA4 計測 ID を取得する
- Google Analytics（analytics.google.com）にログイン。
- 左下「管理」→「プロパティを作成」で GA4 プロパティを作成。
- 「データ ストリーム」→「ウェブ」→サイト URL を登録しストリームを作成。
- ストリーム詳細画面最上部に表示される Measurement ID（例: G-A1B2C3D4E5）をコピー。
※ この ID を後述のコード中G-XXXXXXXと差し替える。
2. 環境構築
- 使用フレームワーク：今回はAstro.jsを使用
npm create astro@latestでプロジェクト作成- 任意でPrettier ESLint など開発支援ツールを追加してください。
3. Astro で gtag.js を安全に挿入する
- 「共通レイアウトや _head.astro の <head> タグを確認してください。
- <head> タグが見つかったら、その中に(<headタグ内に>)「Analytics 画面でコピーした 2 つの
<script>タグをそのまま貼り付けます。」- 片方でも欠けると初期化失敗になるので、必ず並べて配置。
💡2つの<script>タグが見つからない、どこにあるかわからない場合
ストリーム詳細画面最上部に表示される Measurement ID（例: G-A1B2C3D4E5）をコピー。
※ この ID を後述のコード中 G-XXXXXXX と差し替えたものを(2)の手順同様に貼り付けてください。
- Astro では is:inline ディレクティブを付けると、スクリプトをバンドル対象から除外し生の HTML に残せる。docs.astro.build
── <head>内に追加 ──
<!-- Google tag (gtag.js) --> <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script> <script is:inline> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXX', { transport_type: 'beacon' }); </script>- ビルドエラー対策
is:inline がないと Astro が JS をバンドルしようとして astro(4000) ワーニング → ビルド失敗。料理でいう “火加減ミス” みたいなものなので、必ず付けましょうblog.ha1hai.com。 - リアルタイム計測チェック
- コードをデプロイまたは astro dev でローカル起動。
- 取得した GA プロパティの「レポート」→「リアルタイム」を開く。
- 自分のアクセスが即時カウントされていれば導入成功。
これで、まだ GA を入れていない Astro 初心者でも安心して計測を始められます。次はリアルタイムレポートでデータが飛んでいるか確認してみてください。
まとめ
- GA4 計測 ID を取得して
<script is:inline>で貼り付けるだけ。 - 導入後はリアルタイムレポートで動作確認。
GA4は自身のサイトの（計測・分析）= データを見るツールです。
まずは GA 設定を片付けてしまいましょう。