Google Analytics Data API(GA4)をGA UA廃止に向けて使う

※この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ、フロントエンドエンジニアのしまむーです！
2022年3月16日にGoogleが公式に、ユニバーサルアナリティクスの停止を発表しましたね。

2023年7月1日をもって、標準のユニバーサル アナリティクス プロパティにおける新しいヒットの処理は停止されます。
https://support.google.com/analytics/answer/11583528?hl=ja

つまり今後UAでのPV数などのカウントもされなくなります、PV数のカウントにGoogle Analytics UAのPVを元に表示しているサイトも多いのではないでしょうか。今回はGA4への移行に対応するためGA4のレポートデータを取得するためのAPI、Google Analytics Data APIを利用するための手順についてご紹介したいと思います。

概要どのようなデータにアクセス出来るのか

Google Analytics Data APIを利用することで、次のようなデータの取得が可能です。

• 過去28日間にサイトの上位10ページにアクセスしたユーザー数
• 過去30分間に国ごとで何人のアクティブユーザーがいたか
• 管理者向けダッシュボードへ集計したレポートデータの表示

GA4ではUAに比べ過去のデータを保持する期間が短くはなっている点については注意が必要です、過去２年間のデータにのみアクセスが可能です。

実際にアクセスしてみる

まず事前にGoogle Analyticsでレポートにアクセスするためのプロパティを作成しておいてください。
https://analytics.google.com/analytics/web/

Googleのドキュメントに用意されているAPI Quickstartの内容に沿って導入して行きます。

1. まずはGCPの利用しているアカウントでGoogle Analytics Data APIを有効化してください。API Quickstartのページの下記スクリーンショット上のボタンから有効化出来ますのでやってみましょう。
   
2. 流れに沿って登録しているとcredentials.jsonをダウンロードしているはずです。credentials.jsonを開いてclient_emailフィールドのメールアドレスをGoogle Analyticsの取得したいプロパティの「プロパティのアクセス管理」に追加してください。
3. レポートデータを取得したいプロパティのプロパティIDを取得してください。管理画面の「プロパティ設定」より確認可能です。
4. credentials.jsonを利用したいプロジェクトのディレクトリに設置します、この際にgithubなどに誤ってアップしてしまわないように注意してください。
5. npm install @google-analytics/dataライブラリのインストールを行なってください。
   上記の準備が完了しましたら、下記のように実装いたします。

// Google Analyticsのリポートを取得したいプロパティのID
propertyId = process.env.GA_PROPERTY_ID;

// GCPから発行したシークレットキーをセットします。
// @google-analytics/dataではGOOGLE_APPLICATION_CREDENTIALSにセットしている値をデフォルトで利用するようになっています。
process.env.GOOGLE_APPLICATION_CREDENTIALS = `./credentials.json`

// Google Analytics Data APIのライブラリのimport
const { BetaAnalyticsDataClient } = require("@google-analytics/data");
const analyticsDataClient = new BetaAnalyticsDataClient()

async function runReport() {
  const data = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '700daysAgo',
        endDate: 'today',
      },
    ],
    dimensions: [
      {
        name: 'pagePath',
      },
      {
        name: 'pageTitle',
      },
     {
        name: 'eventName',
      },
    ],
    metrics: [
      {
        name: 'screenPageViews',
      },
    ],
  })

  const [response] = data;

  console.log("Report result:")
  response.rows.forEach(row => {
    console.log(row.dimensionValues)
  })
}

実際に上記のコードを走らせると下記のようなデータを取得していることが確認できます。

[
  { value: '/blog/z5b27dt119', oneValue: 'value' },
  {
    value: 'フリーランスの仕事の取り方（webデザイナー編） - ちょっと株式会社 社員ブログ',
    oneValue: 'value'
  }
  { value: 'page_view', oneValue: 'value' }
]
[
  { value: '/blog/gbsioqkvggm', oneValue: 'value' },
  { value: '最近のマイデスクを紹介 - ちょっと株式会社 社員ブログ', oneValue: 'value' }
  { value: 'page_view', oneValue: 'value' }
]
....

これでデータの取得を可能にするまでは完了となります。

実際に利用してみて感じる変更点

今回、利用してみて感じた変更点ですが取得してくるデータがやはりイベントベースのデータになっているようです。今まで利用できていたAPIではページURLごとに閲覧数を表示させたりも行えましたがGA4用のAPIでは別途取得してきたイベントのデータを元に集計する又は集計されたデータを何かしらの方法で取得する必要がありそうです。おそらくそのまま素直に取得してきたデータを集計するとなると処理に時間がかかってしまいそうなのでもう一工夫必要そうですね。今回はAPIを利用するまでの導入でしたが実用面も考慮した利用方法については次回作成するブログ記事で紹介しようと思います。