SIMPLE

【Google Analytics4】Google Analytics Data API v1で人気記事を取得する

ブログでユーザのアクセス数を元にした人気記事を表示したい場合はどうすればいいのでしょうか?Google Analytics Data API v1のNode.jsクライアントを使用して、人気記事を取得する方法をまとめています。

通りすがりのラマ🦙
2 March, 2025

UnsplashChoong Deng Xiangが撮影した写真

はじめに

Google AnalyticsがGoogle Analytics4に変わり、データを取得するAPIも新しくなっています。合わせてクライアントライブラリも新しく用意されています。(以前はgoogleapiを使用していました。)

Node.jsのクライアントライブラリ:https://googleapis.dev/nodejs/analytics-data/latest/index.html#installing-the-client-library

この記事ではNode.jsでGoogle Analytics Data API v1から人気記事のデータを取得する方法を解説します。

注意

Google Analytics Data APIはまだAlphaおよびBetaです。今後変更がある可能性があるので、ご注意ください。

引用元:https://developers.google.com/analytics/devguides/reporting/data/v1

This API provides features in Alpha and Beta channels. Alpha and Beta products may have limited support, and changes to these products may not be compatible with other Alpha and Beta versions.

Alpha: Features are in an early preview stage. While we try to notify you of upcoming changes, expect to encounter breaking changes before the API is publicly released.

Beta: No breaking changes are expected in this channel.

For official Google Analytics API announcements, subscribe to the Google Analytics API Notify Group.

前提

Google Analytics4を導入済みであること。

ゴール

このブログサイト(ぽんこつガレージ)で、過去30日間でアクセスの多かったページを取得します。

結論

最終的なスクリプトは以下です。分かりやすさのため、環境変数はコード上で定義しています。

  • GOOGLE_APPLICATION_CREDENTIALSにはサービスアカウントのキーファイルのパスを指定します。
  • PROPERTY_IDにはGA4のプロパティIDを指定します。
import { BetaAnalyticsDataClient } from '@google-analytics/data';

// 環境変数で認証情報のパスを設定
const CREDENTIALS_PATH = './keys.json';
process.env.GOOGLE_APPLICATION_CREDENTIALS = CREDENTIALS_PATH;

// GA4設定
const PROPERTY_ID = '475xxxxxx';

// GA4クライアントの初期化(BetaAnalyticsDataClientはデフォルトではGOOGLE_APPLICATION_CREDENTIALSに定義した認証情報を使用する)
const analyticsDataClient = new BetaAnalyticsDataClient();

// メイン処理
const main = async () => {
  try {
    // GA4からデータ取得
    const [response] = await analyticsDataClient.runReport({
      property: `properties/${PROPERTY_ID}`,
      dateRanges: [
        {
          startDate: '30daysAgo',
          endDate: 'yesterday',
        },
      ],
      dimensions: [
        { name: 'pageTitle' },
        { name: 'pagePath' },
      ],
      metrics: [
        { name: 'screenPageViews' }, // ページタイトルとページのURLパスを元に、閲覧数を集計する
      ],
      limit: 3,
    });

    // レスポンスをログに表示
    console.log('GA4レポートの結果:');
    console.log(JSON.stringify(response.rows, null, 2));
    console.log(`取得した行数: ${response.rows?.length || 0}`);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
};

// 実行
main();

スクリプトの実行結果は、以下のようになります。コメントは説明のためにつけています。

GA4レポートの結果:
[
  {
    "dimensionValues": [
      {
        "value": "ぽんこつガレージ", // ページのタイトル(pageTitle)
        "oneValue": "value"
      },
      {
        "value": "/", // ページのパス(pagePath)- トップページ
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "108", // スクリーンページビュー数 - トップページに108回のアクセスがあった
        "oneValue": "value"
      }
    ]
  },
  {
    "dimensionValues": [
      {
        "value": "【アーキテクチャ公開】コメント投稿Chrome拡張機能 | React / Hasura / Firebase / Neon", // ページのタイトル
        "oneValue": "value"
      },
      {
        "value": "/articles/lhcr1laj7t", // ページのパス - 記事ページ
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "11", // スクリーンページビュー数 - この記事に11回のアクセスがあった
        "oneValue": "value"
      }
    ]
  },
  {
    "dimensionValues": [
      {
        "value": "【アーキテクチャ公開】レシピサイト | Next.js / microCMS / Hasura / Neon", // ページのタイトル
        "oneValue": "value"
      },
      {
        "value": "/articles/gcavn32w8y", // ページのパス - 別の記事ページ
        "oneValue": "value"
      }
    ],
    "metricValues": [
      {
        "value": "11", // スクリーンページビュー数 - この記事にも11回のアクセスがあった
        "oneValue": "value"
      }
    ]
  }
]
取得した行数: 3

設定手順

Google CloudとGA4の設定

こちらのクイックスタートSTEP3までを実施します。

https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=ja

概要は以下の通りです。

  1. Google Cloudプロジェクトで、必要なAPIを有効化する
  2. サービスアカウントを作成する(権限を割り当てる必要はない)
  3. GA4にサービスアカウントを「閲覧者」として追加する

公式ドキュメントが文章だけでわかりにくい場合には、こちらの記事が参考になります。

https://dev.classmethod.jp/articles/ga-api-v4/GCPでサービスアカウントを作成後鍵をダウンロードする〜Google Analyticsでサービスアカウント用のユーザーに権限を与えるのセクション)

補足:この記事で、GA4のユーザ追加をするスクリーンショットで「表示と分析」権限を選択していますが、現在の画面では「閲覧者(Viewer)」になっています。

ライブラリのインストール

必要なライブラリをインストールします。ドキュメントはこちらです。

https://googleapis.dev/nodejs/analytics-data/latest/index.html#installing-the-client-library

npm install @google-analytics/data

GA4のプロパティIDの確認

プロパティIDは以下の手順で確認できます。

引用元:https://developers.google.com/analytics/devguides/reporting/data/v1/property-id?hl=ja

Google アナリティクスのプロパティ ID を確認するには:

  1. https://analytics.google.com/ から Google アナリティクスにアクセスします。
  2. [管理] を選択します。
  3. プロパティを選択します。
  4. [プロパティ設定] を選択します。

スクリプトの実行

「結論」セクションで示したスクリプトを作成します。サービスアカウントの鍵ファイルと、プロパティIDを設定し実行します。

これで過去30日間でアクセスの多かったページを取得できます。

おわりに

GA4のGoogle Analytics Data APIを使った、人気記事の取得を行いました。他にもGA4で収集している様々なデータを取得することができるので、人気記事以外にも、アクティブユーザ数を表示したい場合などにも使えます。

自分で実装する際に、旧来のgoogleapiを使った方法もあり、混乱してしまったのでまとめてみました。GA4からデータ取得をしたい方の参考なると嬉しいです。

通りすがりのラマ🦙

このブログでは、個人開発で得た知見や、興味のあるテクノロジー、時々デザインに関する記事を執筆します。 日々公開されている情報に助けられているので、自分が得た知見も世の中に還元していければと思います。 解決できないバグに出会うと、つばを飛ばします。🦙 経歴:情報工学部→日系SIer→外資系IT企業 興味:Webアプリケーション開発、Webデザイン 趣味:個人開発、テニス