Remix+CloudflareでWebサイトを作る 16（GraphQLでアクセス数を取得しようとするがProじゃないとできなさそうなので一旦辞めた）
saneatsu【2024-03-16】GraphQLでアクセス数を取得する（1. 準備）
やりたいこと
2つある
- ページごとの閲覧数を取得する
- 週間のアクセス数ランキングを取得する
準備
1. API Tokenを作成
公式サイトを見ながらAPI Tokenを作成
$ curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-H "Content-Type:application/json"
{"result":{"id":"YOUR_ID","status":"active"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}%
2. Chrome拡張を取得
立ち上げると真っ白の画面に入力欄が表示されるので https://api.cloudflare.com/client/v4/graphql を入力。
すると以下のような画面になる。
左下の「Headers」をクリックして以下を入力。
Bearer がないとエラーになる。
{
"X-Auth-Email": "YOUR_EMAIL",
"Authorization": "Bearer YOUR_API_TOKEN"
}
「Variables」をクリックして以下を入力。
{
"accountId": "ACCOUNT_ID",
"zoneId": "ZONE_ID",
"start": "2024-03-10T02:07:05Z",
"end": "2024-03-10T17:07:05Z"
}
試しに以下のクエリを入力してみて、Authエラーにならなけりゃまずは良さそう。
{
viewer {
zones(filter: {zoneTag: $zoneId}) {
firewallEventsAdaptive(
filter: {datetime_gt: $start, datetime_lt: $end}
limit: 2
orderBy: [datetime_DESC]
) {
action
datetime
host: clientRequestHTTPHost
}
}
}
}
VSCodeなどと同じ様に⌘を押しながらホバーすると以下のようになりクリックすると型定義が見れる。
limit: uint64! など!がついているものは必須の引数。
型定義が見れなさそうなら ⌘ + Shift + R でリロードすること。
ただ、Ctrl + Nで次の行に行った時も毎回補完一覧出してくるのうざすぎる。
参考
saneatsu【2024-03-16】GraphQLでアクセス数を取得する（2. クエリ書いてみるけど無料版を利用しているので実行不可）
実装
1. 調査
ここを見るかぎり httpRequestsAdaptiveGroups を使うらしい。
2. 書いてみるがエラーになる
クエリを書いてみたが以下のエラー文が出てうまくいかない。
"message": "zone 'YOUR_ZONE_ID' does not have access to the path. Refer to this page for more details about access controls: https://developers.cloudflare.com/analytics/graphql-api/errors/",
{
viewer {
zones(filter: {zoneTag: $zoneId}) {
series: httpRequestsAdaptiveGroups(
limit: 100,
filter: {
datetime_geq: $start
datetime_lt: $end
}
) {
sum {
visits
edgeResponseBytes
}
}
}
}
}
3. 原因調査
ここを見る限り「無料利用だからアクセスできない」ということが書いてある。
ただ、記事が古いし信用していいのか...？
探し回っていると以下の公式ドキュメントを発見。
データセット（今回の場合はhttpRequestsAdaptiveGroups）へアクセスできるかどうかをチェックできるっぽい。
Settings node · Cloudflare Analytics docs
以下を実行してみる。
{
viewer {
zones(filter: { zoneTag: $zoneId }) {
settings {
httpRequestsAdaptiveGroups {
enabled
maxDuration
maxNumberOfFields
maxPageSize
notOlderThan
}
}
}
}
}
以下が返ってきた。
"enabled": false。
利用できないです、っと...。
{
"data": {
"viewer": {
"zones": [
{
"settings": {
"httpRequestsAdaptiveGroups": {
"enabled": false,
"maxDuration": 0,
"maxNumberOfFields": 30,
"maxPageSize": 10000,
"notOlderThan": 0
}
}
}
]
}
},
"errors": null
}
GraphQL API - Limits · Cloudflare Analytics docs
ここを見ると各ノードの制限は以下のような種類があるらしい。
どのくらい遡ってデータをリクエストできるか、
1 つのクエリでリクエストできる最大期間 (秒単位)、
1 つのクエリでリクエストできるフィールドの最大数、
1 つのクエリで返されるレコードの最大数。
Zone Analytics · Cloudflare Analytics docs
ここを見ると以下のように書いてある。
VisitsとPage viewsはPro以上じゃないとWeb上で表示されないし、GraphQLでも叩けないっぽい。
Pro、Business、Enterpriseプランでは、プライバシーを第一に考えたウェブトラフィック分析が利用できます。
解析はCloudflareのエッジログに基づいており、サードパーティのスクリプトやトラッカーは必要ありません。Trafficタブには以下のメトリクスがあります：
・訪問- 訪問とは、別のウェブサイトまたは直接リンクから発生したページビューと定義されます。CloudflareはHTTPリファラーがホスト名と一致しない場合にチェックします。1つの訪問は複数のページビューで構成されることがあります。
・ページビュー- ページビューはContent-typeがHTMLのHTTPレスポンスが成功したものと定義されます。
リクエスト- HTTPリクエスト。典型的なページビューでは、多くのリクエストが必要です。
・Data Transfer- リクエストで転送されたHTTPデータの合計。
より詳細なメトリクスを受信するには、フィルタを追加します。また、Referer、Host、Country、Path、Status Code、Origin Status Code、Browser、Operating System、Device Typeで各メトリクスをフィルタリングできます。
期間を変更するには、グラフの上にある右側のドロップダウンメニューを使用します。また、ドラッグしてグラフを拡大することもできます。
アプリケーションサービスプラン | 料金設定 | Cloudflare
あとこのページの「すべての機能を比較」ボタンを押すとプランごとにできることの比較表が出てくるけど、ここから利用可能なノードが異なるということは読み取れなかった。
その他
Google Analyticsよりも閲覧数が多くなる
Cloudflare Communityを眺めていると質問を見つけた。
参考
saneatsu【2024-03-17】Cloudflare Proのお値段
結論、無料で叩けないなら今の段階ではProにしなくてもいいかなと思っているけどチェックだけしておく。
ここのProの「開始する」ボタンをクリック。
すると月払いの25ドルが選択されているが戻って年払いにすることができない。
このページを見てみるとProは「月払いで25ドル」しかないように見える。
う〜ん、全然わからんがこっちが最新なのかな？？
と思っていたらあった。
「分析とログ > Web Analytics」でサイトを追加すると以下のような画面が表示される。
「プランをアップグレードする」をクリックすると、以下のようなモーダルが立ち上がり右上のトグルボタンで切り替えることができる。
課金導線が共通して年払いオプション用意してないの優しくないなぁ。
「月額課金にしてちょっとでも高いプラン使わせよう」みたいな意図はないと信じれるプロダクトだとは思っているけど。