Simple GA Ranking For Shifter Static

Shifter Advent Calendar 2020の20日目の記事。Simple GA RankingをShifter Static でも使いたい!という検証です。

この記事はShifter Advent Calendar 2020の20日目の記事です。

Shifterって?という方はShifterの中の人の赤塚さんによる1日目の記事を読むとよいでしょう。


Simple GA Ranking ?

Simple GA RankingはWordPressとGoogle Analyticsを連携させて人気記事ランキングを取得するプラグイン。

Google Analyticsからデータを取得するので、記事へのアクセスごとにデータベースに書き込むプラグインと比べて軽量に動作する。

公式サイトにはマニュアル動画も用意されていて、セットアップもこの手順通りにやればだいたい迷わずに設定できる。

Simple GA Ranking の設定マニュアル動画。クセになるBGMだ。

mt8もプラグインメンテナーとしてこのプロジェクトに参加している。(更新ができていないのは追々、、、)

Shifter Static でも使える(、、だが!)

Shifter StaticでもSimple GA Rankingを設定して使用することは可能だ。

ただし、表示されるランキングはShifterでジェネレート(静的書き出し)を行った時点で取得したものとなる。

つまり、ジェネレートを頻繁に行わないサイトの場合だとランキングの表示が次にジェネレートするまで変わらないということになる。

・・・惜しい。これはどうにかしたい。

Shifter Staticで静的化されたWordPressサイトからGoogle Analyticsの最新データが取得できれば人気記事だけではなく、関連記事なども実現できる可能性がある

これはどうにかしたい、、、!


ちなみに

静的化する上で避けられないWordPress運用における動的処理の代表格である「お問い合わせフォーム」・「サイト内検索」・「コメント」については

Shifterが公式ブログで外部サービスとの連携する方法を紹介してくれているので是非確認してほしい。

https://support.getshifter.io/en/collections/1394677-contact-forms

https://support.getshifter.io/en/articles/762156-integrating-algolia-search-with-wordpress

https://support.getshifter.io/en/collections/1394686-wordpress-comments

解決したい内容を整理してみる

「Shifter Staticで人気記事ランキング」を実現させるために必要となる要件を書き出しておく。

  • 静的化されたサイトに人気記事ランキングを埋め込む
  • ランキングデータはGoogle Analyticsと連携する
  • サイトアクセス時の最新のランキングを表示する

以上を実現するために、この記事ではSimple GA Ranking for Shifter Staticができないか実験していく。


Simple GA Ranking for Shifter Static

STEP1:WordPressの設定

Shifterにサインアップ・サイト追加をし、WordPressを立ち上げたらパーマリンク設定を以下にしておいた。

/%post_id%/

これで https://example.com/{記事ID}/ で静的書き出しが行われる。

STEP2:Google Analyticsアカウント

アカウント作成時の注意点としては「プロパティ」をユニバーサルアカウントとして作成すること。

手順は以下

①、「プロパティの設定」で”詳細オプションを表示”する

「プロパティの設定」から、詳細オプションを表示する

②、「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

STEP3:カスタムディメンションの設定

記事の詳細ページへのPVのみをランキングデータとするためにGoogle Analyticsのカスタムディメンションを設定しておく。

ここでは次のように設定しておいた。

名前post
範囲ヒット
アクティブチェック(有効化しておく)
カスタムディメンションの設定
カスタムディメンションを定義

この設定をしておくことでGoogle Analyticsに記事詳細ページのPVであることを明示的に送信することができる。

作成したカスタムディメンションの「インデックス」の数値はこのあと使うので覚えておく。(スクショの場合は1)

STEP4:WordPressからGAにPVカウントを送信

以下のコードで、記事詳細へのアクセス時にGoogle AnalyticsにPVカウントを送信した。

参考記事:gtag.jsでページビューのときにカスタムディメンション送信

カスタムディメンションが意図した通りに送信されているかは

Google Analtytics > 行動 > サイトコンテンツ > すべてのページ にアクセスし

「セカンダリディメンション」から作成したカスタムディメンションを選択する


もしくは、公式レポートツールのQuery Explorerを使ってもよいだろう。

次のようなパラメータで実際にサイトで取得したいランキングを問い合わせてみる。

idsga:から始まるビューID
start-dateyesterdayPV集計期間From
end-datetodayPV集計期間To
metricsga:pageviewsPVを取得
dimensionsga:pagePath, ga:pageTitleパス, タイトルを取得
sort-ga:pageviewsPVの降順で取得
filtersga:dimension1==postカスタムディメンションはpost

