PR

Simple GA Rankingのインストールと設定

スポンサーリンク
スポンサーリンク

Simple GA Ranking

ページ表示速度を低下させずに人気記事ランキングが作成できるWordPressプラグイン「Simple GA Ranking」の設定と使い方をご紹介します。

人気記事ランキング作成用のWordPressプラグインといえば、WordPress Popular Post が有名ですが、このプラグインは重いのでページ表示速度が低下するという欠点があります。

Simple GA Rankingは、Googleアナリティクスのデータを使って軽快に動作するので、ページ表示速度を低下させずに人気記事ランキングを作成することができます。

ランキングの集計期間や記事の表示数も自由に変更可能で、コードのパラメータをいじって固定ページを含めることや、カテゴリを絞り込んだ表示、さらにカスタマイズによってサムネイル画像を表示させることも可能です。

いわしブログでもSimple GA Rankingをカスタマイズして、サイドバーに設置した週間人気記事ランキングにサムネイル画像を表示させています。

Simple GA Ranking サムネイル

Googleアナリティクスのデータを使うためには、事前にGoogle API の設定が必要になります。少し面倒ですが、この記事に従って設定すれば大丈夫ですよ。

あと、当然ながらSimple GA Rankingは、Googleアナリティクスを設置しているサイトでないと使えないのでご注意を。

スポンサーリンク

Simple GA Ranking インストール

では、Simple GA Rankingを設定していきます。まずはインストールから。

ダッシュボード左「プラグイン」→「新規追加」から「Simple GA Ranking」で検索して「今すぐインストール」をクリックします。

Simple GA Ranking インストール

プラグインをインストールすると、管理画面上部に「Simple GA Ranking is available OAuth2 authorization. Please set on setting panel. ClientLogin is no longer available. Please see this link」というメッセージが表示されます。

メッセージ内のリンク「setting panel」をクリックしてください。

Simple GA Ranking 管理画面メッセージ

Analytics API プロジェクト作成

次に「Google Analytics設定」に移りますが、その前にコールバックURLをコピーしておいてください。このURLは後ほどOAuth クライアントIDの取得で必要になります。

Simple GA Ranking コールバックURL

続いて「Google API Console」をクリックしてAPIの設定に移りますが、互いにURLやIDのコピペが必要なので、両方の画面を開いて設定すると便利です。

Simple GA Ranking  Google Analytics設定

Googleアカウントでログインします。アカウントが複数ある場合は、Simple GA Rankingを設置するサイトのGoogleアナリティクスに紐付いたものを選択してください。

Googleアカウント ログイン

Googleの利用規約に同意してください。「利用規約」にチェックを入れ、「最新情報をメールで通知」のどちらかを選んで「承諾」をクリックします。

Google API 利用規約の承諾

まず最初にGoogle API 管理画面の「プロジェクトを作成」をクリックしてください。

Google API プロジェクトを作成

「新しいプロジェクト」でプロジェクト名を入力して「作成」をクリックします。

Google API 新しいプロジェクト

新しいプロジェクトが追加されました。追加されない場合は、ページを再読込してください。

Google API 新しいプロジェクト

スポンサーリンク

Analytics API を有効化

続いてAnalytics API を有効化します。作成したプロジェクトをクリックします。

Google API 新しいプロジェクト

プロジェクト「iwashiblog-ranking」の権限から左上のメニューを開きます。

Google API プロジェクトの権限

メニュー内の「APIとサービス」から「ダッシュボード」をクリックします。

Google API メニュー

ダッシュボードから「APIとサービスの有効化」をクリックします。

Google APIとサービスの有効化

APIライブラリの一覧が表示されるので、下の方にある「Analytics API」をクリックします。

APIライブラリ Analytics API

「有効にする」をクリックして、Analytics API を有効化します。

Analytics API 有効化

Analytics API 認証情報を追加

