【2024-07-07】ページごとのPV数を取得する

16 > 【2024-03-16】GraphQLでアクセス数を取得する（2. クエリ書いてみるけど無料版を利用しているので実行不可）でもやったけど結局何がどうだったんだっけ？

`httpRequests1dGroups`と`httpRequestsAdaptiveGroups`の違いは？

perplexityに相談しながらGraphQLのクエリ作成をする。
集計する時に出てくるhttpRequests1dGroupsとhttpRequestsAdaptiveGroupsの違いはなんなのか説明してもらう。

httpRequests1dGroups:
- 日単位で集計されたデータ
- 保持期間: 365日間（約1年）
- 特徴: 長期的なトレンド分析に適している
- 用途: 月間や年間のトラフィック分析、長期的なウェブサイトの成長を追跡
httpRequestsAdaptiveGroups:
- より詳細なデータを提供（時間単位や分単位の可能性あり）
- 保持期間: 31日間
- 特徴: より細かい粒度のデータを提供、最近のデータに焦点
- 用途: 短期的なトラフィックパターンの分析、最近のイベントや変更の影響を調査

`httpRequests1dGroups` を使う

httpRequests1dGroups を使えば良さそう。と思ってクエリを作成してもらう。

{
  viewer {
    zones(filter: {zoneTag: $zoneId}) {        
      httpRequests1dGroups(
        limit: 365
        filter: {date_gt: "2024-06-06", date_lt: "2024-07-06"}
      ) {
        dimensions {
	        date
           clientRequestPath
        }
        sum {
          requests
        	# visits
        }
      }
    }
  }
}

{
  "data": null,
  "errors": [
    {
      "message": "unknown field \"clientRequestPath\"",
      "path": null,
      "extensions": {
        "timestamp": "2024-07-07T10:13:17.933691972Z"
      }
    }
  ]
}

clientRequestPath というものは使えないらしい。
再度相談する。

`httpRequestsAdaptiveGroups` を使う

httpRequests1dGroups データセットで特定のパス（URL）ごとのPV数を直接取得することは難しいです。このデータセットは日単位の集計データを提供しており、通常、個別のURLパスレベルの詳細は含まれていません。

マジか。

代替案としてhttpRequestsAdaptiveGroups を使えばclientRequestPath ディメンション使えるよ、と言われる。


{
  viewer {
    zones(filter: {zoneTag: $zoneId}) {        
      httpRequestsAdaptiveGroups(
        limit: 100
        filter: {date_gt: "2024-06-06", date_lt: "2024-07-06"}
      ) {
        dimensions {
	        date
          clientRequestPath
        }
        sum {
          # requests // unknown field と言われてエラー
          # pageViews // unknown field と言われてエラー
        	visits
        }
      }
    }
  }
}

{
  "data": null,
  "errors": [
    {
      "message": "zone '5a71af09b05bea6e73a127db575425bd' 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/",
      "path": [
        "viewer",
        "zones",
        "0",
        "httpRequestsAdaptiveGroups"
      ],
      "extensions": {
        "code": "authz",
        "timestamp": "2024-07-07T10:17:50.533008664Z"
      }
    }
  ]
}

あ〜これが無料枠だと利用できなかったやつか。
やっと思い出してきた。

最初はGoogleAnalyticsでも良いのでは

いつまでサービス頑張るのかも知らんし有料課金したくない。
Google Analyticsでどうかなるのでは？

カスタムデータとかBigQueryとの統合とかは今のところ考えてない。
つまり、月間のPV数が1000万で、更新頻度が24hなら無料版で良いので一旦これでもいいかな。

使い勝手よくなかったりしたら月間$25か、年間契約にして月間$20払ってCloudflare のProプランに移行しよう。

これも勉強だしどっちも触るのは良いことだと思おう。

その他

saneatsu

 【2024-08-23】slugはまだSEOに有効なのかhttps://www.branding-works.jp/seo/slug-seo/

 SEOスラッグは、検索エンジンがページの内容を理解する上で重要な手がかりを提供するとの説はありますが、基本的に順位に与える影響は微々たるもの
SEO対策において適切なスラッグの設定で、検索エンジン良い評価を受ける度合いはかなり小さい為、設定時はユーザーにとってのわかりやすさや、分析観点でわかりやすさを優先して設定することが推奨です。
長過ぎるスラッグは、ユーザにとっても検索エンジンにとってもネガティブな影響を与えます
失敗例としては、「2019-best-seo-tips-for-wordpress」といった過剰に長く複雑なスラッグが挙げられます。このようなスラッグでは、年号が古くなることで時代遅れの印象を与えかねず、また必要なキーワードが埋もれてしまいがちです。失敗例を参考にし、スラッグをシンプルかつ効果的に保つことが肝心です。
この程度で長くて複雑だと判定されるの...？

「SEOに良い方に働く」より「設定するのめんどくさい」の方が勝つ気がしてきた。

 ページランキング検索エンジンはスラッグを含むURLを重要なランキング信号として扱います。スラッグはページの主題を反映し、適切なキーワードを含むことで検索結果の精度を向上させる要因の一つとは言われています。

