Simple GA Ranking の導入・設定方法〜綺麗に表示するためのCSS例を紹介

人気記事ランキングの表示プラグインで「サーバー負担が少ない」として人気の『Simple GA Ranking』をこのブログにも導入してみました。

Simple GA Ranking

このプラグイン、初めの設定があれこれ少し面倒なので、これから導入する人向けに手順解説記事を残しておこうと思います。

爆発的なアクセスを狙うトレンドブログの場合、人気記事ランキングを表示させるなら恐らくこれに代わるものは今のところないのでは? と思います。

一応、公式のプラグイン解説ページへのリンクも貼っておきます。(説明が分かりづらいです)
リンク Simple GA Ranking

Simple GA Ranking導入方法

プラグインをインストールすると、ダッシュボードの上部に下図の表示が出ますので『setting panel』をクリックして「Google Analytics設定」の画面を開きます。

Simple GA Ranking

「Google Analytics設定」の画面で『Google API Console』をクリックします。

Simple GA Ranking

下図のような「Google APIs」の画面が出るはずなので、『プロジェクトを作成』からプロジェクトの作成をしていきます。

Simple GA Ranking

プロジェクト名を入力して『作成』します。

Simple GA Ranking

すると、しばらく画面が更新されない状態が続くかと思いますが、画面右上のところにある「お知らせ」の鈴マークが処理中であることを示してくれています。(ここの動きが止まっているのに画面が変化しない場合はブラウザを更新してみてください)

Simple GA Ranking

今作ったプロジェクトが選択できる画面が表示されたら、クリックして選択し、プロジェクトの内容を設定していきます。

Simple GA Ranking

たしか「ライブラリ」の画面が表示されるので(もし表示されなければライブラリのページを探してください)、その画面で『Analytics API』をクリックします。

Simple GA Ranking

Analytics API を有効にします。

Simple GA Ranking

『認証情報を作成』します。

Simple GA Ranking

プロジェクトへ認証情報を追加する画面では、このページでの設定をスキップ(何もしない)して『クライアントID』をクリック。

Simple GA Ranking

『同意画面を設定』に進みます。

Simple GA Ranking

このページでは「メールアドレス」と「ユーザーに表示するサービス名」のみ入力すればOKです。

Simple GA Ranking

「クライアントIDの作成」画面で、アプリケーションの種類は「ウェブアプリケーション」を選択。
それと「承認済みのリダイレクトURI」という項目があるので、……(次)

Simple GA Ranking

そこに、ブログの方で表示されてた下図「Google Analytics設定」の「コールバックURL」をコピーして貼り付けます。

Simple GA Ranking

コールバックURLを貼り付けてクライアントID作成ができたら、下図のように「OAuthクライアント」が表示されるので、上下両方の項目をコピーして、ブログの方へ貼り付けます。

Simple GA Ranking

Simple GA Ranking

『トークンを取得』をクリックするとGoogleアカウントの承認画面が出るので『許可』します。

Simple GA Ranking

これでトークンの取得は完了。
あとはブログの方でAnalyticsから統計データを利用するアカウント・プロパティを選択(ラジオボタンにチェックを入れる)して設定を保存すれば終了です。

Simple GA Ranking

プラグインの裏側の設定に関してはこれで完了なので、後はブログにどう表示させるかの問題だけです。

一番簡単な表示方法はウィジェットでの設置

一番簡単で僕が使っている表示方法はウィジェットによる表示です。

まずダッシュボードの設定から Simple GA Ranking の設定画面を開いて、何日前からのデータで集計するか? ランキングは何件表示するか? を入力して設定保存。

Simple GA Ranking

次にウィジェット設定の画面で、左側の利用できるウィジェット項目に「Simple GA Ranking」というものが表示されているので、それを任意の場所に移動させて表示させます。

Simple GA Ranking

Simple GA Ranking

すみません、ここまでの段階では上図のような表示デザインにはならないことを忘れていました。

デフォルトのままでは表示がダサくて使いものにならないと思うので、参考までに以下、このブログで書いている CSS を紹介しておきます。

SGAランキングを綺麗に表示させるCSS例

このブログで Simple GA Ranking用に書いている CSS は次の通りです。

/* Simple GA Ranking 参考https://prime-dict.com/?p=1178 */
#sidebar ol.sga-ranking {
counter-reset: pupular-ranking;
padding-left: 0;
}
 
li.sga-ranking-list {
position: relative;
font-size: 13px;
margin-bottom: 10px;/* 下の記事との間 */
border-bottom: 1px dotted #666;/* 区切り線の仕様(色と線種) */
padding-bottom: 5px;/* 区切り線と記事の間 */
}
 
li.sga-ranking-list:before {
background: none repeat scroll 0 0 #008080;
color: #fff;
content: counter(pupular-ranking, decimal);
counter-increment: pupular-ranking;
font-size: 13px;
left: 0;
top: 0;
line-height: 1;
padding: 4px 7px;
position: absolute;
z-index: 1;
border-radius: 5px;
}

.widget .sga-ranking-list a {/* 記事の文字部分 */
padding-left: 30px;/* ランキング数字との間 */
display: block;
color: green;/* フォントカラー */
}

同じ Simplicityテーマを使っている初心者さんは丸々コピペして使ってもらっても構いませんので、参考にしてみてください。


以上です、
ではまた

コメント

  1. 鳳梨de中國 より:

    こんにちは。Google 検索からやってきました。
    私のサイトでもPopular Postsプラグインが足を引っ張っていたので,こちらを参考にさせていただきました。Simple GA Rankingに変えたところ、サーバからの反応がだいぶ早くなりました。

    ただ、Simple GA Rankingを使うと軽くなるもののサムネイルがなくなって寂しいですね。されど、サムネイル取得をさせるとその分だけ重くなるのでSimple GA Rankingを入れた目的と相反しちゃうので悩ましいです。

    • ぴらひこ より:

      鳳梨de中國さん
      コメントありがとうございます。
      サムネイル、意外と悩ましかったりするところですよね。

トップへ戻る