如何在不消耗 API 的情況下，從 GA4 輸出 microCMS 的文章排行

想必常有客戶要求顯示文章排行吧。
在 Jamstack 網站上顯示 microCMS 的文章排行時，一般會另外建立專用的 API。
不過，若 API 配額已經用完，卻仍希望實作的話，也可以採用 直接將 PV 數寫入既有文章內容 的做法。

這次就以該做法，介紹在採用 microCMS + Cloudflare Pages、以 SSG 發佈的網站上的實作範例！

雖然 Cloudflare 不知為何已被一般大眾廣泛知曉，但這其實也是客戶的需求，是我們不久前在自家網站上測試過的內容！ https://www.liberogic.jp/topics/

適合採用此做法的情境

想在側邊欄或頁尾顯示約 TOP10 的排行時
不太需要即時性的情況
microCMS 的 API 配額已不充裕的情況
若希望以靜態網站生成（SSG）簡單實作

步驟 1：準備 microCMS（擴充結構與 Webhook 控制）

1-1. 擴充 API 結構

於現有的文章端點中，新增兩個用於排行榜的欄位。

pageView（數字）：儲存從 GA4 取得的過去 30 天累計 PV。
lastUpdatedPV（日期時間）：記錄 PV 最後更新的日期時間。

1-2. 設定 API 金鑰權限

於所使用的 API 金鑰設定中，勾選 PATCH。

1-3. 設定 Webhook（避免連續建置的解決方法）

為避免每次文章的 PV 數更新時都連續觸發建置，請從 Webhook 觸發條件中取消勾選「內容發布（透過 API 操作）」。

步驟 2：在 Google Cloud Console 中設定驗證

為了從 Cloudflare Workers 存取，請準備服務帳戶與Data API。

2-1. 啟用 API

請在 Google Cloud Console 的專案中，啟用 Google Analytics Data API。

2-2. 建立服務帳戶與金鑰

建立用於 GA4 整合的服務帳戶，並複製其電子郵件地址。

在「金鑰」分頁中選擇「新增金鑰」→「建立新金鑰」，金鑰類型選擇 JSON 並建立後下載。

2-3. 授予 GA4 權限

在 GA4 資源的「存取權管理」中，將於 2-2 複製的電子郵件地址新增為使用者，並授予「檢視者」以上的權限。

步驟 3：建立並設定 Cloudflare Workers（取得 GA4 資料）

3-1. 建立 Workers 並設定環境變數

請建立一個名為 ga4-ranking-updater 等類似名稱的新 Workers。

從設定中配置環境變數。金鑰請註冊為祕密值（Secret）。

