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

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

Google Analyticsのレポートデータを元にアクセスランキングを生成する「AccessRankingGA」プラグインを導入しました。

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日）アクセスランキング用

昨日（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分に処理を実行するよう設定しました。

cron設定

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

メール通知

処理が正常に行われたかは、システムのダッシュボードの「ツール」→「ログ」からも確認できます。

2013/8/7 追記

日時指定投稿用にcronを設定してから、アクセスランキングのデータ自動取得が動作しなくなりました。
どちらも「/tools/run-periodic-tasks」を使用していることが原因だと思いますが、解決方法が分からなかったため、日時指定投稿用のcron設定を削除しました。

2015/07/09 追記

レポートデータの抽出ができなくなっていたため、上記のプラグインの使用をやめました。
現在はこちらを参考にGoogle Analytics APIを使ってランキングを表示しています。

参考サイト

下のボタンを押すと拍手送信＆メッセージフォームが開きます。→WEB拍手お返事

関連記事