Simple GA Rankingで記事アクセスランキング

GoogleAnalyticsのデータとWordPressを連携して投稿記事のランキングを作る。プラグインではあるものの集計データ自体はGoogleAnalyticsで行われるため軽量でサイトが重くならないと言われている。ただ手順通りにやっているのに表示がされない。いろいろ調べてようやく表示されるようになった。これで正解かどうかわからないが手順をメモ。

プラグインSimple GA Rankingのインストール

まずはプラグインSimple GA Rankingをインストールする。ダッシュボード画面から「プラグイン」＞「新規追加」＞「キーワード」に「Simple GA Ranking」と入力してインストールする。もしくは上記サイトからダウンロードして「wp-content」＞「plugins」にフォルダごとアップロードする。インストールできたら「有効化」にする。

Google Cloud Platformでプロジェクトを作成する

Google Analyticsと連携するためにGoogle Cloud Platformでプロジェクトなるものを作成する。ダッシュボードページはそのままにして以下「リソースの管理」ページを別画面にして開く。

REFERENCE Google Cloud Platform
https://console.cloud.google.com/cloud-resource-manager

リソース管理画面上の「プロジェクト作成」をクリックして作成画面を開く。

開いたら下記の通り入力する。
・プロジェクト名：自動で入っているが自分が管理しやすい名前をつける
・組織：自分の場合は選択元に組織が作ってあるのでそれを選択。組織なしの場合をやってないので不明。
・場所：組織で選択すると場所が自動で表示される。
問題なければ「作成」をクリック。リソースの管理画面にプロジェクトが追加されていることを確認する。

Google Analytics APIを有効にする

次にGoogle Analytics APIを有効にする。正直Google Cloud Platformの画面が非常にわかりにくいよな…。設定しないといけないのでやるしかない。作成したプロジェクト名が上に表示されていることを一応確認して、左のナビゲーションメニューから「APIとサービス」をクリックして移動。

画面上の「APIとサービスの有効化」をクリックするとAPIの選択画面に移動するので、ページ下の方の「その他」＞「Google Analytics API」を選択する。

選択したら次の画面でGoogle Analytics APIを「有効にする」ボタンをクリックする。

以下画面になるのでとりあえず「認証情報を作成」をクリックして、そのままの状態で左メニューの「OAuth同意画面」クリックして移動する。

OAuth同意画面に移動したら「User Type」を「外部」を選択。内部だとうまく動作しないという記事があったので。選択したら「作成」ボタンをクリックして次の画面へ移動。

以下項目を入力する。
・アプリ名：任意の名称を入力する。
・ユーザサポートメール：これは既に登録されているメールアドレスを選択する。

さらに下にスクロールしてメールアドレスを入力する。入力したら「保存して次へ」をクリックして次画面へ移動する。
・メールアドレス：ここは選択ではなく手動で入力する

次画面の「スコープ」は何もせずで「保存して次へ」。さらに「テストユーザ」画面も何もせず「保存して次へ」をクリック。最後に確認画面が表示されて完了。

OAuthクライアントの作成

このあたりで設定がイヤになるな。もうちょっとだ。左メニューの「認証情報」をクリックし、上の「認証情報を作成」から「OAuthクライアントID」を選択する。

以下画面が開くので下記の通り選択、入力をしたら「作成」ボタンをクリックする。
・アプリケーションの種類：ウェブアプリケーションを選択
・名前：自動で入力されたのでそのまま
・承認済みのリダイレクトURI：「+URIを追加」ボタンをクリックして入力欄を表示
「ダッシュボード」＞「設定」＞「Analytics設定」に表示される「コールバックURL」をコピーペーストする

作成ボタンを押すと以下ポップアップが表示される。ここの「クライアントID」と「クライアントシークレット」はどこかにメモしておく。

Google Analyticsのプロパティの追加

ほとんどのSimple GA Ranking 導入説明されているブログでは、このあとプラグイン側の設定を行い完了になっているのだが。自分の場合は「Analytics設定」＞「サイトの設定」＞「統計データを利用するアカウントを選んでください」でサイトが表示されずそれ以上先に進めなかった。

いろいろ調べてみるとGoogle Analyticsのプロパティが新しいバージョンだと反映されないようだ。対象サイトのプロパティの管理画面から「プロパティ作成」をクリックして作成画面へ。

以下を入力する。完了したら次へ。
・プロパティ名：任意の名称を入力する
・レポートのタイムゾーン：日本時間を選択
・通貨：円を選択

スクリーンショットには表示されてないが「詳細オプションを表示」をクリックして以下画面を開く。
・ウェブサイトのURL：対象になるサイトのURLを入力
・「Google アナリティクス 4 とユニバーサルアナリティクスのプロパティを両方作成する」を選択
以上入力したら「次へ」をクリックして進むと会社規模とかいろいろ選択項目があるので該当する項目を選んで完了。

作成済のアカウントに対して編集できないかと色々探してもできそうになかったので追加したけど、アカウント作成時に詳細設定で「Google アナリティクス 4 とユニバーサルアナリティクスのプロパティを両方作成する」を選択していれば問題ないのかもしれない。

プラグイン側の設定

メモしてあった「クライアントID」と「クライアントシークレット」をプラグイン設定の「Analytics設定」画面の各所定欄に入力して「トークンを取得」ボタンをクリックする。