また、ページランキングにおいて適切なキーワードを含むことにより、そのページが特定の検索クエリに対して適切な答えを提供していることを検索エンジンに伝える役割を果たすこともあります。

 あのサイトではどうなっている？Togetter
id
例：https://togetter.com/li/2414626

Gigazine
yyyymmdd-<slug>
例：https://gigazine.net/news/20240806-outline-speedrunning/

ねとらぼ
yymm/dd/id
例：https://nlab.itmedia.co.jp/nl/articles/2408/23/news184.html

saneatsu

 【2024-08-24】Google Analyticsの設定をして、ページビュー数が反映されることを確認する
 Step 1. Google Analyticsのアカウントを作成Googleアナリティクスのアカウント開設方法（測定IDの取得方法）を教えてください。 – futureshop虎の巻 を見てアカウントを作成。
Production用、Staging用にストリームを2つを作成。

 Step 2. remixのexampleコードを参考に実装してStaging環境へデプロイhttps://qiita.com/takagimeow/items/81819fbb40ca423051bf
.envファイルではなく、GitHub SecretsにProduction/Staging用のGoogleAnalytics測定 IDを入れてGitHub Actions内で .env.production/.env.staging を作成する形式にしている。
PRを作成してStaging環境にデプロイ。

ブラウザのInspectorで <script>タグとGoogleAnalytics測定 IDが埋め込まれていることを確認する。
.github/workflows/production-deploy.yml
name: Production Deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  publish-to-production:
    runs-on: ubuntu-20.04
    permissions:
      contents: read
      deployments: write
      statuses: write
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Create env file
        env:
          VITE_GA_TRACKING_ID: ${{ secrets.VITE_GA_TRACKING_ID }}
        run: |
          echo VITE_GA_TRACKING_ID=$VITE_GA_TRACKING_ID >> .env.production
        ...

 Step 3. ページビュー数が測定されることを確認
Step 1で作成したストリームをクリックして、「タグの実装手順を表示する」をクリック。
「テスト」ボタンをクリックするがタグが検出されない。

こういうテストできる導線あると助かる〜。
タイムラグかな。


そうっぽい。

明日また確認する。
【追記】

11h経過したがタグ検出されず。

24hくらい待たないとなのか...？とか思ったけどこれ単純に「Staging環境ではCloudflare Zero Trustでセキュリティコード入れないとページ表示できないようにしてるから」か。
ということでProduction環境へデプロイしてみる。

デプロイしてすぐに「テスト」ボタンを押しに行ったら成功した。

なんかこの類のミス前にもしたな...。
とれてそう🎉

saneatsu

 【2024-08-25】Google Analytics APIを利用してPV数を取得する
 Step 1. Google Cloud側での設定
 1.1 Google Analytics Data APIの有効化

Google Cloudのページにアクセスして「＋APIとサービスの有効化」をクリック。


GA4から使われている「Google Analytics Data API 」を検索。

ググると出てくる「Google Analytics Reporting API」は古いので注意。
詳しくは以下の記事を参考に。
https://note.com/dd_techblog/n/n29535fd4f557


有効にする。

 1.2 認証情報（サービスアカウント）を作成このサービスアカウントのメールアドレスは、アナリティクスのアクセス管理で必要になってくる。
「＋認証情報を作成」→「サービスアカウント」を選択。

「1. サービスアカウントの詳細」以外は省略して作成。

 1.3 秘密鍵の作成してローカルにダウンロードページごとのPV数ランキングを表示するときに必要になってくる。
作成されたサービスアカウントのメアドをクリック→「キー」タブ→「鍵を追加」をクリック。

新しい鍵をJSON形式で作成。

色々なサイトで「credentials.json」というファイル名になっているけどファイル名がプロジェクトIDになってる。変わったのかな。

 Step 2. Google Analytics側での設定
 2.1 アカウントへアクセスできるユーザーを追加これによってこのユーザーがGoogle Analyticsにアクセスできるようになる。


左下の歯車マークから管理者ページへ→「アカウントのアクセス管理」をクリック。
右上のプラスアイコンをクリック→「ユーザーを追加」を選択。

1.2で取得したメールアドレスを入力して、他は何も操作せず右上の「追加」ボタンをクリック。

 2.2 プロパティIDをコピー

「プロパティ設定 > プロパティの詳細」をクリックして表示されてある「プロパティID」をコピー。

これは次のステップの実装時に使います。

 Step 3. 実装
 3.1. はじめにhttps://developers.google.com/analytics/devguides/reporting/data/v1?authuser=2&hl=ja
Google Analytics Data APIを使うことで以下のようなことが実現できる。

Android アプリの過去 1 週間の 1 日のアクティブ ユーザーの数です。
サイトの上位 10 ページの過去 28 日間のページビュー数。
過去 30 分間の iOS アプリの国ごとのアクティブ ユーザーの数です。

