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

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

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

ユニバーサル アナリティクス停止に伴う「Simple GA Ranking」プラグインのご利用...

2023年7月1日で、Google が提供する Google アナリティクスのユニバーサル アナリティクスによる計測が停止します。同時に Google アナリティクス 4 (以下、『GA4』) への切り替えが行われます。

labworks.digitalcube.jp

しかし、「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のサービスによって違うかもしれません。

Google Analyticsの設定をする

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

[UA→GA4] 移行ガイド: 初心者向け - アナリティクス ヘルプ

このガイドの手順に沿って GA4 に移行してください。新しい GA4 プロパティを作成し、目標を GA4 に移行します。移行がすでに完了していても、移行に関する通知が引き続き表示される場合は、こちらの手順に沿って...

support.google.com

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：（後で設定）

6. 「作成」をクリック
7.  「Client ID」、「Client Secret」をコピーする

WordPressの設定をする

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

エラーが出た時

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

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

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

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

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

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

1. WordPressの管理画面→「外観」→「ウィジェット」
2. 表示させたい場所にブロックを追加→「ショートコード」→下記を記入

[sga_ranking]

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

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

アイキャッチ・順位数表示に対応した記事はこちら

文字だけの表示だと少し寂しいので、アイキャッチ画像を表示させました。
ただ、アイキャッチ画像を表示させると順位数の表示が消えてしまったので、その対応も合わせて行った記事はこちらです。

Simple GA4 Rankingを使ってランキング表示～アイキャッチ・順位数の表示～

先日の記事で、Google Analyticsのデータを引っ張ってきてランキング表示するために、プラグイン「Simple GA4 Ranking」を使って表示する方法をまとめました。ただ、これだけだと文字だけの味気ないものになって...

www.copotal-factory.jp

2024.06.24

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

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

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

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