HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた①〜Google Analytics APIの利用設定〜

HUGOの記事をPV順で表示できるようにしてみました。その時の手順を解説します。

Ishiguro Suguru

HUGOは静的なファイルを出力するためサイト記事のPV数など動的に変わるコンテンツを表示することができません。 今回はWordPressのように記事をPV数順で表示する機能を実装したためその内容について紹介します。

やりたかったこと

やりたかったことは投稿記事を過去1週間のPV数順で表示することです。

実装したサイトは以下のサイトにある「人気記事」というパーツです。

ポケ森攻略まとめブログ

手順概要

手順概要は以下のとおりです。

  1. Google Analytics APIの利用設定
  2. Lambda + API GatewayでGoogleアナリティクスの情報を取得するAPI作成
  3. HUGOでAPIを実行するパーツ作成

仕組みについてざっくり説明するとGoogleアナリティクスの情報を取得するAPIを作成してHUGOビルド時にそのAPIを呼び出します。

ビルドして生成されたファイルはAPIで取得したGoogleアナリティクスの情報(PV数順でソート済みの記事情報)を含めた形で出力されます。

JavaScriptを利用しクライアント側でGoogleアナリティクスの情報を取得することも可能ですが、なるべくクライアン側とバックエンド側の負荷をあげたくないためビルド時にAPIを実行して静的ファイルにしています。

APIはAWSクラウド環境を使用していますがAzureやGCP(Google Cloud Platform)や自前のサーバーに実装してもできます。

手順が非常に長くなるため3回くらいに記事を分けて解説したいと思います。

Google Analytics APIの利用設定

まずはGoogle Analytics APIの利用設定が必要になります。 手順はざっくり以下のとおりです。

  1. Google Analytics APIの有効化
  2. サービス アカウントの作成
  3. サービス アカウントのキー取得
  4. Google Analyticsでサービス アカウントの閲覧権限を追加

Google AnalyticsのAPIを実行するのは作成するサービス アカウントになり取得するキーはAPI呼び出し実行の際に必要となります。

1. Google Analytics APIの有効化

まずはGoogle Cloudプラットフォームサイトを開きます。

検索ボックスに"analytics"と入力してサービスを表示します。 結果に表示される以下をクリックしてそれぞれ有効化しましょう。

  • Google Analytics Reporting API
  • Google Analytics API

クリック後に以下の画面が表示されます。“有効にする"をクリックします。

APIの概要ページが表示されます。これで有効化は完了です。

Google Analytics Reporting APIも同様に有効化しておきましょう。

2. サービス アカウントの作成

次にサービス アカウントを作成していきます。

サイドリンクの”認証情報”をクリックして”認証情報を作成>サービス アカウント”をクリックします。

サービス アカウントの作成画面が表示されます。 サービス アカウント名など必要な情報を入力して”作成”をクリックします。

GCPのプロジェクトのアクセス権限設定画面が表示されます。 ここは省略可能なためそのまま”続行”をクリックします。

サービス アカウントへのアクセス許可設定画面が表示されます。 こちらもAPIを使用するだけであれば不要なためそのまま”続行”をクリックします。

認証情報ページに作成したサービス アカウントが表示されます。

サービス アカウントのメールアドレスはGoogle Analytics管理画面での権限設定に使用するためメモしておきましょう。

3. サービス アカウントのキー取得

次にサービス アカウントのキーを取得していきます。

先ほどの認証情報ページの作成したアカウントメールアドレスをクリックしてサービス アカウントの詳細ページを開きます。

詳細ページ下部の”鍵を追加>新しい鍵を作成”をクリックします。

鍵の形式を”JSON”か”P12”にするか選択します。 今回は”JSON”を選択して”作成”をクリックします。

クリック後にjsonファイルがダウンロードされます。

本ファイルはLambdaのAPI作成時に使用するため大切に保存しておきましょう。

4. Google Analyticsでサービス アカウントの閲覧権限を追加

最後に使用しているGoogle Analyticsの閲覧権限をサービス アカウントに付与していきます。

データを取得したいGoogle Analyticsの管理画面を開き”ユーザー管理を表示”をクリックします。

画面右上の「+」アイコンをクリックして”ユーザーを追加”を選択します。

権限の追加画面が表示されます。

作成したサービス アカウントのメールアドレスを入力して権限を追加しましょう。

設定する権限は情報を取得するだけなので”表示と分析”にチェックを入れ"追加"をクリックします。

これでサービス アカウントに閲覧権限が付与されます。

最後に

以上でGoogle AnalyticsのAPIが使用できる状態になります。

次回はAWSのLambdaを使用してGoogle AnalyticsのAPIを呼び出す方法を紹介します!

comments powered by Disqus