GA4から取得したデータをmicroCMSに送信して、人気記事ランキングを実装する

• Next.js v14.0.2
  • App Router
  • Route Handlers
• Google Analytics 4
• microCMS
  • microcms-js-sdk v2.7.0
• Vercel（Cron Jobsで定期実行する）

Next.jsで構築し、ヘッドレスCMSにmicroCMSを採用しているサイトに人気記事を表示します。
その際に、GA4のデータを使用してmicroCMSの記事データを定期的に更新し、そのデータを元に実装します。

1. Google Cloudコンソール⁠（新しいタブで開く）にログインし、「API とサービス」を開きます。
2. 検索フォームにAnalyticsと入力するとGoogle Analytics Data APIがあるのでクリックします。

   

   Google Analytics Data API | Google for Developers⁠（新しいタブで開く）

3. 以下の画面で「有効にする」を押します。

   

   「有効にする」を押す

4. メニューから[IAMと管理] > [サービスアカウント]を開き、「サービスアカウントを作成」を押します。

   

   

   サービスアカウントを作成する

5. 任意のサービスアカウント名を入力してから「完了」を押します。

   

1. サービスアカウントの[操作]から[鍵を管理]を押します。

   

   操作メニューから「鍵を管理」を開く

2. 鍵のページで[鍵を追加] > [新しい鍵を作成]を押します。

   

3. キーのタイプは[JSON]を選択し、[作成]を押すとJSONファイルがダウンロードされます。

   

   ダウンロードした鍵のファイルは、あとから再ダウンロードできません。なくした場合は、新しい鍵を作り直します。
   また、この鍵があれば誰でもサービスアカウントとしてGA4のデータを読めてしまうので、流出しないように厳重に管理する必要があります。

1. Google Analyticsを開き、左下の[管理]を押します。
2. [アカウントのアクセス管理]を開きます。

   

3. 青丸の+ボタンを押したあと、[ユーザーを追加]を押します。

   

   [ユーザーを追加]を選ぶ

4. 先ほど作成したサービスアカウントのメールアドレスを入力し、「新規ユーザーにメールで通知する」のチェックを外します。「標準の役割」は「閲覧者」にチェックを入れて「追加」を押します。

   

   サービスアカウントのメールアドレスを入力し、役割を「閲覧者」にする

1. microCMSの記事のAPI（ここではposts）のスキーマに、表示回数を入れる数字フィールドを追加します。フィールドIDはscreenPageViewsにします。
2. Google Analytics Data APIを使用してGoogle Analyticsにアクセスするために、Google Analytics Data: Node.js Client⁠（新しいタブで開く）をインストールします。

   ターミナルbash · 1行折り返すコピー（ターミナル）

   $npm install @google-analytics/data

   @google-analytics/data - npm⁠（新しいタブで開く）

3. Google Cloudから取得したJSONファイルの中身からprivate_keyとclient_emailをメモしておきます。

   credential.jsonJSON · 13行折り返すコピー（credential.json）

   credential.json

   1{2  "type": "service_account",3  "project_id": "xxxxxxxxxx",4  "private_key_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",5  "private_key": "-----BEGIN PRIVATE KEY-----\nxxxxxxxxxx\n-----END PRIVATE KEY-----\n",6  "client_email": "xxxxxxxxxx@xxxxxxxxxx.iam.gserviceaccount.com",7  "client_id": "xxxxxxxxxx",8  "auth_uri": "https://accounts.google.com/o/oauth2/auth",9  "token_uri": "https://oauth2.googleapis.com/token",10  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",11  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/xxxxxxxxxx%40xxxxxxxxxx.iam.gserviceaccount.com",12  "universe_domain": "googleapis.com"13}

4. GA4の[管理] > [プロパティの詳細]の右上にあるプロパティIDをメモしておきます。

   

   プロパティIDを控える

5. 環境変数に以下のように設定します。Vercelで動かす場合は、Vercelのプロジェクトの環境変数にも同じ値を設定します。

   .env.local.env · 3行折り返すコピー（.env.local）

   .env.local

   1GOOGLE_ANALYTICS_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nxxxxxxxxxx\n-----END PRIVATE KEY-----\n"2GOOGLE_ANALYTICS_CLIENT_EMAIL=xxxxxxxxxx@xxxxxxxxxx.iam.gserviceaccount.com3GOOGLE_ANALYTICS_PROPERTY_ID=xxxxxxxxx

