📊

Google Analytics 4とmicroCMSで人気記事一覧を実装する

cocosyu

2023/06/22に公開

Next.js + microCMSのブログにて、Google Analytics4を使用して人気記事一覧を実装した際の備忘録を残しておきます🐱

前提条件

今回の人気記事一覧は以下のような要件あるものとします。

コンテンツの管理をmicroCMSで行う
アクセス解析をGoogle Analytics4（※以降：GA4）で行う
毎週日曜日に自動で更新させる

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

https://www.npmjs.com/package/dotenv

Analyticsからデータを取得しmicroCMSの「人気記事」コンテンツへPATCHします。

patchPopularArticles.js

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が返ってきます。

Analyticsのレスポンス

{
  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で週次動作させます。
一例ではありますが、記しておきます。

popular.yml

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

人気記事の実装

frontend flatPublication

フロントエンドとWeb実装全般に特化したFLATのテックブログです 💁🏻‍♂️ スタッフが技術やエンジニアのTipsを発信します。