API クイックスタート  |  Google Analytics  |  Google for Developers のいうところのステップ 1、2は終わっている。

 3.2. パッケージをインストールhttps://www.npmjs.com/package/@google-analytics/data
pnpm add @google-analytics/data

 3.3. JSONファイルをエンコードNext.jsのサイトでGA4のデータを取得する #TypeScript - Qiita を見ると以下のように書かれている。
Vercelの公式ドキュメントでは、プライベートキーなどの秘密情報をそのまま環境変数に設定するのではなく、秘密情報を含むファイル全体を環境変数として設定することを推奨しています。この方法を使用する場合、credentials.jsonファイル全体をBase64でエンコードして環境変数として設定し、コード内でデコードして使用します。
ということで、手順1.3で取得したJSONファイルをエンコードしておく。

 3.4. 実装Google Analyticsで集めた、すべてのページ毎のPV数を取得する。

dimensions: の中に入れた要素がその順番で配列として返ってくるけど、下手にいじったらバグりそうだから後でちゃんと型定義したい。
import { BetaAnalyticsDataClient } from "@google-analytics/data";

const GOOGLE_CREDENTIALS_BASE64 = "3.3で取得した値";
const propertyId = "2.2で取得した値";

export default async function getPageViews() {
  try {
    const credentials = JSON.parse(
      Buffer.from(GOOGLE_CREDENTIALS_BASE64, "base64").toString("ascii")
    );
    const analyticsDataClient = new BetaAnalyticsDataClient({ credentials });
    const [response] = await analyticsDataClient.runReport({
      property: `properties/${propertyId}`,
      dateRanges: [
        {
          startDate: "2024-08-01",
          endDate: "today",
        },
      ],
      dimensions: [
        {
          name: "pagePath",
        },
      ],
      metrics: [
        {
          name: "screenPageViews",
        },
      ],
    });
    console.dir(response, { depth: null });

    if (!response || !response.rows) return null;

    response.rows.forEach((row) => {      
      if (row.dimensionValues && row.metricValues) {
        console.log(
          `pagePath は ${row.dimensionValues[0].value} で、uniquePageviews は ${row.metricValues[0].value}です`
        );
      }
    });

    return null;
  } catch (error) {    
    return null;
  }
}

 参考Step 1, 2
【PV数取得 ・ランキング作成】Google Analytics API 設定手順【GA4対応】 | wordpressテーマ「Diver」
PythonでGoogle AnalyticsにAPIアクセスしてデータ取得する｜仮想サーファー@さぼりエンジニア

Step 3
Next.jsのサイトでGA4のデータを取得する #TypeScript - Qiita

saneatsu

 データストリームで本番用・ステージング用があるのは変では
一番最初に設定を行うときになんとなく「データストリーム」を本番用とステージング用2つ作成した。

これは「左下の歯車マーク > データの収集と修正 > データストリーム」から確認できる。
このデータストリームはデータを混在させて分析したい場合に必要な機能であって、「本番用とステージング用」みたいな混在のさせ方はおかしかった。

 プロパティで分けるhttps://wacul-ai.com/blog/access-analysis/ga4-data-stream/
プロパティという聞き慣れない概念の包括関係はこんな感じ。

ということで本番環境のプロパティに作成してしまったウェブストリームを削除して、新たにステージング環境用のプロパティを作成する。

 プロパティを新規作成新たにプロパティを作成する。

「左下の歯車マーク > + 作成 > プロパティ」から新規作成。
左上からプロパティが作成されたことが確認できる。

このスクラップは3ヶ月前にクローズされました

【2024-07-07】ページごとのPV数を取得する

httpRequests1dGroupsとhttpRequestsAdaptiveGroupsの違いは？

httpRequests1dGroups を使う

httpRequestsAdaptiveGroups を使う

最初はGoogleAnalyticsでも良いのでは

その他

【2024-08-23】slugはまだSEOに有効なのか

SEO

ページランキング

あのサイトではどうなっている？

【2024-08-24】Google Analyticsの設定をして、ページビュー数が反映されることを確認する

Step 1. Google Analyticsのアカウントを作成

Step 2. remixのexampleコードを参考に実装してStaging環境へデプロイ

Step 3. ページビュー数が測定されることを確認

【2024-08-25】Google Analytics APIを利用してPV数を取得する

Step 1. Google Cloud側での設定

1.1 Google Analytics Data APIの有効化

1.2 認証情報（サービスアカウント）を作成

1.3 秘密鍵の作成してローカルにダウンロード

Step 2. Google Analytics側での設定

2.1 アカウントへアクセスできるユーザーを追加

2.2 プロパティIDをコピー

Step 3. 実装

3.1. はじめに

3.2. パッケージをインストール

3.3. JSONファイルをエンコード

3.4. 実装

参考

データストリームで本番用・ステージング用があるのは変では

プロパティで分ける

プロパティを新規作成

`httpRequests1dGroups`と`httpRequestsAdaptiveGroups`の違いは？

`httpRequests1dGroups` を使う

`httpRequestsAdaptiveGroups` を使う