6. src/libs/ga/getPageViews.ts を作成し、以下のように記述します。

   getPageViews.tsTypeScript · 60行折り返すコピー（getPageViews.ts）

   getPageViews.ts

   1import { BetaAnalyticsDataClient } from '@google-analytics/data'23const analyticsDataClient = new BetaAnalyticsDataClient({4  credentials: {5    client_email: process.env.GOOGLE_ANALYTICS_CLIENT_EMAIL,6    private_key: process.env.GOOGLE_ANALYTICS_PRIVATE_KEY?.replace(/\\n/g, '\n'),7  },8})910export const getPageViews = async (11  startDate: '7daysAgo' | '14daysAgo' | '30daysAgo',12  limit: number = 10000,13) => {14  const [response] = await analyticsDataClient.runReport({15    property: `properties/${process.env.GOOGLE_ANALYTICS_PROPERTY_ID}`,16    dateRanges: [17      {18        startDate,19        endDate: 'today',20      },21    ],22    dimensions: [23      {24        name: 'pagePath',25      },26    ],27    metrics: [28      {29        name: 'screenPageViews',30      },31    ],32    dimensionFilter: {33      filter: {34        fieldName: 'pagePath',35        stringFilter: {36          matchType: 'BEGINS_WITH',37          value: '/posts/',38        },39      },40    },41    limit,42  })4344  return response.rows?.map((row) => {45    const path =46      row.dimensionValues !== null && row.dimensionValues !== undefined47        ? row.dimensionValues[0].value48        : null49    const postId = path ? path.split('/').pop() : null // pathからpostIdを抽出5051    return {52      path,53      postId,54      readCount:55        row.metricValues !== null && row.metricValues !== undefined56          ? Number(row.metricValues[0]?.value)57          : 0,58    }59  })60}

   残り44行を表示

7. src/libs/microcms.ts に以下のように記述し、記事のデータを更新できるようにupdatePostDataを作成します。

   microcms.tsTypeScript · 29行折り返すコピー（microcms.ts）

   microcms.ts

   1import { createClient } from "microcms-js-sdk";23if (!process.env.MICROCMS_SERVICE_DOMAIN) {4  throw new Error("MICROCMS_SERVICE_DOMAIN is required");5}67if (!process.env.MICROCMS_API_KEY) {8  throw new Error("MICROCMS_API_KEY is required");9}1011/**12 * MicroCMSのクライアントを初期化して生成します。13 * サービスドメインとAPIキーは環境変数から取得します。14 */15export const client = createClient({16  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN || "",17  apiKey: process.env.MICROCMS_API_KEY || "",18});1920// 失敗したときは呼び出し側（route.ts）で記録するので、ここではエラーをそのまま投げる21export const updatePostData = async (contentId: string, editData: Record<string, unknown>) => {22  await client.update({23    endpoint: "posts",24    contentId,25    content: {26      ...editData,27    },28  });29};

   残り13行を表示

8. src/app/api/ga/fetchPageViews/route.ts を作成し、microCMSにデータを送信するためのAPIを作成します。

   route.tsTypeScript · 41行折り返すコピー（route.ts）

   route.ts

   1import { getPageViews } from '@/libs/ga/getPageViews'2import { updatePostData } from '@/libs/microcms'3import { NextRequest } from 'next/server'45export async function GET(request: NextRequest) {6  // Vercel Cron Jobsからの呼び出しだけを受け付ける7  const cronSecret = process.env.CRON_SECRET8  if (!cronSecret || request.headers.get('authorization') !== `Bearer ${cronSecret}`) {9    return new Response('Unauthorized', { status: 401 })10  }1112  try {13    const pageViewsPosts = await getPageViews('30daysAgo')1415    if (!pageViewsPosts || pageViewsPosts.length === 0) {16      return new Response('Posts Not Found', { status: 404 })17    }1819    const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))2021    for (const post of pageViewsPosts) {22      if (post.postId) {23        try {24          await updatePostData(post.postId, {25            screenPageViews: post.readCount || 0,26          })27          console.log(28            `${post.postId} の screenPageViews を ${post.readCount || 0} に更新しました。`,29          )30        } catch (error) {31          console.error(`${post.postId} の更新に失敗しました。`, error)32        }33        await delay(500)34      }35    }3637    return new Response('Success', { status: 200 })38  } catch (error: any) {39    return new Response(error?.message, { status: 400 })40  }41}

   残り25行を表示

   microCMSのWRITE API（POST・PUT・PATCH・DELETE）は、1サービスあたり1秒間に5回までしか送信できないため、delay関数を作成してリクエストの間隔を調整しています。

   制限事項／注意事項｜microCMSドキュメント⁠（新しいタブで開く）

   VercelのCron JobsはGETリクエストしか送信できないため、GETリクエストにしています。誰でもこのURLを開けば更新が走ってしまうので、Cron Jobsが送ってくるAuthorizationヘッダーを確かめています（設定は次の章で行います）。

9. PATCHリクエストを送信できるように、microCMSのAPIキーの権限で、postsのPATCHにチェックを入れてください。

   

   デフォルト権限でPATCHにもチェックを入れる

   Next.jsで作成したAPIはGETリクエストですが、そこからmicroCMSのAPIにはPATCHリクエストを送信しています。

1. Vercelのプロジェクトの環境変数にCRON_SECRETを追加します。値は16文字以上のランダムな文字列にします。Vercelは、Cron Jobsを実行するときに、この値をAuthorization: Bearer <CRON_SECRET>として送ってきます。
2. プロジェクトのルートに vercel.json を作成し、実行するパスとスケジュールを書きます。スケジュールはUTCで指定するので、以下は毎日午前3時（日本時間）に実行する設定です。

   vercel.jsonJSON · 8行折り返すコピー（vercel.json）

   vercel.json

   1{2  "crons": [3    {4      "path": "/api/ga/fetchPageViews",5      "schedule": "0 18 * * *"6    }7  ]8}

3. デプロイすると、Vercelのプロジェクトの[Settings] > [Cron Jobs]に登録されます。実行の結果は、Vercelのログで確かめられます。

Managing Cron Jobs | Vercel⁠（新しいタブで開く）

今回はコンポーネントとして使いまわせるようにしたいので、非同期のServer Componentとしてデータを取得し、Suspenseで読み込み中の表示を出します。

1. src/libs/microcms.ts に以下の記述を追加します。MicroCMSQueriesは、ファイルの先頭のimportに追加してください。

   microcms.tsTypeScript · 21行折り返すコピー（microcms.ts）

   microcms.ts

   1import { createClient, type MicroCMSQueries } from "microcms-js-sdk";23/**4 * MicroCMSからすべての投稿を取得します。5 *6 * @param queries - MicroCMSのクエリオプション7 * @returns - 投稿のリスト8 */9export const getAllPosts = async (queries?: MicroCMSQueries) => {10  const listData = await client.getList<any>({11    customRequestInit: {12      next: {13        revalidate: 60,14      },15    },16    endpoint: 'posts',17    queries,18  })1920  return listData21}

   残り5行を表示

2. src/components/PopularPosts.tsx を作成し、以下のように記述します。

   PopularPosts.tsxTSX · 19行折り返すコピー（PopularPosts.tsx）

   PopularPosts.tsx

   1import { getAllPosts } from "@/libs/microcms";2import Link from "next/link";34export const PopularPosts = async () => {5  const { contents } = await getAllPosts({6    orders: "-screenPageViews",7    limit: 3,8  });910  return (11    <ol>12      {contents.map((post) => (13        <li key={post.id}>14          <Link href={`/posts/${post.id}`}>{post.title}</Link>15        </li>16      ))}17    </ol>18  );19};

   残り3行を表示

3. src/app/page.tsx でPopularPostsコンポーネントを呼び出します。このとき、Suspenseでラップしてください。

   page.tsxTSX · 12行折り返すコピー（page.tsx）

   page.tsx

   1import { PopularPosts } from '@/components/PopularPosts'2import { Suspense } from 'react'34export default function Home() {5  return (6    <div>7      <Suspense fallback={<p>Loading...</p>}>8        <PopularPosts />9      </Suspense>10    </div>11  )12}

   これでページに人気記事のランキングを出せるようになりました。

• Google Analytics 4 APIで人気記事を表示する【Next.js + TypeScript】 | フナイログ⁠（新しいタブで開く）
• Google Cloud セキュリティ ベースラインの制約 | Resource Manager | Google Cloud Documentation⁠（新しいタブで開く）