次に、Analytics API 認証情報を追加します。ここで手順を間違えると、Analytics APIとプラグインとの連携に失敗するので注意してください。

Analytics API の概要上部に「このAPIを使用するには、認証情報が必要になる可能性があります。」というメッセージが表示されているので、「認証情報を作成」をクリックします。

Analytics API 認証情報を作成

「プロジェクトへの認証情報の追加」から認証情報を設定します。

使用するAPIは「Analytics API」、APIを呼び出す場所は「ウェブブラウザ(Javascript)」、アクセスするデータの種類は「ユーザーデータ」を選択して、「必要な認証情報」をクリックします。

Analytics API 認証情報の追加

次に、OAuth2.0 クライアントIDを作成しますが、ここでは2つ注意点があります。入力したURLは認識に少し時間がかかります。右側にゴミ箱アイコンが表示されたらOKです。

あと、承認済みのJavaScript生成元は、下層部分を入れずに入力してください。いわしブログは2層のディレクトリ構造ですが、ドメインの部分だけ入力します。

正しい:https://wind-mill.co.jp
間違い:https://wind-mill.co.jp/iwashiblog/

名前は好きなものを入力、承認済みのJavaScript生成元は設置するサイトのURLを、承認済みのリダイレクトURLは先程コピーしたコールバックURLを貼り付けて、「OAuth クライアントIDを作成」をクリックします。

Analytics API OAuthクライアントIDの作成

貼り付けるリダイレクトURLは、ここでコピーしたコールバックURLです。

Simple GA Ranking コールバックURL

続いて、OAuth2.0 同意画面の設定です。メールアドレスはそのまま使用、ユーザーに表示するサービス名も好きなように入力して「次へ」をクリックします。

Analytics API OAuth2.0 同意画面の設定

最後の認証情報ダウンロードですが、ここはスルーしてそのまま「完了」します。

Analytics API 認証情報ダウンロード

スポンサーリンク

Analytics API クライアントIDとトークン取得

最後にOAuth2.0 クライアントIDを取得して、Simple GA Rankingとの連携を行いましょう。まずは作成したクライアントID名をクリックします。

Analytics API クライアントID取得

ウェブアプリケーションのクライアントIDとクライアントシークレットをコピーします。

Analytics API クライアントID取得

Simple GA Rankingに戻り、クライアントIDとコンシューマーシークレットに貼り付けて「トークンを取得」します。

ここも注意点があります。IDとシークレット入力の際は、スペースが入らないようにしてください。文字列をコピーした時に、前後にスペースが付いていると認証エラーになります。

Simple GA Ranking トークン取得

アカウントの選択から、表示されたドメインに紐付いたアカウントでログインします。

Googleログイン

Googleアカウントのリクエストを「許可」してください。

Googleアカウント リクエストの許可

「トークンの取得に成功しました」と表示されたら、Google APIとの連携成功です。

Simple GA Ranking トークン取得成功

サイトの設定で人気記事ランキングを表示させるアカウントを選びます。複数ある場合は、選択を間違えるとランキングが表示されないのでご注意を。

Simple GA Ranking サイトの設定

人気記事ランキングの表示と設定

Simple GA Ranking 人気記事ランキング表示

人気記事ランキングをサイトに表示する方法は3つあり、「ウィジェット」を使う、「ショートコード」を使う、テーマファイルにコードを記述する方法があります。

コードにはパラメータを含めることが可能で、ランキング表示数や期間だけでなく、固定ページ追加、カテゴリの絞り込み、投稿タイプやタクソノミーも選択できます。

また、フィルターフックを使えば、ランキング表示のカスタマイズを行うこともできます。

詳しい設定方法は、Simple GA Rankingのプラグイン公式ページを参照してください。

まずはランキング集計期間と表示数を設定します。ダッシュボード左から「設定」→「Simple GA Ranking」に進み、各項目に数値を入れて設定します。

期間は月間ランキングであれば30日、週間であれば7日で設定します。表示数はランキングのスペースと、表示させる場所との兼ね合いで決めてください。

