第3回 人気記事を自動表示したい―Cloudflareでも見られるがGoogle Analyticsを使うことにする

第2回では、Google Search Consoleへbringain.comを登録し、sitemap.xmlを送信した。

サイトマップは正常に処理され、50ページが検出された。トップページはその時点では検出 - インデックス未登録だったので、公開URLをテストしてからインデックス登録をリクエストした。

次にやりたいのは、ゆまラボで実際にどの記事が読まれているのかを見ること。

トップページには今後「注目コンテンツ」の枠を追加して、直近30日でよく読まれている記事を3～5件、自動で表示したい。

そのデータをどこから取るかを考えた。

ゆまラボはCloudflare Workersで動いているので、まずCloudflare側のアクセス解析を見てみる。

Cloudflare Web Analyticsでもかなり見られる#

CloudflareのWeb Analyticsを開くと、思っていたより情報がある。

今回確認した画面では、直近24時間のデータとして、

ページロード時間  187ミリ秒
アクセス数        110
ページの表示数    557

が表示されていた。

Core Web Vitalsも同じ画面で確認できる。

LCPは「良い」が99%で、URL別の表示では、

bringain.com/
bringain.com/blog/
bringain.com/series/
bringain.com/category/
bringain.com/tags/

といったパスごとの状況も見られる。

Cloudflareの公式ドキュメントでも、Web AnalyticsではVisits、Page views、Page load time、Core Web Vitalsを確認できる。さらにDimensionとしてPath、Referer、Device type、Browser、Operating systemなどが用意されている。

単純に、

どれくらい見られているか
どのURLが見られているか
どこから来ているか
表示速度に問題がないか

を見るなら、Cloudflareだけでもかなり確認できる。

最初は「人気記事を出したいならCloudflareの数字を使えばいいのでは」と考えた。

実際、それでもできそうではある。

トラフィック概要はWeb Analyticsとは別に見る#

Cloudflareには、Web Analyticsとは別にトラフィック概要もある。

こちらの画面では、

合計リクエスト  13.39k
合計訪問        1.61k
キャッシュヒット率 49.59%

などが表示されている。

リクエストの時間推移も確認できる。

ただし、ここはWeb AnalyticsのPage viewsと同じ数字として扱わない。

Cloudflareのトラフィック側はサイトへのリクエストや配信状況を見る画面で、Web AnalyticsはWebページの閲覧やユーザー体験を見るための画面。

同じCloudflareの管理画面にあっても、見ているものが違う。

人気記事を決めるなら、単純なリクエスト数ではなく「どの記事ページが読まれたか」を基準にしたい。

その意味では、今回見るべきなのはWeb Analytics側のページデータになる。

最終的には管理画面を見るだけにしたくない#

今回やりたいことは、アクセス解析の管理画面を開いて「この記事が人気だな」と確認するところでは終わらない。

トップページの構成は、

連載
カテゴリ
注目コンテンツ
新着記事

という並びを想定している。

この注目コンテンツを手作業で更新するのではなく、アクセスデータから自動で決めたい。

イメージしている条件は今のところ次の形。

対象期間
直近30日

対象ページ
通常の記事

表示数
3～5件

並び順
閲覧数の多い順

処理としては、

アクセスデータを取得
↓
記事URLだけを抽出
↓
直近30日の閲覧数で集計
↓
多い順に並べる
↓
上位3～5件を取得
↓
トップページの「注目コンテンツ」に表示

としたい。

記事数が少ない間は、管理画面を見て手で入れ替えても大した作業ではない。

ただ、記事が増えた後も毎回それを続ける設計にはしたくない。

この段階で、あとからプログラムからデータを取得できることも考えておく。

CloudflareにもAPIはあるがGoogle Analyticsも使う#

Cloudflareだから自動取得できない、という話ではない。

Cloudflare Web AnalyticsのデータにはGraphQL APIから扱える項目もあり、公式ドキュメントでもRefererなど一部の詳細データについてGraphQL APIが案内されている。

