GA4から記事ランキング表示するWordPressプラグインを作った(Simple Popular Posts for GA4)

Simple Popular Posts for GA4

自分のWordPressで使うために、プラグインを作った。
AI利用でのバイブコーディングであります。

アクセス数に応じて記事リストを作成し、それをウィジェット表示。
自分とこのトップページで表示しているコレ↓ですね。
※下図ではウィジェットを3つ並べてる形

Simple Popular Posts for GA4 - 利用例

こうした「記事ランキングのウィジェット表示」は、既存のプラグインが結構ある。
ただ独自集計になってることが多く、PV発生のたびにDB更新するため表示速度やCPU負荷に影響する。
また、DBにどんどんデータが溜まってしまうのもツラいところ。

特に自分の場合は、CPU負荷を最小限まで下げたくて、プラグインを自作することにしたんだな。

このプラグインでは、1日に1回だけGoogle Analytics 4 (GA4)から情報を取得する。
指定した期間の集計情報として取得・保存するので、DBサイズも最小限になる。

なぜ同種のプラグインがなかなかないかというと、分かるような気がする。
現在のGA4では集計数字をとるためにサービスアカウント(JSONキー)が必要だからかな?と。

JSONキー取得は知識がない状態だと分かりにくいのと、取り扱い注意というのがある。
Google – サービス アカウント キーを管理するためのベスト プラクティス

一方で、大手の有料プラグインがやっているようなGoogleアカウント連携方式は、ユーザー的にも設定が簡単。
「プラグインの管理画面からGoogleログインすれば設定完了」みたいな、アレ。

ただし、それをやるには中間サーバを用意してGoogleの審査を通過する必要があるなど、プラグイン提供側の費用と工数が増える。
そこで費用回収するために色んな有料機能がついて、プラグインが大型化する。。。

ということで、シンプルに「GA4連携してウィジェット表示するだけ」のプラグインを自作することになったのだが・・・

他にも同様に困ってる人がいるかもしれないと思ったので、ソースをgithubに公開しておいた。
自己責任で改良して使うなり、用途はあるかもな、と。

自分は趣味のサンデー・プログラムのみで、githubって「見る専」でしか使ったことないので、よい勉強になりました。

プラグインの利用方法

WordPress公式のディレクトリにプラグインを公開するのは色々と手間がかかりそうなので、githubに公開するだけにした。

以下からダウンロードできる。
github – Simple Popular Posts for GA4

Simple Popular Posts for GA4

プラグインのインストール手順は以下。

  1. Simple Popular Posts for GA4」を開く
  2. 「Code」の緑色のボタンをクリック
  3. 「Download ZIP」でzipファイルをダウンロード
  4. WordPress「プラグイン」→「プラグインを追加」→「プラグインのアップロード」でzipファイルを添付

Simple Popular Posts for GA4 - zipダウンロード方法

インストール後、プラグインの設定画面で初期設定をする。
最小限、設定が必要なのは以下で、JSONキーの取得方法は「使い方」タブも参照。

  1. WordPress「設定」→「Simple Popular Posts」
  2. 「サービスアカウント JSONキー」の設定
  3. 「GA4 プロパティID」の設定

Simple Popular Posts for GA4 - 設定画面1

設定時は、特に↓のサービスアカウントの権限設定(最小限のGA4の「閲覧権限のみ」にする)が、注意点ですかね。
※「使い方」タブ参照(英語のみだけど)

5. **Add User to GA4**: Copy the service account email, go to GA4 Admin > Property Access Management, and add it as “Viewer”.

このあたりの情報取得は、初めてだと結構面倒。
そこら辺は、適宜ググるかAIチャットできくしかない。

次に、自動取得のスケジュールなどを設定。

Simple Popular Posts for GA4 - 設定画面2

JSONキーなどの設定が終わったら、一度「手動データ取得」を試せる。
GoogleのAPIを使ってGA4のアクセス集計数字をとることになるが、そのGoogle APIの無料枠がかなり多いので、基本は無料でいける。

今日時点での無料枠は「1日20万トークン」で、このプラグインの使用量は1回のデータ取得につき約50トークン。
また、支払い方法を設定せずに利用していれば、仮に無料枠が将来的に極小になった場合でも、勝手に課金されることはなく、アクセス不可になるだけで済む。

プロパティごとの 1 日あたりのコア トークン数 200,000
Data API の制限と割り当て

Simple Popular Posts for GA4 - 設定画面3

設定が完了し、GA4のデータ取得も成功したら、あとはウィジェットを配置するのみ。

Simple Popular Posts for GA4 - ウィジェット設定画面

ウィジェットの設定画面は上記(画像右側)。

「集計期間」は「1週間」か「1ヶ月」しか選べない。
こうして選択肢を絞ることで、DBへのデータ保存が最小限になっている。

「デザイン」については、あんまりテストしてない。
自分の場合は独自CSSを設定して、このプラグインのCSSはオフにしているんだな。
※このプラグインの出力するCSSをオフに設定することが可能

集計単位は「カテゴリ」か「タグ」で、除外IDなども設定可能。
集計に含めたい記事の投稿日の新しさも、絞ることができる。

ウィジェット自体も、同一ページに複数設置可能。
表示htmlのキャッシュができるプラグインやkusanagiなどを使っていれば、表示系で速度が問題になることもないかと思います。

まとめ

今回は、「Google Antigravity」で作ってもらい、レビューは「Geminiチャット」という形。
Antigravityのようなcli型AIは、ささっとコーディングしてくれるが、ミスも多いようで。
一方でWEBチャットの方は、ソースを添付すると精査して分析する能力が高い感じ。

要は2つともGeminiなんだが、両方無料で使えるのがありがたい。
高性能AIの使用上限を増やすためにGoogle AI Proは加入しているけど、「1日あたりのコーディングは少しずつ」なら、無料でやりきれなくもない。

コード量としては1700行(設定ファイルを含む)ということで、これがAIで作れるようなったのはデカいな、と。
プラグインのアイコン画像readmeあたりも、AIに細かく指示しながら作れた。

便利な時代になったな、と。

ほい。

そんな感じ。

tonogata
tonogata

2件のコメント

  1. 予想以上に英語できる方だったとは驚きです。(笑)
    見たことないですけど子供がGithub信者(?)なので、英語で公開していたのかなぁ・・

    • どもども。
      説明文とかも全部AIが作ってるので、自分はチェックしただけですね。楽ちんです。
      プラグインの設定画面とかは日本語対応したんですが、readmeとかのファイルは英語のみで。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です