Simple GA Ranking 設定

ウィジェットでランキング表示

まずはウィジェットを使って、サイドバーにランキングを表示させてみます。

ダッシュボード左「外観」→「ウィジェット」に進み、「Simple GA Ranking 」のウィジェットをサイドバー領域にドラッグドロップします。あとは好きなタイトルを入れて「保存」すればOKです。

Simple GA Ranking ウィジェット設定

ライブプレビューで見ると、ちゃんとランキングが表示されていますね。

Simple GA Ranking 人気記事ランキング表示

ショートコードでランキング表示

ランキングの表示方法は、他にもショートコードを使う方法や、関数を使う方法があります。

ショートコードの場合は、ランキングを表示させたい場所に[sga_ranking]ショートコードを設置すればOKです。一例として、カテゴリーを「wordpressプラグイン」に限定した以下のランキングを表示させてみます。

Simple GA Ranking カテゴリー別人気記事ランキング

ショートコードの作成ですが、集計期間は7日、表示数は5、カテゴリーを「wordpressプラグイン」に限定したパラメータを追記して、表示させたい場所に貼り付けます。

[sga_ranking period="7" display_count="5" category__in="wordpress-plugin"]

ウィジェットなら簡単にランキングを設置できますが、ショートコードを使えば、カテゴリや投稿タイプ、タクソノミーの表示など、さらなる設定が可能になります。

関数でランキング表示

「sga_ranking_get_date()」は、テーマファイルにコードを記述してランキングを表示するための関数です。テーマ内のランキングを表示させたい場所に以下の関数を記述します。

この関数もパラメータが使えるので、上のショートコードと同じ表示条件を設定しました。表示数は5、集計期間は7日、カテゴリーは「wordpressプラグイン」限定です。

<?php
$args = array(
    'display_count' => 5,
    'period'        => 7,
    'category__in'  => 'wordpress-plugin'
);
$ranking_data = sga_ranking_get_date($args);
if (function_exists('sga_ranking_get_date')) {
    $ranking_data = sga_ranking_get_date();
    if ( !empty( $ranking_data ) ) {
        echo '<ol>';
        foreach ( $ranking_data as $post_id ) {
            echo '<li><a href="' . esc_attr(get_permalink($post_id)) . '">' . esc_html(get_the_title($post_id)) . '</a></li>';
        }
        echo '</ol>';
    }
}
?>
スポンサーリンク

Simple GA Ranking のカスタマイズ

Simple GA Ranking は、フックの使用やCSSの追記によって、ランキング表示をカスタマイズすることが可能です。

また、使用テーマによってはCSSで表示を修正する必要があります。ランキング表示のタグは「ol」ですが、いわしブログでは順位が表示されなかったので、CSSで修正しました。

#sidebar ol{
	list-style: decimal;
	padding-left:2em;
	font-size:0.85em;
}

フォントサイズを下げて、タイトルの長さも調整しています。カスタマイズに使うclass名ですが、olタグは「.sga-ranking」、liタグは「.sga-ranking-list」となっています。

また、ランキングのタイトル前後をカスタマイズできるフィルターフックがあるので、これを用いて記事のサムネイルを表示するといったことも可能です。

Simple GA Ranking まとめ

Simple GA Rankingは設置までの手順が少し難しいからか、同じ人気記事ランキング作成プラグイン「WordPress Popular Post」ほどの人気はありません。

しかし、WordPress Popular Postは動作が重くてサーバーに負担がかかるため、ページ速度向上のために外すべきプラグインとして挙げられることも多いです。

Simple GA Rankingはカスタマイズ性が高く、何より軽快に動作するので、ページ表示速度を低下させないことが大きなメリットです。

WordPressで人気記事ランキングを作成するなら、WordPress Popular Postよりも軽快に動作する「Simple GA Ranking」をオススメします。

タイトルとURLをコピーしました