Simple GA4 Rankingでサイトにアクセスランキングを表示させる方法まとめ

このサイト・および記事にはアフィリエイト広告を利用しています。

サイトの軽量化を図るため、Google Analyticsのデータに基づきアクセスランキングを表示するプラグイン「Simple GA4 Ranking」を使った設定方法のまとめです。

大枠はこちらのサイトに記載されています。

しかし、「Simple GA4 Ranking」がまだβ版であり、Git Hubから持ってこなければいけない、設定途中のエラー対応などがありましたので、まとめています。

完成イメージ

完成イメージは下記となります。

設定完了後のイメージ

できればアイキャッチ画像も表示したいところですが、ちょっと大変そうなので、とりあえず記事のタイトル文字のみの表示になります。

Simple GA4 RankingをGit Hubからインストールする

Universal Analyticsのサービス終了に伴い、Simple GA Rankingでは動作しないため、Simple GA4 Rankingを使用します。

しかし、Simple GA4 Rankingはβ版のため、WordPressの通常のプラグインの画面では検索してもヒットしません。

  1. WordPressのメニューにある、「Add New from GitHub」をタップ
  2. Git Hubの「Simple GA4 Ranking」のアドレスを入力
  3. 「今すぐインストール」をクリック

Git Hubからインストールする方法は使っているWordPressのサービスによって違うかもしれません。

手順1.「Add New from GitHub」
手順2・3

Google Analyticsの設定をする

Universal AnalyticsからGoogle Analyticsへの移行がお済みでない場合は、下記などを参考に移行を行ってください。

  1. Google AnalyticsのプロパティからプロパティIDをコピーする
  2.  Google Cloud の Google API Library  (https://console.cloud.google.com/apis/library/analyticsdata.googleapis.com ) へアクセスする
  3.  「Google Analytics Data API」を有効化する
  4.  「認証情報」の「CREATE CREDENTIALS」 をクリック→「OAuthクライアント ID」を選択
  5. OAuthクライアント ID をセットアップする
  • アプリケーションの種類:ウェブアプリケーション
  • 名前:(任意)Simple GA4 Ranking など
  • URL1:アクセスランキングを表示させたいサイトのURL
  • 承認済みのリダイレクトURL:(後で設定)
  1. 「作成」をクリック
  2.  「Client ID」、「Client Secret」をコピーする
手順1.プロパティID
手順3.Data APIの有効化
手順4.OAuthクライアント IDを選択
手順5.OAuthクライアント IDのセットアップ
手順6・7.作成完了

WordPressの設定をする

  1. WordPress の管理画面から [設定] → [ Google 認証] を表示する
  2. クライアントID・クライアントシークレットを入力(「Google Analyticsの設定をする」の7.)
  3. プロパティIDを入力(「Google Analyticsの設定をする」の1.)
  4. 「変更を保存」をクリック
  5. API認証の「認証する」をクリック
WP設定

エラーが出た時

私の場合、ここでエラーが出ました。

「このアプリはGoogle の OAuth 2.0ポリシーを遵守していないため、ログインできません。」というエラーでした。

OAuth2.0エラー

エラー文に表示された「https://~(flowName=GeneralOAuthFlowの前まで)」をコピーし、上記「Google Analyticsの設定をする」の5.の「承認済みのリダイレクトURL」に貼り付けます。

コピーしたURLを貼り付け

WordPressの設定に戻り、API認証の「認証する」を再びクリックすると、エラーは出ず、アクセストークンが発行され、設定完了です。

エラーなし

表示したい場所にショートコードを設置

私の場合はサイドバーに表示したかったので、

  1. WordPressの管理画面→「外観」→「ウィジェット」
  2. 表示させたい場所にブロックを追加→「ショートコード」→「
    1. 要らない服57点をベルメゾンの「kimawari fashion(キマワリファッション)」でリサイクル。ブランド品1品:200円、その他56点:234円要らない服57点をベルメゾンの「kimawari fashion(キマワリファッション)」でリサイクル。ブランド品1品:200円、その他56点:234円
    2. 【コラム】保育園の運営委員ってなに!?拘束時間は?どんなことする?〜保育園の運営委員 体験記〜【コラム】保育園の運営委員ってなに!?拘束時間は?どんなことする?〜保育園の運営委員 体験記〜
    3. 【写真付き】荻窪タウンセブンあおぞらぱーく お買物ついでに、大人が休める遊び場【写真付き】荻窪タウンセブンあおぞらぱーく お買物ついでに、大人が休める遊び場
    4. 【2回目の利用】ベルメゾン(Bell Maison)のkimawari fashion(キマワリファッション)で不要な服 22点の買取結果はブランド品1品:200円 その他21点:120円【2回目の利用】ベルメゾン(Bell Maison)のkimawari fashion(キマワリファッション)で不要な服 22点の買取結果はブランド品1品:200円 その他21点:120円
    5. 【写真付きレポ】子ども・子育てプラザ天沼 比較的狭めだが、たくさん遊べる【写真付きレポ】子ども・子育てプラザ天沼 比較的狭めだが、たくさん遊べる
    6. カバーなし絵本を中心に古本28冊をバリューブックスで査定してもらった結果カバーなし絵本を中心に古本28冊をバリューブックスで査定してもらった結果
    7. 杉並区の「待機児童」は0だけど「入園決定率」は84.0%。『100都市保育力充実度チェック』(2023年版)のデータから保活事情を読み解く杉並区の「待機児童」は0だけど「入園決定率」は84.0%。『100都市保育力充実度チェック』(2023年版)のデータから保活事情を読み解く
    8. 保活中なら絶対チェックしてほしい!「指数一覧」と「利用申込状況」で保育園内定への対策を立てよう保活中なら絶対チェックしてほしい!「指数一覧」と「利用申込状況」で保育園内定への対策を立てよう
    9. Happyをシェアする お買物メモアプリ「Happy Shared Shopping(ハピシェア)」公式ページ【ios・Android対応!】Happyをシェアする お買物メモアプリ「Happy Shared Shopping(ハピシェア)」公式ページ【ios・Android対応!】
    10. Google Paymentsからの「税法上の居住地における追加の税務情報が必要です」は郵便番号記載で解決したGoogle Paymentsからの「税法上の居住地における追加の税務情報が必要です」は郵便番号記載で解決した

なお、「アクセスランキング」というタイトル文字はブロック選択からHeadを選択して表示させています。

表示完了!となりました。

Shifterの場合はジェネレート時のランキング表示

私はShifterという静的WordPressサービスを利用しています。

通常はサイトがダウンしている状態なので、表示されているランキングはユーザーがサイトを訪問した時点のものではなく、Shifterでジェネレートした時点のもの、ということになります。

私の場合は毎日のようにサイトを更新し、Shifterをジェネレートしているので、特に問題ないという判断です。