thumbnail

こんにちは。Lostmortal (@lostmortalmusic) です。

Google Analytics のデータを使用して Wordpress に人気記事ランキング掲出できるプラグイン、Simple GA Ranking の設置方法をご紹介します。

Simple GA Rankingとは

WordPress に人気記事ランキングを掲出できるプラグインです。

Simple GA Ranking 最大の特徴は、Google Analytics と連携して Google Analytics の情報に基づいた人気記事ランキングを掲出できるという点です。

また、これにより WordPress 内部でランキングのアルゴリズムを生成することがないため、他の人気記事掲出プラグインよりも動作が軽量になります。これはサイトパフォーマンスに大きく影響するため結構重要なメリットだったりします。

また、カスタマイズ自由度が非常に高いため、知識さえあればどのような UI でも作ることが出来る点もメリットと言えます。

但し、設定が少し難しいのがデメリットですね。

ということで、設置・設定のやり方をご紹介させていただきます。

設置の流れ

事前に Google Analytics をサイトに設定しておいてください。

大枠の手順は以下の通りです。

  1. 1. インストール
  2. 2. Google APIとWordpressを連携
  3. 3. 設置

1. インストール

ワードプレスのプラグイン新規追加欄から「Simple GA Ranking」を検索します。

見つけたら、「インストール→有効化」してください。ここは一般的にプラグインを利用するときと一緒になります。

2. GoogleのAPIとWordpressを連携

こちらが結構難しい部分になります。

Google Cloud Platform の API を利用して、Wordpress と Google Analytics の情報を紐付ける作業になります。

プラグインの有効化まで完了したら、「設定→Analytics設定」をクリックし下記画面を表示させます。「クライアントID」と「コンシューマーシークレット」を Google API から取得して設定する必要があるわけですね。

矢印の所をクリックします。blank で飛ばないので「右クリック→新しいタブで開く」をオススメします。

「コールバックURL」は後で使用します。

API の画面が表示されたらプロジェクトを作成をクリック。

クリック先の画面でプロジェクト名を決めて作成を押します。

プロジェクトが出来たので設定をします。
プロジェクト名→左上の三本バー→ライブラリの順にクリック。

下までスクロールすると Analytics API (Google Analytics API) があるのでクリック。そして飛び先で「有効にする」をクリック。

そうすると下記のような画面になるので右上の「認証情報を作成」をクリック。

下記の通り選択して「必要な認証情報」をクリック。

名前を決め、画像で赤入れした2点を入力し、「OAuthクライアントIDを作成」をクリック。ここで先程のコールバックURLが必要になります。

必要な項目を入力して次へ進みます。

やっとクライアントIDが出ました。下記画像のぼかしているところをコピーして WordPress 画面に戻り「クライアントID」のところに張り付けます。そして API に戻って完了をクリック。

コンシューマーシークレットを確認するためにプロジェクト名をクリックします。

画面上の方にこのように表示されます。クライアントIDもここで再び確認できます。
「クライアントシークレット」の値をワードプレス側の「コンシューマーシークレット」欄に入力します。

ワードプレス画面に戻り項目の入力を確認したら「トークンを取得」をクリック。

取得できると画面下部に管理しているGAのプロパティが出てくるので、自サイトのプロパティをチェックして保存

お疲れさまでした。これでAPIとの連携が完了です。

設置&設定

Simple GA Ranking では、Wordpress への設置方法が3通り選べます。

  • ウィジェットに挿入
  • ショートコード
  • PHPに直接記述

ウィジェットに挿入

WordPress のウィジェット機能を使う方法になります。特に詳しい設置方法などは説明不要かと思います。使用テーマのウィジェットの挙動を確認ください。

この場合、「設定」→「Simple GA Ranking」から表示数とランキング取得期間を設定できます。

ショートコード

個人的に使い所はあまり思い浮かばないですが、主に記事内に設置する場合はショートコードを用いると便利です。

[sga_ranking hoge="fuga"] のような感じの1行コードで設置できます。

詳しい設定項目は公式に記載があります。

Simple GA Ranking

PHPに直接記述

これが出来るので、どこでも好きなところに設置出来て、UI も HTML, CSS から自由に設計できます。大変ありがたい。

こちらも公式に詳しいことが書かれています。

Simple GA Ranking

アイキャッチを表示する場合

アイキャッチに関しては残念ながらデフォルトのコードで設定がありませんので PHP コードを自分で書く必要があります。

以下は例ですが、画像を出したい場所に例えばこんなコードを書いてやる感じです。

<?php if (has_post_thumbnail($post_id)):

$popular_thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post_id, ‘thumbnail’));

$popular_thumb_url = $popular_thumb[0];

?>

<img src=”<?php echo $popular_thumb_url; ?>” alt=””> <?php endif ?>

$popular_thumb の所の記述で、現在の記事におけるサムネイルの情報を配列で取得します。

この配列の0番目が画像 URL になっているため、$popular_thumb_url = $popular_thumb[0] で URL を取得し、img タグに流し込むという処理になります。

まとめ

以上となります。

Google Cloud Platform の UI は小まめに変更になるので、キャプチャと実際の UI には誤差が生じる場合がありますが、基本的な設置の流れはご理解頂けるかと思います。

まあ正直、設定が面倒なプラグインではありますね…。

API の接続の話が中心になるため慣れないとちょっと抵抗があるとは思いますが、一度設置してしまえば人気記事掲出プラグインとして Simple GA Ranking は非常に優秀です。

是非、導入をご検討ください。