実行してデータが取得できていればカスタムディメンションが計測されていることになる。


Google Analytics APIをどのように実行するか

サイト訪問者がアクセスした時点でのランキングをリアルタイムに表示させたいので、Google Analytics APIはブラウザ側(javascript)から実行させることにする。

しかし、通常API実行のためのアクセストークン取得にはOAuth2認可を行う必要がある。これにはGoogleログインが必要で取得できるトークンには期限がある。

また、javascriptはソースコードが公開されるため、取得したトークンをソースコードで公開するのは問題がある。

そんなときに、GoogleのEmbed APIのページにServer-side Authorizationというページを見つけた。

具体的には以下のような手順となっていた。

  • GCPでサービスアカウントを発行しキーのjsonファイルを取得する
  • GAでサービスアカウント 発行時に作成されたメールアドレスに表示と分析権限を付与する
  • サービスアカウントのキーjsonファイルからサーバーサイドでAPIへのアクセストークンを取得する

※サービスアカウント 取得からAPI実行まではこちらの記事が参考になる:【2019年版】Google Analytics API v4 の使い方(PHP)

この例では取得したトークンをjavascriptソースに記述するようになっており、注釈として以下が添えられていた。

Important!  When you add an access token to the source code of your page, your site’s visitors could use that access token to run any query the service account could run. If your account contains sensitive information, considering adding the service account only to a specific view. You may also want to add a view filter to limit what data the service account can access.

Embed API Server-side Authorization

・・・サーバーサイド?

サーバーレスなShifterを使っているのにサーバーを用意するなんてとんでもない

そこで、今回は以下のようなAPIをserverless frameworkで構築することにした。

  1. サービスアカウントのAPIアクセストークンを取得
  2. アクセストークンを使ってGoogle Analyticsからランキングデータ取得

(このAPIを SGA4SS API と呼ぶことにする。)

SGA4SS APIをserverless frameworkで構築

serverless framework ?

Serverless Advent Calendar 2020の18日目の記事:Serverless Framework はじめの一歩という記事を読んでみるといいだろう。

ここではserverless frameworkの詳しい解説はしないが、ソースコードはGithubに上げておいた。

https://github.com/mt8/sga4ss

※なんでPython?:Embed APIのサーバーサイド認証のサンプルコードがそうだったから

このAPIの注意点

実際にAPIを公開するときにはスロットリングやキャッシュなどをきっちり管理した方がよいと思われる。(APIのURLは公開するので誰でも実行可能)

GA側ではフィルタ機能などを使って、「見られてもいいビュー」を作っておくのがよいと思われる。

***ご利用は自己責任でお願いする***


SGA4SS WordPress Pluginでデータ取得・表示

用意したSGASS APIはWordPress側では [sga4ss] というショートコード でデータを取得してリスト表示することにした。

コードは以下のようなものになる。


・・・記事ランキングにアイキャッチ画像も付けたい

アイキャッチの取得についてはShifterの場合だと少し工夫が必要だった。

なぜならGoogle Analyticsから取得できるのはページパス(投稿ID)だけで、javascriptからでは投稿IDだけ取得できてもアイキャッチ画像を取得することはできない

Shifterサポートのお兄様たちに相談したところ、以下の方法を教えてもらった。(1時間で解決した)

①、/wp-json/wp/v2/posts/{ID} にアイキャッチ画像のURLを含める

以下のコードで、WP REST APIの/posts/{ID}にアイキャッチ画像のURLを追加することができる。

②、/wp-json/wp/v2/posts/{ID} も静的書き出し対象に含める

以下のコードでShifterの静的ファイル出力対象にアイキャッチがある投稿については/post/{ID}をjsonファイルとして含めることができる。

参考:Appending URLs to the artifacts

これでGA APIから取得した投稿IDからアイキャッチ画像を取得することができた。

抜粋になるが、コードだと以下の部分になる。


最後に

実際にShifter Staticで書き出したサイトを貼っておく。

ページ最下部の人気記事ランキングの部分が紹介した方法で実装した部分だ。

https://dazzling-mestorf7276.on.getshifter.io/

いつまで残すかは未定

今回作ったコードは以下に上げているので同じようなことにチャレンジする人の参考になれば嬉しい。

SGA4SS API (Serverless framework): https://github.com/mt8/sga4ss

SGA4SS (WordPress Plugin): https://github.com/mt8/sga4ss-wp

***ご利用は自己責任でお願いする***