目次
相談する「せっかく会社ブログをやるなら、見られてることと人気記事の変動を肌で感じないと続くモチベが危うい！」
と思い至って計測環境を見直しました。そもそもの話でコーポレートサイトに Google Analytics（GA） が入っていませんでした。
人気記事ランキングを作る前に、まずはデータを取る仕組みが必要です。良い機会なのでAstroサイトへのGA4導入と自動更新の土台づくりを進めました。
0.前提：サイトの技術スタック
Astro＋コンテンツはmicroCMS、という運用です。
以下で詳しく解説しています。
1. なぜ今、GA4を入れたのか
モチベーションは単純です。
「どの記事が読まれているのかを見える化したい」。
特に企業ブログの運営では、「書いたのに誰も読んでいないのでは？」という不安がモチベーションを削ります。
一方、定期的に数字を確認できると「もっと改善してみよう」「次はこのテーマを掘ってみよう」と自然に前向きになります。
数字を見える化することは継続の仕組み化。「人気記事ランキング」です。
PVの多い記事が並ぶことで読者の導線が増え、書き手にもフィードバックが返ってきます。
2. 技術的な課題：Astro構成の計測
弊社のサイトは Astro + Cloud Run の構成です。
Astroは静的サイトジェネレーター（SSG）で、通常のSPAのようにJavaScriptでタグを動的に挿入する構造ではありません。「どのタイミングでGAタグを埋め込むか」を明確に制御しなければなりません。
今回は Google Tag Manager（GTM）経由でGA4を導入しました。
GTMを経由することで、今後のイベント計測や広告タグ挿入をノーコードで行えるようになります。
Astro側では <head> にスクリプト、<body>直後に noscript を挿入。<script is:inline> 指定で最適化の影響を回避しました。これで静的HTML出力でも確実に動作します。
デプロイはGitHub ActionsとCloud Runで自動化しています。
PRをマージすれば自動的に本番に反映されます。タグの貼り忘れや環境差分も発生しません。
3. 実装を15分で終わらせたワークフロー
今回の導入は、Codexに 「共通レイアウトにGTMスニペットを入れて」と指示するだけでした。
デプロイ後、無事GA4のリアルタイム画面に自分のアクセスが表示されます。
ここまで15分くらいです。
4. 人気記事ランキングの設計
計測が動いたら、次はデータを活用します。
人気記事ランキングはすでにUIだけ存在していました。「GA4のデータを流し込む部分」を自動化しました。
仕様を整理すると以下の通りです。
- 対象ページ：
/blog/配下 - 指標：
screenPageViews（ページビュー） - 集計期間：直近30日
- 表示件数：上位5件
- 更新頻度：週1回（月曜03:00 JST）に自動更新
GA4 Data APIでデータを取得し、src/data/ranking.jsonを生成。
Astroはビルド時にこのJSONを読み込みます。静的なHTMLで高速に表示できます。
この構成により、誰も手を動かさなくても人気記事欄が週次で更新されます。
5. GCPとGA4の連携構成
GA4のデータを取得するため、まずはGCP上にサービスアカウントを作成します。
GA4側でアカウントを閲覧者権限で追加。API経由で安全にデータを読めるようにしています。
認証情報（JSONキー）はGitHub Secretsに保存。CI/CDからのみ読み取ります。GitHub Actionsが週1でスクリプトを実行してranking.jsonを更新する仕組みです。
この方法なら、個人アカウントに依存せず、鍵の管理や権限も一元化できます。
6. 技術的なポイント
Astro × GA4の相性問題を解消
Astroは静的HTMLを生成します。通常のgtag.jsをそのまま差し込むと最適化時に除外されることがあります。
<script is:inline>指定でこれを防ぎます。小さな工夫ですが、SSGでGAを正確に動かす上では必須です。
ランキングは自動生成
ranking.jsonはCIがGA4から自動生成します。
週次でランキング見て、ワクワクしたい。
7. 仕組みがモチベーションを支える
ブログ運営で一番難しいのは「続けること」。実際弊社も、会社ブログの更新が半年止まってました。
数字が見えないと、やる気も湧かず更新が途絶えがちになります。
データが定期的に更新されることで「今週はどの記事が伸びた？」と自然に気になります。
仕組みがモチベーションを生み、モチベーションが仕組みを育てる。この循環を作るのが今回の狙いです。
サーチコンソール入れるorGA入れてslack通知する、での代替でもいい気はしたものの、せっかくなのでUI上でランキングを公開することで社外に対して言い訳できない「やっていくぞ」というコミットを促している側面もあります。
まとめ
GA4の導入は単なる計測作業ではなく、継続的に改善するためのエンジンづくりでした。
Astroのような静的サイトでも、GTM経由で柔軟にGAを動かし、CI/CDと連携すればデータドリブンな仕組みが簡単に作れます。
人気記事ランキングは見栄え以上に、運営を続けるための装置です。
会社ブログ更新、頑張りましょう。同じ技術スタックで続かないと感じている方向けに何かお役に立てていれば幸いです。