MICROCMS_API_KEY	microCMS 的 API 金鑰
MICROCMS_API_URL	https://[ID].microcms.io/api/v1
GA4_PROPERTY_ID	GA4 的資源 ID（Property ID）
GA4_SERVICE_ACCOUNT_CREDENTIALS	JSON 金鑰檔案的完整內容
GA4_PRIVATE_KEY_BASE64	請從 JSON 的 private_key 值中移除 `-----BEGIN PRIVATE KEY-----`、`-----END PRIVATE KEY-----`、`\` 後的內容

3-2. GA4 資料更新 Worker

請在「編輯程式碼」中，將 worker.js 的內容依下列方式修改。

const MICROCMS_ENDPOINT_NAME = '[記事のエンドポイント名]'; 

let contentIdToSlugMap = {};

// ----------------------------------------------------------------------
// 1. microCMSから全記事のIDとスラッグを取得し、マップを作成する
// ----------------------------------------------------------------------
async function fetchContentMap(env) {
    const apiEndpoint = `${env.MICROCMS_API_URL}/${MICROCMS_ENDPOINT_NAME}`;
    const slugToIdMap = {};
    let offset = 0;
    const limit = 100;

    while (true) {
        const url = `${apiEndpoint}?fields=id,slug&limit=${limit}&offset=${offset}`;
        const response = await fetch(url, {
            headers: { 'X-MICROCMS-API-KEY': env.MICROCMS_API_KEY },
        });
        if (!response.ok) {
            throw new Error(`microCMS Map Fetch Error: ${response.status} ${await response.text()}`);
        }
        const data = await response.json();
        
        data.contents.forEach(item => {
            if (item.slug && item.id) {
                slugToIdMap[item.slug] = item.id;
            }
        });
        if (data.contents.length < limit || data.totalCount <= (offset + limit)) {
            break;
        }
        offset += limit;
    }
    
    contentIdToSlugMap = slugToIdMap; 
    console.log(`microCMSから合計 ${Object.keys(slugToIdMap).length} 件の記事IDマップを取得しました。`);
}

// ----------------------------------------------------------------------
// 2. JWT 認証ヘルパー関数群 (GA4 アクセストークン取得用)
// ----------------------------------------------------------------------
// Base64Url エンコード/デコード
const base64UrlEncode = (data) => btoa(String.fromCharCode(...new Uint8Array(data))).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '');
const base64UrlDecode = (data) => Uint8Array.from(atob(data.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0));

async function importPrivateKey(keyBase64) {
    // 秘密鍵本体をデコードし、DER形式のバイナリにする
    const binaryDer = base64UrlDecode(keyBase64);

    return crypto.subtle.importKey(
        'pkcs8',
        binaryDer,
        { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
        false,
        ['sign']
    );
}

// GA4 Service Accountの認証情報からAccess Tokenを取得するメイン関数
async function getAccessToken(credentialsString, privateKeyBodyBase64) {
    // 認証情報JSONをパースし、client_emailを取得
    const creds = JSON.parse(credentialsString);
    const serviceAccountEmail = creds.client_email;

    const now = Math.floor(Date.now() / 1000);
    const expiry = now + 3600; // 有効期限: 1時間後
    const header = { alg: 'RS256', typ: 'JWT' };
    const payload = {
        iss: serviceAccountEmail,
        scope: '<https://www.googleapis.com/auth/analytics.readonly>',
        aud: '<https://oauth2.googleapis.com/token>',
        exp: expiry,
        iat: now,
    }

    // 2. 署名するデータ（Header.Payload）を作成
    const encodedHeader = base64UrlEncode(new TextEncoder().encode(JSON.stringify(header)));
    const encodedPayload = base64UrlEncode(new TextEncoder().encode(JSON.stringify(payload)));
    const signatureInput = `${encodedHeader}.${encodedPayload}`;

    // 3. 秘密鍵をインポートし、JWTに署名
    const key = await importPrivateKey(privateKeyBodyBase64);
    const signature = await crypto.subtle.sign(
        { name: 'RSASSA-PKCS1-v1_5' },
        key,
        new TextEncoder().encode(signatureInput)
    );
    const encodedSignature = base64UrlEncode(new Uint8Array(signature));

    // 4. JWTを完成させる
    const jwt = `${signatureInput}.${encodedSignature}`;

    // 5. Googleトークンエンドポイントへリクエスト
    const tokenResponse = await fetch('<https://oauth2.googleapis.com/token>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
            assertion: jwt,
        }),
    });

    if (!tokenResponse.ok) {
        throw new Error(`Token request failed: ${tokenResponse.status} ${await tokenResponse.text()}`);
    }

    const tokenData = await tokenResponse.json();
    return tokenData.access_token; // アクセストークンを返す
}

// ----------------------------------------------------------------------
// 3. GA4 データ取得関数
// ----------------------------------------------------------------------
async function fetchGa4Data(accessToken, propertyId) {
    const apiEndpoint = `https://analyticsdata.googleapis.com/v1beta/properties/${propertyId}:runReport`;
    
    const response = await fetch(apiEndpoint, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            dateRanges: [{ startDate: '30daysAgo', endDate: 'yesterday' }], // 昨日から30日間で取得する（必要に合わせて変更）
            dimensions: [{ name: 'pagePath' }],
            metrics: [{ name: 'screenPageViews' }],
            orderBys: [{ metric: { metricName: 'screenPageViews' }, desc: true }],
            limit: 100, // 100件以降の記事はPV0として処理する（必要に合わせて変更）
        }),
    });

    if (!response.ok) {
        throw new Error(`GA4 API Error: ${response.status} ${await response.text()}`);
    }

    const data = await response.json();
    
    const pvData = data.rows?.map(row => ({
        pagePath: row.dimensionValues[0].value, 
        pageView: parseInt(row.metricValues[0].value, 10), 
    })) || [];
    
    return pvData;
}

// ----------------------------------------------------------------------
// 4. microCMS コンテンツID解決関数
// ----------------------------------------------------------------------
// `/blog/記事スラッグ/`という構造の場合（必要に合わせて変更）
function resolveContentIdFromPath(pagePath) {
    try {
        const cleanPath = new URL('<https://dummy.com>' + pagePath).pathname;
        const parts = cleanPath.split('/').filter(p => p.length > 0); 

        // 1. '/blog/ID' の構造であるか確認
        if (parts.length < 2 || parts[0] !== 'blog') {
            return null; 
        }
        
        const slug = parts[1];
        
        // マップを使って、スラッグからコンテンツIDを取得
        const actualContentId = contentIdToSlugMap[slug];

        if (!actualContentId) {
             // マップに存在しない（microCMSに記事が存在しない）場合は無視
             console.log(`[IGNORE] Slug ${slug} not found in microCMS map.`);
             return null;
        }

        // microCMSのコンテンツIDを返す
        console.log(`[RESOLVED] Slug ${slug} -> ID: ${actualContentId}`);
        return actualContentId;

    } catch (e) {
        console.error(`Path parsing error for ${pagePath}: ${e}`);
        return null;
    }
}