以下ポップ画面が出てくるので利用しているアカウントを選択する。

アカウントへのアクセスリクエストを「許可」する。

これでエラーがでなければ「トークンの取得に成功しました」が表示される。

最後にサイトの設定で対象となるサイトを選択し「保存」して完了。ここのサイト表示がGoogle Analytics4プロパティだけだと表示されないので、ユニバーサルアナリティクスのプロパティも作成しておく必要がある。

タイトルのみシンプルに表示

簡易に表示する場合は、以下PHPを追加する。順位とタイトルのみ表示なる。集計期間や件数はプラグイン側の設定で行う。初回はデバックみたいな表示なったりしたが、設定のDebug Modeのチェックを外したりチェックしたりを繰り返し、最終的にはチェック外した状態で表示されるようになった。

<?php echo do_shortcode('[sga_ranking]'); ?>

自分の作成するテーマにはウィジェット機能を持ち合わせてないので未確認だがサイドバーなどに表示ができるらしい。

<ol class="sga-ranking">
    <li class="sga-ranking-list sga-ranking-list-1"><a href="#"
            title="投稿の日付フォーマットを変える">投稿の日付フォーマットを変える</a></li>
    <li class="sga-ranking-list sga-ranking-list-2"><a href="#"
            title="独自ドメインSSL化でやっておくべき対応メモ">独自ドメインSSL化でやっておくべき対応メモ</a></li>
    <li class="sga-ranking-list sga-ranking-list-3"><a href="#"
            title="jQueryで画面をじわっとフェードインさせる">jQueryで画面をじわっとフェードインさせる</a></li>
    <li class="sga-ranking-list sga-ranking-list-4"><a href="#"
            title="filterで画像にフィルターをかける">filterで画像にフィルターをかける</a></li>
    <li class="sga-ranking-list sga-ranking-list-5"><a href="#"
            title="BgSwitcherで背景画像をスライドさせる">BgSwitcherで背景画像をスライドさせる</a></li>
</ol>

ol {
  counter-reset:number; /*ol数字をリセットせよ*/
  list-style-type: none!important; /*数字を消す*/
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.0em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #4b4b4b;
  color: white;
  font-weight:bold;
  font-size: 100%;
  border-radius: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

カスタムフィールドでランキング表示

他記事一覧と同じようにタイトル以外の項目も表示をしたい場合のサンプル。件数や集計期間は関数で設定している。この場合はプラグイン側で設定している件数と集計期間は念の為「0」に設定している。

スタイルシートはお好みでサイトに合わせて設定する。

<?php if (function_exists('sga_ranking_get_date'))
    $ranking = sga_ranking_get_date();
else
    $ranking = array();
$args = array(
    'post__in' => $ranking,
    'posts_per_page' => 5,//出力する件数
    'period' => 30, //○日間のデータからランキングする
    'orderby' => 'post__in'//ランキング順に並べる
);
$my_query = new WP_Query($args);
if ($my_query->have_posts()) :
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <div>
            <div>
                <h1> 　　　　　　　
                    <!-- 投稿日 -->　
                    DATE <a href="<?php the_permalink(); ?>"><?php the_time('Y-n-j'); ?></a>
                </h1>
                <!--/投稿日 -->
                <!-- タイトル -->
                <div class="postlist02-title"><i class="fas fa-chevron-right"></i> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    <!-- /タイトル -->
                    <!-- カテゴリタグ -->
                    <h1 class="categories02">CATEGORIES:<?php the_category(' '); ?> <?php the_tags('/ TAGS:', ' '); ?></h1>
                    <!-- /カテゴリタグ -->
                </div>
                <!-- 記事表示 -->
                <div>
                    <?php the_excerpt(); ?>
                </div>
                <!-- /記事表示 -->
                <!-- アイキャッチ画像がある場合  -->
                <?php if (has_post_thumbnail()) : ?>
                    <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
                <?php else : ?>
                    <!-- アイキャッチ画像がない場合  -->
                    <div><a href="<?php the_permalink() ?>"><img src="<?= get_template_directory_uri(); ?>/img/代替画像')"></a></div>
                <?php endif; ?>
            </div>
            <div class="clear"></div>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

稼働しているのか

様々な設定が正しくできているのか不安だがトークン取得できている状況なのでGoogleとの接続はできていると思う。一応ランキング表示はされているけどどうなんだろう？意外な記事がランキングされている感じもする。Debugモードのチェックは外しているものの、Debugモードをチェックをしておくとメンテナンスとかの接続されていない場合にランダムに記事表示を行う機能らしい。それが機能しているのかとも思ったりする。

正直、ランキングが正しくないとしても表示されたらそれがランキングになってしまうので。しばらくは様子をみてみるしかないな。本サイトのPOPULAR POSTSはこの関数で稼働している。この関数とSwiperを組み合わせてたものがトップページのフェード表示。

RELATED Swiperで最新記事をフェード表示させる

以下は自分用メモ。

//post__inで指定した順番通り並べなさい
$args = array(
    'post__in' => array(1,2,3,4,5),
    'orderby' => 'post__in'
);

続きがある。

RELATED Simple GA Rankingで記事ランキングその後

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

MEMORANDUM

LOOKED IT UP. WROTE IT DOWN. JUST IN CASE.