Movable Typeプラグイン「AccessRankingGA」でアクセスランキングを作りました

Google Analyticsのレポートデータを元にアクセスランキングを生成する「AccessRankingGA」プラグインを導入しました。
(( 2015/07/09 追記 )) 現在当サイトでは以下のプラグインは使用していません。
AccessRankingGA(バージョン0.5)を使いました。
JSONファイルの読み込みがなかなかできず苦戦しましたが、jQueryファイルを修正したら解決しました!
ダウンロード
こちらからプラグインをダウンロードして解凍。
インストール
mtインストールディレクトリに「AccessRankingGA」をアップロード。
- /plugins
cssファイルとjsファイルは任意のディレクトリにアップロード。
- /mt-static/css/widget-accessranking.css
- /mt-static/js/jquery.rankingtab.js
プラグイン設定
Google Analyticsのレポートデータ取得に必要な項目を設定します。
ブログの「ツール」→「プラグイン」→「AccessRankingGA X.X」の「設定」をクリックして設定項目を入力します。

Google Analyticsユーザ名 | (必須)Google Analyticsのログインメールアドレスを入力 |
---|---|
Google Analyticsパスワード | (必須)Google Analyticsのログインパスワードを入力 |
Google Analyticsプロファイル ID | (必須)プロファイルIDを入力(プロファイルID確認方法) |
エントリー最大表示数 | ランキングのエントリー表示数を入力 |
トップページ除外 | トップページを除外したい場合はチェックを入れる |
除外パスリスト | 除外したいカテゴリパス名や各ページの出力ファイル名を入力 |
JSONファイル出力用インデックステンプレート作成
Google Analyticsのレポートからデータを取得し、JSONファイルを生成します。
昨日・週間・月間のアクセスランキングを表示するため、3種類作成します。
ブログのダッシュボードで「デザイン」→「テンプレート」を選択し、「インデックステンプレートの作成」をクリックします。

昨日(1日)アクセスランキング用ファイル
テンプレート名 | 昨日アクセスランキング |
---|---|
テンプレートの内容 | <mt:AccessRankingGA span="1"> |
出力ファイル名 | accessranking_dayago.json |
公開 | 公開キュー経由 |
週間アクセスランキング用ファイル
テンプレート名 | 週間アクセスランキング |
---|---|
テンプレートの内容 | <mt:AccessRankingGA> |
出力ファイル名 | accessranking_week.json |
公開 | 公開キュー経由 |
月間アクセスランキング用ファイル
テンプレート名 | 月間アクセスランキング |
---|---|
テンプレートの内容 | <mt:AccessRankingGA span="30"> |
出力ファイル名 | accessranking_month.json |
公開 | 公開キュー経由 |
テンプレートを作成したら、再構築をして出力されたJSONファイルにアクセスして、Google Analyticsのレポートデータが取得出来ているか確認します。
プラグインの設定時に入力した内容に誤りがある場合は再構築の途中でエラーが出るので、設定項目を再確認します。
jQueryプラグインコード設置
生成されたJSONファイルを読み込み、ブログ(HTMLページ)上に表示するためのjQueryプラグインを設置します。
<head>内にjQuery本体を読み込みます。
私はgoogleがホストしているものを使いました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<head>内、または</body>後に「jquery.rankingtab.js」を読み込むためのコードを記述します。
「js/jquery.rankingtab.js」のパスはディレクトリ構成に合わせて変更してください。
「baseurl:」では、インデックステンプレートに新規作成したJSONファイルの出力URLを指定します。
表示するタイトルを何文字で区切るかを「trunk:」で指定します。
<script type="text/javascript" src="<$mt:StaticWebPath"$>js/jquery.rankingtab.js"></script> <script type="text/javascript"> $(function(){ $('.widget-accessranking').rankingtab({ baseurl: '<$mt:BlogURL$>accessranking_', trunc: 40 }); }); </script>
ウィジェット作成
アクセスランキング表示用のウィジットテンプレートを作成します。
<div class="widget widget-accessranking"> <h3 class="widget-header">アクセスランキング</h3> <div class="widget-content"> <ul class="nav nav-tabs"> <li class="active"><a href="#dayago">day</a></li> <li><a href="#week">week</a></li> <li><a href="#month">month</a></li> </ul> <div class="tab-content accessranking-content"> </div> </div> <!-- /widge-content --> </div> <!-- /widget-accessranking -->
以下のCSSで、アクセスランキング表示用のウィジットのデザインが整形されます。
<link rel="stylesheet" href="<$mt:StaticWebPath$>css/widget-accessranking.css" type="text/css" />
ちゃんと動かなかったので、jQueryを修正しちゃいました
ここまでの作業を終えて再構築をするとアクセスランキングが表示されるはずなのですが、何も表示されませんでした。
「jquery.rankingtab.js」を見てみると、設定したはずの「baseurl」を呼び出せていないような気がする…。
そこで「jquery.rankingtab.js」の26行目を以下の用に修正してみました。
修正前
var url = $options.url+tag+'.json';
修正後
var url = $options.baseurl+tag+'.json';
修正後、再構築。
アクセスランキングが表示されるようになりました!
定期実行スケジュール設定
自動的にアクセスランキングが更新されるよう、定期実行スケジュールを設定します。
このサイトはロリポップを使っているので、cronを設定しました。
ロリポップ!ユーザー専用ページへログインし、「WEBツール」→「cron設定」を選択して、mtディレクトリの「tools/run_periodic_tasks」を実行するよう設定します。
私は毎日0時30分に処理を実行するよう設定しました。

FTPソフトで「tools/run_periodic_tasks」のパーミッションを700に変更すれば、設定した時間に処理が実行されます。
メール設定をしておくと処理でエラーが発生した場合、メールで通知されます。

処理が正常に行われたかは、システムのダッシュボードの「ツール」→「ログ」からも確認できます。
2013/8/7 追記
日時指定投稿用にcronを設定してから、アクセスランキングのデータ自動取得が動作しなくなりました。
どちらも「/tools/run-periodic-tasks」を使用していることが原因だと思いますが、解決方法が分からなかったため、日時指定投稿用のcron設定を削除しました。
2015/07/09 追記
レポートデータの抽出ができなくなっていたため、上記のプラグインの使用をやめました。
現在はこちらを参考にGoogle Analytics APIを使ってランキングを表示しています。
参考サイト
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comments
KKさん
全く同じようにやっているのですが、インデックステンプレート保存時に
「Google Analytics DATA APIからデータ取得できませんでした。詳細設定項目の内容を確認してください。403 Forbidden」
と表示されてしまいます。
ID,パス等は間違ってません。Analytics側に何か設定とかあるのでしょうか?
kao@miaulerからKKさんへの返信
コメントありがとうございます。
この記事は去年MT5で作業した時のもので、プラグインも2013/08/02に修正があったようなのでそのままだと動作しないのかもしれません。。
こちらの方はMT6で動作しているようです。
[MovableType] AccessRankingGAプラグインを使用してアクセスランキングを表示する|untitled39.- unstrained web design life. - 風景写真、webデザインネタ(jQuery、ActionScript)からプライベートな雑記まで、もろもろ気ままに綴るブログ