Google Analytics 4とmicroCMSで人気記事一覧を実装する
Next.js + microCMSのブログにて、Google Analytics4を使用して人気記事一覧を実装した際の備忘録を残しておきます🐱
前提条件
今回の人気記事一覧は以下のような要件あるものとします。
- コンテンツの管理をmicroCMSで行う
- アクセス解析をGoogle Analytics4(※以降:GA4)で行う
- 毎週日曜日に自動で更新させる
人気記事実装の流れ
- Google Analytics側(GCP)の準備をする
- microCMSで人気記事のAPIを作成する
- 人気記事の集計を行う(Google Analytics Data API (GA4)を使用)
- 集計結果を使ってmicroCMSで管理された「人気記事」コンテンツを編集する(PATCH API)
- GithubActionsでPATCH処理を定期実行させる
Google Analytics側(GCP)の準備をする
Google Analytics側(GCP)の設定を行います。
具体的な方法は以下のclassmethodさんの記事で詳しく解説されています。
大まかな流れは下記です。
- GCP上に新規プロジェクト作成(または既存のプロジェクトがあればそれでもOK)
- GCPプロジェクトに対してGoogle Analytics Data API (GA4)を有効にする
- GCP上でAPI用のサービスアカウントを作り鍵をJSON形式で作成する(keys.json)
- サービスアカウントを作成した際にサービスアカウントIDをGoogleAnalitycsへユーザー登録する。
上記の設定が完了しましたら、鍵ファイル(json)をダウンロードし、プロジェクトへ追加します。
microCMSで人気記事のAPIを作成する
人気記事のエンドポイントを作成し、以下のようなAPIスキーマを設定します。
今回は、複数コンテンツ参照で記事を紐づけておきます。
コンテンツAPIのデフォルト権限にPATCHを追加します。
人気記事のコンテンツに複数コンテンツ参照で何件か記事を追加してみて、APIプレビュー→PATCHを選択→送信
、を行い下記のようにレスポンスが返ってくればmicroCMSの設定は完了です。
人気記事を集計してmicroCMSにPATCHする
クライアントライブラリとして Google Analytics Data: Node.js Client をインストールします。
npm install @google-analytics/data
また、今回は諸々のキーをenvで管理しているのでdotenvもインストールしておきます。
npm install dotenv
Analyticsからデータを取得しmicroCMSの「人気記事」コンテンツへPATCHします。
const { BetaAnalyticsDataClient } = require('@google-analytics/data');
const nodeFetch = require('node-fetch');
require('dotenv').config();
const analyticsDataClient = new BetaAnalyticsDataClient({
keyFilename: "./keys.json",
});
(async () => {
const [response] = await analyticsDataClient.runReport({
property: `properties/${process.env.PROPERTY_ID}`,
dateRanges: [
{
startDate: "8daysAgo",
endDate: "1daysAgo",
},
],
dimensions: [
{
name: "pagePath",
},
],
metrics: [
{
name: "screenPageViews",
},
],
dimensionFilter: {
filter: {
// 記事詳細ページ:/article/${contentId}でフィルタリング
stringFilter: {
value: "article",
matchType: "CONTAINS",
},
fieldName: "pagePath",
},
},
limit: 5,
});
const dimensionValues = response.rows?.map((row) => row.dimensionValues);
if (dimensionValues === undefined) return console.Error("response.rows dimensionValues is undefined");
const rankedPaths = dimensionValues.flat().map((rank) => rank?.value);
const maybeContentIds = rankedPaths.map((path) => path?.split("/").filter(Boolean).pop());
const getPopularResponse = await nodeFetch(`https://<YOUR_SERVICE>.microcms.io/api/v1/popular-bs`, {
headers: {
"X-MICROCMS-API-KEY": `${process.env.MICROCMS_API_KEY}`,
},
});
const popularContents = await getPopularResponse.json();
const patchPopularArticles = await nodeFetch(
`https://<YOUR_SERVICE>.microcms.io/api/v1/popular-bs/${popularContents.contents[0].id}`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
"X-MICROCMS-API-KEY": `${process.env.MICROCMS_API_KEY}`,
},
body: JSON.stringify({ populars: maybeContentIds }),
},
);
console.log(await patchPopularArticles.json());
})();
PROPERTY_ID
はGoogle Analyticsの管理画面から管理→プロパティ設定
から確認できます。
Analyticsからは下記のようなレスポンスが返されます。
rowsのdimensionValues内にページのpathが返ってきます。
{
dimensionHeaders: [ { name: 'pagePath' } ],
metricHeaders: [],
rows: [
{ dimensionValues: [Array], metricValues: [] },
{ dimensionValues: [Array], metricValues: [] },
{ dimensionValues: [Array], metricValues: [] },
{ dimensionValues: [Array], metricValues: [] }
],
totals: [],
maximums: [],
minimums: [],
rowCount: 4,
metadata: {
dataLossFromOtherRow: false,
currencyCode: 'JPY',
_currencyCode: 'currencyCode',
timeZone: 'Asia/Tokyo',
_timeZone: 'timeZone'
},
propertyQuota: null,
kind: 'analyticsData#runReport'
}
GithubActionsで定期実行させる
上記セクションのスクリプトをGithubActionsで週次動作させます。
一例ではありますが、記しておきます。
name: patch-popular-articles
on:
workflow_dispatch:
schedule:
- cron: "0 0 * * 0" # 毎週日曜日の午前0時に実行
jobs:
execute_patch:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Use Node.js Version
uses: actions/setup-node@v2
with:
node-version-file: '.nvmrc'
- name: Install Node.js
run: |
cd functions
npm ci
- name: Execute patch
env:
API_BASE_URL: ${{ secrets.API_BASE_URL }}
MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
PROPERTY_ID: ${{ secrets.PROPERTY_ID }}
GCP_KEY: ${{ secrets.GCP_KEY }}
run: |
echo -n $GCP_KEY | base64 --decode > ./functions/keys.json
cd functions
node patchPopularArticles.js
- 人気記事の集計
- microCMSの「人気記事」にPATCH
- GithubActionsで定期的に更新
という仕組みはできたので、あとは人気記事をビューとして表示させれば実装は完了となります!
参考記事
GA4、GCP
人気記事の実装
Discussion