Google Analytics 4 を使って人気記事を取得し microCMS に連携する

はじめに

現在、Next.js と microCMS を使ってサイトを構築しています。

そのサイトに Google Analytics を導入し、人気記事ランキングを作りました。

Google Analytics を使って人気記事を取得し microCMS に連携する方法は、
下記の記事にてわかりやすく解説してあります。

https://blog.microcms.io/populars-from-google-analytics/

ですが、今回 Google Analytics 4 を使用しており、
Google Analytics 4 から「ビュー」が無くなったため人気記事を取得する方法が変わりました。

以下、Google Analytics 4 で人気記事を取得し microCMS に連携する方法を記します。

前提

前提条件として下記記事のように、鍵ファイルのダウンロードや Google Analytics での権限付与をおこなっているものとします。

https://dev.classmethod.jp/articles/ga-api-v4/

Google Analytics に接続

結論、Google Analytics に接続するため、Google Analytics Data API (GA4)を使用しました。

https://developers.google.com/analytics/devguides/reporting/data/v1/rest

プロジェクトに Google Analytics Data: Node.js Client をインストールします。

npm install @google-analytics/data

https://www.npmjs.com/package/@google-analytics/data

getPopularArticles.js

const { BetaAnalyticsDataClient } = require('@google-analytics/data')
const credentialsJsonPath = '../credential.json'

const analyticsDataClient = new BetaAnalyticsDataClient({
  keyFilename: credentialsJsonPath,
})

;(async () => {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '8daysAgo',
        endDate: '1daysAgo',
      },
    ],
    dimensions: [
      {
        name: 'pagePath',
      },
    ],
    metrics: [
      {
        name: 'screenPageViews'
      }
    ],
    dimensionFilter: {
      filter: {
        // 記事のURLは /article/${contentId} なのでそれ以外のURLを除きたいためフィルタリング
        stringFilter: {
          value: 'article',
          matchType: 'CONTAINS',
        },
        fieldName: 'pagePath',
      },
    },
  })

propertyId は　 Google Analytics の画面から、「管理」->「プロパティ設定」を押した
画像の所にあります。

各プロパティの詳細は下記ドキュメントを参考にしてください。
https://developers.google.com/analytics/devguides/reporting/data/v1/rest/v1beta/properties

上記実行するとデータが取得できます。

{
  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'
}

microCMS にデータを書き込む

microCMS にデータを書き込むのは、参考記事の「Google Analytics を使って人気記事を取得し microCMS に連携する」と同じです。

上記で取得したデータから、コンテンツ ID の配列を作成し PATCH します。

getPopularArticles.js

if (response) {
  const rankedPaths = response.rows.map((row) => row.dimensionValues)
  const maybeContentIds = rankedPaths.flat()
    .map((rank) => rank.value)
    .map((r) => r.replace('/article/', ''))

  //microCMSへのPATCH
  const result = await fetch('https://<YOUR_SERVICE>.microcms.io/api/v1/popular', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
      'X-MICROCMS-API-KEY': MICROCMS_API_KEY,
    },
    body: JSON.stringify({ popular: maybeContentIds }),
  })
}

おわりに

Google Analytics と microCMS を使って、人気記事一覧を作成できました。
あとは、GitHub Actions を使って毎週日曜日など定期的に実行することでいい感じになりそうです。