ヤマムギ

growing hard days.

*

WordPressにSimple GA RankingとGoogle Analytics Post Pageviewsで記事ランキングを表示する

      2018/12/08


この記事はWordPress Advent Calendar 2018に参加した記事です。

参考にさせていただいた記事

【Simple GA Ranking】にサムネイルと順位とPVを表示してみたよ

サムネイルも表示したかったのでこちらを参考にさせていただきました。
というかほぼそのままやってみました。
ありがとうございます!

「データベース接続確立エラー」が多発

WordPressの「データベース接続確立エラー」への対応(様子見中 EC2 + RDS t2.micro)

ある時期を境に「データベース接続確立エラー」が多発するようになりました。
時間の経過的には単純にアクセス数が増えたことが原因ですが、改善をしなければです。

環境はAWSで、 EC2 + RDS + CloudFront + WAF etc。
EC2インスタンスはt2.microのAmazon LinuxでログをCloudWatch Logsに書き出してます。

ログには”Can’t connect to local MySQL server”が1/16から多発していました。
根本的な原因としては、WordPress Popular PostsがページビューのたびにMySQLへ書き込みに行くのでそこが原因ではないかと。
心優しいみなさんのアドバイスをいただいて、Simple GA RankingとGoogle Analytics Post Pageviewsに変更することにしました。

Google APIの設定

Simple GA RankingはGoogle Analyticsからページビュー数を取得するので、Google APIの設定が必要です。
(Google Analyticsを使用されていない方は、Google Analyticsの設定方法を検索してGoogle Analyticsの有効化をまず行ってください。)
現在、Google APIの設定はGoogle Cloud Consoleに統合されているのでこちらで設定していきます。


アカウント名をクリックして、プロジェクト選択画面で[新しいプロジェクト]を選択してプロジェクトを作成します。


プロジェクト名を入力してプロジェクトを作成します。


左ペインで[APIとサービス]を選択して、[APIとサービスの有効化]をクリックしました。


“analytics”などで検索して[Analytics API]を選択しました。


[有効にする]を選択して有効にしました。


次に認証情報を作成します。


クライアントIDを選択します。


同意画面を設定します。


アプリケーション名は自分が分かる名前にして保存します。


ウェブアプリケーションを選択してアプリケーション名を任意で入力して作成します。
このあとクライアントIDとクライアントシークレットが表示されるのでテキストエディタにコピーしました。

Simple GA Rankingの設定

WordPressのプラグイン新規追加で”Simple GA Ranking”を検索して追加しました。

う〜ん。PHP5.6以上が必要なのですね。
ここで見送りにしていたPHPバージョンアップに着手することにします。
ついでにAWSアカウントもブログ専用のアカウントを作って移行します。

Amazon Linux 上のWordPress PHPを5.3から7.2にバージョンアップ

さて、バージョンアップも終わったので改めて作業に戻ります。

[設定] – [Simple GA Ranking]で設定します。

pannel settingsのリンクをクリックして、トークンの設定をします。

ここで、コールバックURLをGoogleの認証情報に設定していなかったなあと気づきました。

コールバックURLを設定する前に承認するドメインとして今回設定するサイトのドメインを全部プロジェクトに追加します。

そして、次に認証情報の承認済みのリダイレクトURLにコールバックURLを設定します。

認証をしてトークン取得できました。

そして、このサイトが使用するAnalytics情報を選択します。

Google Analytics Post Pageviewsの設定

[設定] – [Post Pageviews]で設定します。

画面にかかれているとおり、認証情報に承認済みのリダイレクトURLを追加します。
サイトアドレス/wp-admin/options-general.php?page=google-analytics-post-pageviews

クライアントIDとクライアントシークレットを設定します。

そして認証をして、Post Pageviewsの設定です。

こちらで設定します。

PHPとCSSコード追加

[外観] – [テーマの編集]でコードを追加しました。

PHPもCSSは、元記事を参考にさせていただき、ちょっと変えました。

functions.php

こちらのSimple GA Rankingの公式サイトにもあるように
sga_ranking_before_titleはランキングを表示させるHTMLのタイトル前を、sga_ranking_after_titleはタイトル後をカスタマイズできます。
今回はsga_ranking_before_titleのみを使用しました。

gapp_get_post_pageviewsでGoogle Analytics Post Pageviewsのページビューカウントを取得しています。

style.css

ウィジェットの設定

[外観] – [ウィジェット]で、Simple GA Rankingを選択して、サイドバーにドラッグ&ドロップします。
タイトルを設定します。

見てみた

できました!

@yamamanx

開発ベンダー5年、ユーザ企業システム部門通算9年、ITトレーナー1年目のSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

 - WordPress

ad

ad

  関連記事

WordPressにログインを強制して記事ごとのアクセス制限もする

WordPressを限定された組織内で使いたいとした場合に下記を実現したいと思い …

Nephila ClavataでWordPressの画像をS3から配信する

当ブログサイトはAWS EC2とRDS上でWordPressを構築しているのです …

WordPressの「データベース接続確立エラー」への対応(様子見中 EC2 + RDS t2.micro)

誰もが一度は見たことがある「データベース接続確立エラー」の無機質な画面。 スクリ …

WordPress Popular Postsのページビューカウントが止まってたからの復旧

WordPress Popular Postsのページビューカウントが止まってた …

WordPressサイトを常時SSL化したら「jQuery is not defined」になってプラグインが動作しなくなった

WordPressをAmazon CloudFrontで配信してついでにACM( …

ホームページやサイトがiPhone,iPadのホーム画面に追加された時のアイコンを設定しておく

headタグでapple-touch-iconを指定 [crayon-5c17e …

EC2 Amazon LinuxのNginx+RDS MySQLにレンタルWebサーバーからWordPressを移設する(手順整理版)

ブログサイト(WordPress)をレンタルWebサーバーからAWSに移設する事 …

Amzon Linux のApacheでRedmineとWordPressをバーチャルホストで共存する

EC2とRDSを節約しようと思いまして、Redmineを動かしてるとこに検証用W …

Amazon Linux 上のWordPress PHPを5.3から7.2にバージョンアップ

このブログ、振り返ってみてみると、もう4年も続けているのかあと思いました。 1本 …

Amazon LinuxのNginx+RDS MySQLにレンタルWebサーバーからWordPressを移設する(失敗、手戻りそのまま記載版)

勉強のためブログサイトを長らくお世話になったロリポップさんから、AWSに移設する …