// ----------------------------------------------------------------------
// 5. microCMS コンテンツ更新関数
// ----------------------------------------------------------------------
async function updateMicroCMS(pvData, env) {
    let updatedCount = 0;
    const errors = [];
    
    // 1. GA4データをスラッグをキーとするマップに変換
    const ga4SlugPvMap = {};
    pvData.forEach(item => {
        const slug = item.pagePath.split('/').filter(p => p.length > 0)[1];
        if (slug) {
            ga4SlugPvMap[slug] = item.pageView;
        }
    });

    // 2. microCMSの全記事マップ (contentIdToSlugMap) をループ
    for (const slug in contentIdToSlugMap) {
        if (contentIdToSlugMap.hasOwnProperty(slug)) {
            
            const actualContentId = contentIdToSlugMap[slug];
            
            // 2で取得したGA4のデータにあればその値、なければ 0 を設定 (リセット)
            const newPageView = ga4SlugPvMap[slug] || 0; 

            // PATCHリクエストのURLを構築
            const microcmsUrl = `${env.MICROCMS_API_URL}/${MICROCMS_ENDPOINT_NAME}/${actualContentId}`;
            
            const updatePayload = {
                pageView: newPageView, 
                lastUpdatedPV: new Date().toISOString()
            };
            
            const response = await fetch(microcmsUrl, {
                method: 'PATCH', 
                headers: {
                    'Content-Type': 'application/json',
                    'X-MICROCMS-API-KEY': env.MICROCMS_API_KEY,
                },
                body: JSON.stringify(updatePayload),
            });

            if (response.ok) {
                updatedCount++;
            } else {
                errors.push({ contentId: actualContentId, status: response.status, body: await response.text() });
            }
        }
    }
    
    if (errors.length > 0) {
        console.error(`microCMS Update Errors: ${JSON.stringify(errors)}`);
    }

    console.log(`microCMSのコンテンツ ${updatedCount} 件を更新しました。`);
    return updatedCount;
}

// ----------------------------------------------------------------------
// 6. Workerのメインハンドラー (Cron Triggers用)
// ----------------------------------------------------------------------
export default {
    async scheduled(controller, env, ctx) {
        try {
            console.log('--- GA4 Ranking Updater Started ---');
            
            // 1. microCMSからIDマップを事前取得
            await fetchContentMap(env);

            // 2. GA4 Access Tokenの取得
            const accessToken = await getAccessToken(
                env.GA4_SERVICE_ACCOUNT_CREDENTIALS,
                env.GA4_PRIVATE_KEY_BASE64
            );

            // 3. GA4データ取得
            const pvData = await fetchGa4Data(accessToken, env.GA4_PROPERTY_ID);
            console.log(`GA4から ${pvData.length} 件のデータを取得しました。`);
            
            // 4. microCMSコンテンツの更新
            const updatedCount = await updateMicroCMS(pvData, env);
            
            console.log(`microCMSのコンテンツ ${updatedCount} 件を更新しました。`);
            console.log('--- GA4 Ranking Updater Finished ---');

        } catch (error) {
            console.error('致命的なエラーが発生しました:', error);
        }
    }
};

Worker 程式碼的主要邏輯：

事前取得地圖：預先取得 microCMS 所有文章的 id 與 slug 對應地圖。
取得 GA4 資料：取得過去 30 天的累計 PV。
更新邏輯：若 GA4 有資料，則以新的 PV 更新；若無資料，則將 PV 重設為 0。

3-3. Cron 設定（資料更新）

在設定的觸發事件中，將 Cron 觸發器設定為 0 15 * * *。每天凌晨 0 點執行，將截至前一天的資料同步至 microCMS。

Step 4：建立並設定 Cloudflare Workers（建置觸發器）

4-1. 建立 Workers 並設定環境變數

為了將資料更新與部署分開，請建立專用於網站建置的 Workers，名稱例如 build-trigger。

在環境變數中，將 CLOUDFLARE_PAGES_BUILD_HOOK 設定為 Cloudflare Pages 的建置 Hook URL。

4-2. Workers 程式碼（建置觸發器）

在 Pages 的建置 Hook 中實作發送 POST 請求的程式碼。

export default {
  async scheduled(controller, env, ctx) {
      // 環境変数からビルドフックURLを取得
      const buildHookUrl = env.CLOUDFLARE_PAGES_BUILD_HOOK;

      if (!buildHookUrl) {
          console.error("FATAL: CLOUDFLARE_PAGES_BUILD_HOOK environment variable is not set.");
          return;
      }

      // 2. ビルドフックURLにPOSTリクエストを送信
      const response = await fetch(buildHookUrl, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
          },
      });

      // 3. 結果の確認
      if (response.ok) {
          console.log("✅ Cloudflare Pages Build Triggered Successfully.");
      } else {
          console.error(`❌ Build Trigger Failed! Status: ${response.status} ${response.statusText}`);
      }
  },
};

4-3. Cron 設定（網站部署）

在設定的觸發事件中，將 Cron 觸發器設定為 10 15 * * *。由於希望等待步驟 3 的處理完成後再執行，因此預留充裕時間，將部署設定為每天上午 0 點 10 分開始。

總結

相較於為排名功能另建 API，即時性確實較差，但若延遲約 10 分鐘，我認為仍在可接受的範圍內。此方案不會消耗 API 額度，並可在 Cloudflare 免費方案中執行，成本效益高；且整體架構僅需在 Cloudflare 內完成，結構簡潔，這是其主要優點。