この記事は約 17 分で読めます。
※旧アナリティクス(ユニバーサルアナリティクス)の計測停止に伴い、2023年7月1日以降のデータについては本プラグインでは計測できません。本記事更新日時点で後継の「Simple GA4 Ranking」については正式リリースがされておらず、正常動作を確認できておりません。
本記事ではWordPressで軽量・正確に人気記事一覧を表示させるためプラグイン「Simple GA Ranking」の設置方法から、より便利に使うためのカスタム方法についてお伝えします。
Simple GA Rankingを導入するメリットを簡単にまとめると以下になります。
- WordPressのデータベースを利用しないため軽量に動作
- Googleアナリティクスのデータを利用するため数値が正確
- 表示に関するカスタム自由度が高い
軽量で正確に表示できる理由はズバリ、データの取得にGoogle Analytics APIを利用しているからですね。
従来のWordPressで人気記事一覧を表示するプラグインの場合、訪問者のアクセスデータをDBに書き込み(貯め込み)、ランキングデータを表示する際にDBから都度情報を取得して表示させる仕様となっています。
記事ページを開くたびに処理が行われるため、サーバー負荷が高くなり結果としてページ表示速度が重たくなる、というわけです。
一方で今回紹介するSimple GA RankingはWordPressのDBを経由せず、Googleアナリティクスのデータを基に人気記事ランキングを表示する仕組みとなっています。
それゆえサーバーに負荷をかけることなく軽量に動作して、様々な相性に左右されず、ランキングデータも正確に取れるというわけですね。
初期設定がやや複雑な印象がありますが、それを除けばSimple GA Rankingで運用するメリットは大きく、特にアクセス数が多いサイトを運営されている場合は導入する価値があるでしょう。
一応念のため補足ですが、Simple GA Rankingの導入に際しては説明するまでもなくGoogleアナリティクスをサイトに導入していることが前提になります。
前文が少し長くなりましたが、それでは設置方法について解説していきます。
※本記事は事業統合前のブルーアンドアソシエイツ社のエンジニアによって書かれた記事であり、本記事内で使用されている検証データ等は当時の内容となっておりますことをご了承ください。
目次
はじめに – Simple GA Rankingを導入する理由 –
WordPressで人気記事一覧を表示するプラグインでは「WordPress Popular Posts」が有名ですね。
筆者もいくつかのサイトで未だに利用させてもらっていますが、お手軽に導入できる反面、多くのデメリットも抱えています。
具体的な例を挙げると、
①サイト規模によってはページ表示速度が重たくなる
②カウントが不正確もしくは正常に取得できないことがある
③特定IPや訪問者の除外設定ができない
①の「サイト規模によってはページ表示速度が重たくなる」原因については、小規模でアクセス数が少ないサイトではあまり実感する機会はないかもしれませんが、大規模サイトで短時間に多くのPVが集中するサイトでは特に重たくなる傾向があるようです。
これはWordPress Popular Postsの仕組みにも関係してきますが、アクセス情報の書き込み・ランキングデータの表示を行うためのDB処理に起因していると思われます。
プラグイン側の設定である程度調整はできますが、サーバーに負荷を与える仕組みであることに変わりはありません。
②の「カウントが不正確もしくは正常に取得できないことがある」問題に関しては、筆者が運営している複数サイトで実際にその挙動を確認済みです。
「全くカウントされない」「ひとつの記事しかカウントが上がらない」など、様々な不具合が確認されています。
プラグインの削除・再インストールを行っても解消されませんでした。
不具合要因の特定には至っていませんが、恐らくは「サーバー側の設定」「DB周りの問題」「キャッシュ系プラグイン」「セキュリティ系プラグイン」のいずれかが原因になっていると思われます。
またこれら単独の要素が原因と言うよりは複数要因が絡み合った特定条件下で不具合が発生しているのかもしれません。
本格的に原因究明を行えば解決できる問題だとは思いますが、そこまでしなくてもいいでしょう・・・。
③の「特定IPや訪問者の除外設定ができない」に関しては本番サイトにおいて特定ページの検証やスピードテストのツールを通した際に除外設定が行えず、全てカウントされてしまうという問題がありました。
カウントする区分としてサイト訪問者、管理者、といったような分類はできるのですが、特定IPやログインユーザーを除外するといった設定ができないために、意図しないページのPVカウントが上がってしまうという問題です。
上記理由などもあり、以前からWordPress Popular Postsの使用をやめることを検討していました。
今回ご紹介するSimple GA Rankingが完璧というわけではありませんが、上記デメリットを解消できる上に「Googleアナリティクスと連携したデータ表示が可能」という点が気に入っています。
この方式なら新規サイト構築・サーバー移転を伴うサイト移設時やDB周りの様々な問題に左右されずにランキングデータをクリーンに取得・表示できます。
それでは次章よりSimple GA Rankingについて解説をしていきます。
Simple GA Rankingのインストール
Simple GA Rankingの設定にはいくつかの手順がありますが、順を追って解説していきます。
◆Simple GA Ranking公式サイト(日本語対応)
http://simple-ga-ranking.org/ja/
◆公式のプラグイン配布サイト
https://ja.wordpress.org/plugins/simple-ga-ranking/
レビュー数が少ないため、星評価は控えておきます。
WordPressのプラグイン新規追加ページの右上の検索窓に「Simple GA Ranking」と入力すると表示されますのでこちらをインストールして有効化してください。
「1年前から更新されていない」「 WP 5.0以降のverでテストされていない」という点が気になりますが、インストールを進めます。(筆者の環境はWP 5.2ですが問題なく動作しています)
インストールして有効化が完了すると、管理画面の設定に「Simple GA Ranking」「Analytics設定」の2項目が追加されます。
プラグインを利用するためには、Googleアナリティクスと連携させる必要があるため、「Analytics設定」を開いて設定を進めて行きます。
Analytics設定のページを開くと以下のような画面が表示されます。
まずは赤枠部分で示した「Google API Console」をクリックしてください。
クリック後、一旦この設定画面からは離れますが後ほど設定の最終段階で戻ってきます。
なお、この後Googleアナリティクスと連携作業を行うにあたり、事前にGoogleアカウントにログインしておくとよりスムーズに作業が行えますが、ここでは一旦ログインしていない体で進めます。
Googleアカウントにログインしていない場合は、ログインするように促されるためログインします。
ログイン後は暫くGoogle API Console上での作業が続きます。
・Google API Console
https://console.developers.google.com/project
次の章ではプラグインとGoogleアナリティクスを連携させるのに必要な「クライアントID」「コンシューマーシークレット」を発行して、トークンを取得するまでの作業について解説します。
Simple GA RankingとGoogle Analytics APIの連携
今回の導入手順の中で一番分かりにくい箇所がこの工程でしょうか。
Google API Console上での作業は慣れていない人にとってはやや難解に感じるかと思われますので、最初に簡単な作業フローを記載しておきます。
上記手順に沿って解説していきますが、作業フローを頭に入れた上でひとつずつ設定して行けば迷うことはないでしょう。
ひとつひとつの作業自体はとても簡単です。
画面遷移については一部は手動で遷移しますが、大半が入力・保存が完了すると順を追って画面遷移していくウィザード形式になっているため、迷いにくいフローになっていますね。
Google API Consoleの画面UIが環境によっては多少異なるケースもあるかもしれませんが、多少の差異は適宜判断していただければ幸いです。
Google APIのプロジェクト作成
現在の画面はGoogle API Consoleが表示されている状態かと思います。
まず最初に「リソースの管理」の隣にある「プロジェクトを作成」をクリックして、Simple GA RankingとGoogleアナリティクスを連携させるためのプロジェクトを作成します。
プロジェクト名は任意で好きな名前を入力してかまいません。
ここで入力する名前はあくまで機能面とは関係ない管理用のプロジェクト名ですが、今後のことを考えると分かりやすい名前にしておいた方がよいでしょう。
ここでは何のひねりもありませんが「Simple GA Ranking」と入力しました。
プロジェクト名を入力後、作成ボタンをクリックします。
作成が完了すると一覧に新しく作成したプロジェクトが表示されます。
通知にも「Simple GA Ranking」を作成、と表示されていますね。
こちらをクリックすると、Google APIのロゴ横に「Simple GA Ranking」が選択状態として表示されるようになります。
以降Simple GA Rankingプロジェクトが選択された状態で設定を進めていきます。
Google Analytics APIの有効化
続いて、ロゴ横のナビゲーションメニューのドロップダウンから「APIとサービス > ライブラリ」を開いてください。
ライブラリのページを開くとAPIライブラリ一覧が表示されるので、ページを下の方にスクロールして「Google Analytics API」をクリックしてください。
他にも似たような名前のAPIがありますが、間違えずに「Google Analytics API」を選択しましょう。
「有効にする」ボタンをクリックしてGoogle Analytics APIを有効にします。
OAuth同意画面の設定
Google Analytics APIを有効化すると以下のような設定ページが表示されます。
ここでは一旦右上に表示されている「認証情報を作成」をクリックしてみましょう。
※右上に「認証情報を作成」が表示されていない場合は左の管理メニューから「認証情報」をクリックしてください。
すると「プロジェクトへの認証情報の追加」という画面が表示されます。
ここで入力するのは3箇所です。
それぞれ以下のように選択してください。
使用するAPI
Google Analytics API
APIを呼び出す場所
ウェブブラウザ(Javascript)
アクセスするデータの種類
ユーザーデータ
選択が完了したら「必要な認証情報」をクリックします。
クリックすると「OAuth同意画面の設定」という画面が表示されます。
「認証情報を設定する前に先にOAuth同意画面を設定してね」と言われていますね。
ここは素直に「同意画面を設定」をクリックします。
「同意画面を設定」をクリックすると認証情報の設定ページでOAuth同意画面タブが開いた状態のページが表示されます。
OAuth同意画面で入力するのは2箇所だけです。
アプリケーション名
任意で好きな名前を入力します。
承認済みドメイン
サイトのドメイン名を入力します。
httpsやwww、そして末尾のスラッシュを除いた純粋なドメイン名のみを入れてください。
当サイトの例で言うと「blueasc.jp」となります。
※本記事を書いた当時のドメインです。(編集者注)
ここでひとつ注意点があります。
ドメイン名を入力した後は必ずEnterキーを押してください。
筆者は最初ドメイン名を入力して、保存ボタンをクリックしましたが反映されないので一瞬だけ嵌りました。
※Enterキーで確定させないと上記図のような追加した状態になりません。
アプリケーション名とドメイン名の入力が完了したら「保存」ボタンをクリックします。
これでOAuth同意画面の設定は完了です。
クライアントIDの作成
続いて「クライアントID」の作成を行います。
先ほどのOAuth同意画面の保存をクリックすると自動的に「認証情報」タブに画面が切り替わっているかと思います。
表示されているボックス内の「認証情報を作成」ボタンをクリックすると、ドロップダウンでいくつか項目が表示されますが、その中から「OAuthクライアントID」をクリックしてください。
クライアントIDの作成画面に切り替わります。
ここで入力するのは3箇所です。
アプリケーションの種類
ウェブアプリケーションを選択してください。
名前
任意で好きな名前を入力してください。
承認済みのリダイレクトURI
WordPressのAnalytics設定画面に表示されていた「コールバックURL」をコピペして入力してください。(図1を参照)
先ほどの箇所でもありましたが、URLを入力した後は必ずEnterキーを押してください。
※Enterキーで確定させないと上記図のような追加した状態になりません。
入力を完了して、ページ下部にある「保存」ボタンをクリックすると、画面が切り替わり「クライアントID」と「クライアントシークレット」(コンシューマーシークレット)が表示されます。
欲しかったのはこれですね。
Google API Console上での作業は一旦これにて終了です。
ここに表示されている「クライアントID」と「クライアントシークレット」をプラグインの設定画面に入力するわけですが、この時に少し注意点があるため併せて次の章で解説します。
WordPress管理画面上でのAnalytics設定
ここまで辿り着けば残す設定はあと僅かです。
難しいことではないのですが、補足しておいた方がよさそうな箇所が2点あるため、補足を交えつつ解説していきます。
まずは先ほど取得した「クライアントID」と「クライアントシークレット」をWordPressのAnalytics設定画面内の該当箇所にそれぞれ入力します。
この際にひとつ目の注意点があります。
先ほどの画面でから「クライアントID」と「クライアントシークレット」のテキストをコピーして利用することかと思いますが、、、
テキストコピーする際に文字列の先頭に半角スペースが入った状態でコピーされてしまうため、そのままペーストすると認証が通らずエラーとなってしまいます。
地味に嵌りやすいポイントなので、コピペの際は先頭の半角スペース削除を忘れないように気を付けましょう。
筆者も例に漏れず一度嵌りました(笑)
正しく入力した後に「トークンを取得」ボタンをクリックすると「完了!」
とはならず、、、Googleアナリティクスとの連携を許可するかどうか確認する画面が表示されます。
作業前にGoogleアカウントにログインした状態でも、再度許可するかどうかの確認が入ります。
とりあえず今回使用するアカウントを選択します、、、
筆者の環境ではアカウント選択後に以下のようなアラートが表示されました。
環境や事前設定状況によっては出ない人もいるかと思いますが、念の為解説しておきます。
画面内にも記載がありますが「確認リクエスト」を送信しておくと表示されないのでしょうかね。
ここでは設定を進める必要があるため、「詳細」をクリックします。
「blueasc.jp(安全ではないページ)に移動」をクリックします。
するとようやくGoogleアナリティクスへのデータアクセスを許可する画面が表示されました。
※下記図は既に許可後の画面キャプチャです。
「許可」をクリックします。
WordPressのAnalytics設定画面にGoogleアカウントに紐付いているGoogleアナリティクスのプロパティとビューが表示されたら無事連携は完了です。
表示されているビューの中からプラグインを導入しているサイトと同じドメインのビューを選択して「保存」します。
ひとつのアカウントで複数サイトの管理をしている場合は、複数のプロパティとビューが表示されますが間違えないようにしてください。
別サイトのビューを選択しても、同然ですが正常に動作しません。
Simple GA RankingとGoogle Analytics APIの連携に関する設定は以上です。
Simple GA Rankingの設置方法
ここからはサイトに人気記事ランキングを表示させる方法について説明します。
Simple GA Rankingを利用して人気ランキングを表示させるには主に下記の3通りの方法があります。
- ウィジェットで設置する
- ショートコードで設置する
- テンプレート内にプラグインの関数を記述して設置する
ウィジェットで設置する方法
最も設置方法が簡単なのがウィジェットでの設置です。
管理画面の外観 > ウィジェットを開きます。
ページ中ほどに「Simple GA Ranking」のウィジェットがありますので、クリックして開いて設置したいサイドバーを選択して「ウィジェットを追加」をクリックします。
ここではブログ記事のサイドバーに表示させたいので、ブログ用サイドバーを選択しました。
サイドバー内にウィジェットが追加されました。
タイトルに任意の見出しを入力して保存します。
ここでは「よく読まれている記事」と入力して保存しました。
ウィジェットへの追加は以上で完了ですが、最後に表示オプションに関する設定を行います。
管理画面の設定 > Simple GA Rankingを開きます。
ここで行える設定箇所は2箇所だけです。
何日前までのランキングデータを表示させるか
例えば、90日と設定した場合は過去90日分のデータを参照してランキングが表示されます。(未入力の場合、30日となるようです)
表示数
ランキングの表示件数です。(未入力の場合、10件となるようです)
ここで1点「Simple GA Ranking」ウィジェット で設置する際の注意点をお伝えしておきます。
この方法で設置した場合、ブログ記事だけではなくサイト内の全ページを対象としたランキングが表示されてしまいます。(トップページは除外されます)
例えば通常の固定ページでPVが多いページがあった場合、それらも含んだランキング表示となるため、ブログ記事のみを対象にランキングを表示したい場合はショートコードで設置する必要があります。
ショートコードでの設置方法については次項で詳しく解説しますが、ランキング表示対象をブログ記事内のみに限定したい場合は「カスタムHTML」のウィジェットを選択した上で以下の1行を記述してください。
[[sga_ranking post_type=”post”]]
以上でウィジェットへの設置は完了します。
ショートコードで設置する方法
続いてショートコードで設置する方法について解説します。
設置の簡単さと表示カスタム自由度の高さを考慮すると、使い勝手が良いのはショートコードでの設置かもしれません。
固定ページや記事ページ内で設置する場合は以下のような1行のショートコードで表示させることが可能です。
[[sga_ranking]]
PHPテンプレート内でショートコードを呼び出す場合は以下のようになります。
<?php echo do_shortcode(‘[ sga_ranking ]’); ?>
ショートコードで設置するメリットとして、複数の引数(パラメータ値)を渡すことで自由に表示カスタムを行うことが可能となっています。
例えば以下のような条件の場合、
- 記事ページ(post)から集計
- 90日前までのデータを集計
- 表示件数は3件
ショートコードは以下のようになります。
[[sga_ranking post_type=”post” period=”90″ display_count=”3″]]
そしてこのショートコードを実際に出力した場合は以下のようになります。
[sga_ranking post_type=”post” period=”90″ display_count=”3″]
ちなみにショートコードに引数を指定しない場合は、プラグイン設定画面で指定値が反映されます。
なお上記についてはサムネイル画像の表示を含めて一部CSSを調整した状態ですが、表示に関する部分は別途調整する必要があります。
公式サイトにはより多くの情報が掲載されていますので、詳しくは公式サイトをご確認ください。
◆Simple GA Ranking公式サイト(日本語対応)
http://simple-ga-ranking.org/ja/
テンプレート内にプラグインの関数を記述して設置する
上記2つの方法と比べるとややカスタム難易度は上がりますが、最もカスタム自由度が高いのがテンプレート内に直接関数を記述して設置する方法です。
この方法の場合、出力するHTMLソースの形式を含めたより自由な制御を行うことが可能です。
記事IDから各種情報を取ってこれたり、いくつかのフィルターフックが用意されいます。
「自由度が高い」とは言っても提供されている機能以外のことはできませんが、それでもランキング一覧を表示する分には申し分のないカスタムには対応していると思います。
こちらも詳しくは公式サイトをご確認ください。
◆Simple GA Ranking公式サイト(日本語対応)
http://simple-ga-ranking.org/ja/
人気記事一覧にサムネイル画像を表示させる方法
一般的には「サムネイル画像付きで記事一覧を表示させたい」という要望があると思います。
プラグインにサムネイル表示機能が付いていないのは意外な感じもしますが、対応方法はとても簡単です。
以下の2つのソースコードをコピペするだけで完了します。
- functions.phpにソースコードをコピー
- style.cssにCSSコードをコピー
それではこの2点の作業について解説していきます。
functions.phpにソースコードをコピー
見出しにあるように、functions.phpの末尾に以下のソースコードを丸ごと追加してください。
//Simple GA Rankingにサムネイル画像を表示 add_filter('sga_ranking_before_title', 'showImage', 10, 3); function showImage($ret, $id, $cnt) { $post_url = get_permalink($id); //記事のURL $title = get_the_title($id); //記事タイトル $ret = ""; if(has_post_thumbnail($id)) { //アイキャッチ画像がある場合の処理 $post_thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($id),'thumbnail'); $post_thumb = $post_thumb_src[0]; $ret = "<a href=\"{$post_url}\" title=\"{$title}\"><img src=\"{$post_thumb}\" alt=\"{$title}\" title=\"{$title}\" class='ranking-img'></a>"; } return $ret; }
一応仕組みについて簡単に補足しておくと、
「sga_ranking_before_title」というフィルターフックを利用して、記事タイトルの前に(アイキャッチ画像があれば)サムネイル画像を表示するHTMLコードを追加する、という処理行っています。
imgタグにはCSSで見栄えを調整するための「ranking-img」クラスを付けています。
style.cssにCSSコードをコピー
こちらも見出しにあるように、style.css(追加対象のCSSファイルは任意)の末尾に以下のソースコードを丸ごと追加してください。
.ranking-img { width: 60px; height: 60px; float: left; margin: 3px 15px 10px 0; } li.sga-ranking-list { line-height: 1.2; margin-bottom: 0.3em; padding: 8px 0 5px 0; border-bottom: 1px solid #eee; word-wrap: break-word; overflow: hidden; float: none; clear: both; } li.sga-ranking-list a { font-size: 12px; font-weight: bold; } li.sga-ranking-list:last-child { border: none; }
CSSの調整に関しては当サイトのサイドバー内に設置しているスタイルに準拠していますが、サムネイル画像サイズやリスト要素間の余白や罫線の色など、ご自身のお好みで調整いただけるようになっています。
文字サイズなども適宜変更してご利用ください。
画像についてはサイズを変更してもレイアウトは崩れないようになっていますが、HTML側のソース構造自体を変更する場合はそれに合わせてCSSも適宜調整してください。
表示カスタムについては以上です。
まとめ
今回の記事ではWordPressの人気記事を表示させる「Simple GA Ranking」プラグインの導入から設置方法、表示カスタムについて紹介しました。
ひとつひとつの手順自体は難しくはないのですが、何となく難解に感じるのは恐らくGoogle API ConsoleのUIのせいだと思います。(笑)
筆者の運営サイトは大半が小中規模なので、、、残念ながら表示速度の差を如実に体感する機会はまだ無いのですが、WordPress Popular PostsとSimple GA Rankingとでは「そもそもの処理のロジック」が異なるため、理論値で考えても表示速度に差が出ることは間違いありません。
優秀なプラグインと言ってよいSimple GA Rankingですが、気になる点があるとすれば、以下が挙げられるでしょうか。
「1年以上プラグインの更新がないこと」
「WordPressの直近のメジャーリリースに対してテストされていないこと」
クライアント案件で導入する際、運用ルールが厳しい場合は利用は見送る必要があるかもしれませんね。
この辺りは制作者の方に頑張ってもらいたいですね。
というわけで、今回はGoogleアナリティクスと連携してブログの人気記事ランキングを軽量かつ正確に表示させることができる「Simple GA Ranking」プラグインのご紹介でした。
以下参考までに今回インストールした環境を記載しておきます。
◆開発環境
Simple GA Ranking:2.0.10
WordPress version:5.2.2
PHP version:7.1.14
MYSQL:5.6.23
Web server:Apache
Server OS:Linux
※旧アナリティクス(ユニバーサルアナリティクス)の計測停止に伴い、2023年7月1日以降のデータについては本プラグインでは計測できません。本記事更新日時点で後継の「Simple GA4 Ranking」については正式リリースがされておらず、正常動作を確認できておりません。
弊社では、企業サイトや採用サイトの制作、WordPress構築、shopifyを活用したECサイト構築を得意としています。ホームページ制作やリニューアル、サイト運用に関する無料相談を承っていますのでお気軽にご相談ください。
無料で相談してみる