Next App Router x GA4で人気記事を取得したい

takky94 2023/07/12に更新

npm install @google-analytics/data実行したら下記コードをどこか適当なとこに配置

/**
 * TODO(developer): Uncomment this variable and replace with your
 *   Google Analytics 4 property ID before running the sample.
 */
// propertyId = 'YOUR-GA4-PROPERTY-ID';

// Imports the Google Analytics Data API client library.
const {BetaAnalyticsDataClient} = require('@google-analytics/data');

// Using a default constructor instructs the client to use the credentials
// specified in GOOGLE_APPLICATION_CREDENTIALS environment variable.
const analyticsDataClient = new BetaAnalyticsDataClient();

// Runs a simple report.
async function runReport() {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '2020-03-31',
        endDate: 'today',
      },
    ],
    dimensions: [
      {
        name: 'city',
      },
    ],
    metrics: [
      {
        name: 'activeUsers',
      },
    ],
  });

  console.log('Report result:');
  response.rows.forEach(row => {
    console.log(row.dimensionValues[0], row.metricValues[0]);
  });
}

runReport();

ほぼこれで終わり
GCP上での操作やAnalytics上での操作はググればたくさん出てくる

ただ、1つ気になるエラーが出たのでメモしておく

- warn ./node_modules/retry-request/index.js
Module not found: Can't resolve 'request' in '/Users/hoge/fuga/frontend/node_modules/retry-request'

retry-requestというモジュール内で使用されるrequestがないと言われるもの

確かにnpm i requestで終わる問題ではあるものの、そのrequestがdeprecatedとなっている

takky94 2023/07/13に更新

あと関連するところで、GCP上でサービスアカウントのPRIVATE_KEYを取得するが、

# こういうやつ
-----BEGIN PRIVATE KEY-----
hogehoge
-----END PRIVATE KEY-----

こいつの取り扱いがやや面倒で、

new BetaAnalyticsDataClient({
    credentials: {
      client_email: process.env.GA4_DATA_API_CLIENT_EMAIL,
      private_key: process.env.GA4_DATA_API_PRIVATE_KEY,
    },
});

みたいに愚直に使うとエラーが出る
改行を考慮し、

new BetaAnalyticsDataClient({
    credentials: {
      client_email: process.env.GA4_DATA_API_CLIENT_EMAIL,
+     private_key: process.env.GA4_DATA_API_PRIVATE_KEY.split(String.raw`\n`).join('\n'),
    },
});

のようにしてやらないといけない

あとデプロイ先がAWSだったりするとさらに注意が必要で、環境変数の値のバックスラッシュをエスケープする必要がある

環境プロパティ値の一部の文字で囲う値はエスケープする必要があります。バックスラッシュ文字 () を使用して、いくつかの特殊文字と制御文字を表します。次のリストには、エスケープする必要があるいくつかの文字を表す例が含まれています。
バックスラッシュ () — \ の使用を表す
一重引用符 (') — ' の使用を表す
二重引用符 (") — " の使用を表す

# .env.local
GA4_DATA_API_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nHOGEHOGEHOGE...
                                                    ^^^
# .env.production
GA4_DATA_API_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\\nHOGEHOGEHOGE...
                                                    ^^^

このスクラップは2023/07/13にクローズされました