なので、

Cloudflareでは自動化できないからGoogle Analyticsにする

という理由ではない。

Google Analyticsを追加したい理由は、アクセス解析としてもう少し先まで使いたいから。

Google AnalyticsにはData APIがあり、レポートデータをプログラムから取得できる。

公式のAPIスキーマには、

pagePath
pageTitle
pageReferrer
landingPage
screenPageViews

などが用意されている。

pagePathはページのパス、screenPageViewsはWebページやアプリ画面が表示された回数を表す。

例えば、

pagePath
+
screenPageViews

を使えば、ページ別の表示回数を取得してランキング処理へつなげられる。

直近30日という期間を指定してレポートを取得し、ゆまラボの記事URLだけに絞る。

そのデータを使って上位の記事を決める、という流れを作りやすい。

まだ実装方法までは決めない。

Astroのビルド時に取得するのか、定期実行でデータを保存するのか、別の方法にするのかはデータがたまってから考える。

今はその前段階として、Google Analyticsにもデータをため始める方向にする。

SNSを始めた後の流入も見たい#

新連載では、このあとSNSも始める予定にしている。

Search ConsoleではGoogle検索側の状況を見られるようになった。

SNSから記事を共有し始めたら、

Google検索
SNS
直接アクセス
外部サイト

のどこから来ているのかも見たい。

Google Analyticsにはトラフィック獲得レポートがあり、新規・リピーターを含めて、ユーザーがどの流入元から来たかを確認できる。

人気記事の自動表示がGoogle Analyticsを追加したい最初の理由だが、今後のSNS運用まで考えると流入元も使うことになりそう。

Cloudflare Web AnalyticsにもRefererはあるので、ここもGoogle Analyticsだけにしかできないわけではない。

ただ、コンテンツごとの閲覧、流入、将来のData API利用まで同じ分析環境で見られるようにしておく方が、今後やりたいことには合っている。

Cloudflare Web Analyticsはそのまま使う#

Google Analyticsを追加しても、Cloudflare Web Analyticsをやめる必要はない。

今回実際に画面を見て、Cloudflare側だけでも確認できる項目は多かった。

使い分けとしては、今のところこう考えている。

Cloudflare Web Analytics
・サイト全体のアクセス状況
・ページビュー
・URL別の状態
・Referer
・Core Web Vitals
・ページロード時間

Google Analytics
・ページごとの分析
・流入元の分析
・レポートの組み合わせ
・Data APIからの取得
・将来の人気記事自動表示

Cloudflareはサイトの配信基盤でもあるので、アクセスとパフォーマンスを確認する場所としてそのまま使う。

Google Analyticsは、記事をどう読まれているかを見る側と、将来の自動処理に使うデータ元として追加する。

どちらか一方へ統一する必要はなさそうだ。

Google Analyticsも使うことにする#

Cloudflare Web Analyticsを実際に確認すると、基本的なアクセス状況を見るだけなら十分。

ページ表示数もURL別の状態も見られるし、Core Web Vitalsまで同じ画面で確認できる。

それでも、トップページの人気記事を自動化することと、これから始めるSNSの流入分析まで考えて、Google Analyticsも追加することにした。

まだGoogle Analytics側は何も設定していない。

プロパティも作っていないし、測定IDも取得していない。AstroへGoogleタグも入れていない。

今回決めたのはここまで。

Cloudflare Web Analytics
→ 今までどおり使う

Google Analytics
→ これから追加する

将来
→ 直近30日の人気記事を自動表示する

次はGoogle Analyticsのプロパティを作り、bringain.comで実際にデータが取得できるところまで設定する。

参考#

• Cloudflare Web Analytics - High-level metrics
• Cloudflare Web Analytics - Dimensions
• Cloudflare Web Analytics - Core Web Vitals
• Google Analytics Data API - API dimensions and metrics
• Google Analytics - トラフィック獲得レポート