Next.jsのサイトでGA4のデータを取得する

# はじめに

自身のNext.js製のサイトに**GoogleAnalytics**を導入してPV数をカウントし、そのカウント数をAPIで取得したかったのですが、ググっても**GA3**の頃のやり方ばかり出てきてとても苦戦を強いられたので備忘録のためにまとめます。

# 何が問題だったか

GoogleAnalyticsのデータを取得するため、下記のような記事をみてトライしました。

****[Node.js (TypeScript) で Google Analytics Reporting API v4 を使用する方法](https://fwywd.com/tech/ga-popular-node-ts)****

問題は下のスクショであるような**ビュー**というカラムが、私の設定画面では出ないことでした。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/fd54e3fb-def6-308b-5462-f0277c523bf3.png)


## ＧＡ４からビュー管理の画面は廃止されている

どうやらビュー管理の画面がＧＡ４になった際に廃止されているようです。

ですが、いろいろググっても出てくるのがビューIDが必要な方法ばかり。

割とさ迷いました。

**[【Google Analytics】Google Analyticsでビューが表示されないとき・・・されないときー](https://www.e-f.co.jp/blog/33326/)**

この記事のようにUAプロパティで作成すればいいようですが、今から新しいプロパティに切り替えるのは面倒。。。

さらにUAプロパティ自体が、2023/7/1で終了するとのことでした。

すぐじゃん！！

## ということで調べなおし

今回APIでデータを取得しようとしたときに私が使おうとしてたのは****Google Analytics Reporting API****だったのですがGA4からは****Google Analytics Data API****を使えとのことでした。

APIが違ったのですね。。。
![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/2610a08e-c8cf-9520-3641-8be77b1c0823.png)


まだあまりドキュメントが多くなく弱弱な私にはよくわからに事も多いのですが、一旦Next.jsでエンドポイントを作成して、取得したデータを扱うことができました。

****[GoogleアナリティクスのAPIをNode.jsから触る](https://qiita.com/n0bisuke/items/fde53bab3f3b5bfbdfc9)****

こちらの記事を参考にして、ChatGTPも駆使しながら行いました。

# API導入手順

ここから導入手順です。

GA4の計測はすでにできているものとして話を進めます。

## API有効化

まずは**[Google Cloud Platform](https://console.cloud.google.com/?hl=ja)**へ登録、もしくはログインをします。

- ダッシュボードから右端のプロジェクト作成へ  
    ![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/333f146b-1a90-de38-6723-bfbd6ec081a0.png)

    
    - 名前を決めて作成でOK   
    ![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/314fb25d-7302-be7a-b5df-9df369904da4.png)
    
- 左上のメニューからAPIとサービス→ライブラリへ
- 検索バーで****Google Analytics Data APIを検索して有効化****
- APIが有効ですとなっていることを確認
![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/afbbaa37-437a-3acb-f4e5-cebe6816549e.png)
![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/6d8f0cdd-f7ae-27a5-4288-7065ae926138.png)


## ****API 用のサービスアカウントを作成し、JSON 形式の鍵を作成****

続いてAPIの利用に必要なKeyが含まれるJson形式のファイルをダウンロードします。

- 左上のメニューから**IAMと管理→サービスアカウント**と進みます
![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/501aa291-7fdb-2b24-6ab9-195b5aae7480.png)


- サービスアカウント名を決めて、必要があれば説明欄を記入して2と3は飛ばして完了
![Untitled (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/e2906a3b-1c42-3210-b303-db57e669b8d6.png)


- サービスアカウントが作成できたら、リストに表示されるので今作ったアカウントを選択します
![Untitled (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/17416c9f-4faf-1c5a-6a13-0438040820cf.png)


- タブから「キー」を選択して、鍵の追加→新しい鍵を作成
![Untitled (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/5f9259aa-0f2c-5194-9bf5-f1547e0fd3c4.png)


- Json形式を選択して作成する→認証情報が含まれたキーをPC上に**credentials.jsonというファイル名で**ダウンロードしてください。Next.jsの場合は、プロジェクトのルートに置いておけば良いですが、GitHubでPushしないようにignoreに追加するのを忘れないでおいてください！！
![Untitled (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/2c44b5ba-f311-c1dc-70fe-05a47727b334.png)


## ****Google Analytics の閲覧権限を付与****

- GoogleAnalyticsにログインして計測データを取得したいプロパティを選択
- この時プロパティの設定からプロパティIDを控えておいてください
- プロパティのカラムに「プロパティのアクセス管理」という項目があるので選択
- ＋ボタンからユーザ追加
- メールアドレスの欄に、先ほどダウンロードしたJsonファイルの中のメールアドレスを張り付けてください。権限は取得だけなら閲覧者で大丈夫です
![Untitled (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/705a6761-a096-f99f-0d48-06b5452475b2.png)


# Next.js側でAPIエンドポイントを作成

ここからコードです。

Next.jsは/src/pages/apiディレクトリの配下にAPIエンドポイントを作成して、サーバーサイドでAPIを使って取得したデータをこのエンドポイントから取得できます。

## まずは必要なインストール

```
npm install @google-analytics/data
```

## Jsonファイルのエンコード

Vercelの公式ドキュメントでは、プライベートキーなどの秘密情報をそのまま環境変数に設定するのではなく、秘密情報を含むファイル全体を環境変数として設定することを推奨しています。この方法を使用する場合、credentials.jsonファイル全体をBase64でエンコードして環境変数として設定し、コード内でデコードして使用します。

以下のコマンドでエンコードします。"path_to_your_credentials.json”はJsonファイルのパスに置き換えてください。

WindowsのPowershell

```
[System.Convert]::ToBase64String([System.IO.File]::ReadAllBytes("path_to_your_credentials.json"))
```

Macのターミナル

```
base64 "path_to_your_credentials.json"
```

ここで作成した文字列を、ルートの.env.localファイルで環境変数に定義しておきます

```json
GOOGLE_CREDENTIALS_BASE64="base64string"
```

## 続いてAPIリクエストで必要なデータの取得

src/pages/apiディレクトリの配下に新しくファイルを作成します

```jsx
src/pages/api/fetchData.ts

import { NextApiRequest, NextApiResponse } from "next";
import { BetaAnalyticsDataClient } from "@google-analytics/data";

const propertyId = "Your property ID"; // 先ほどのプロパティIDに置き換えてください。

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
	try {
		const credentials = JSON.parse(Buffer.from(process.env.GOOGLE_CREDENTIALS_BASE64, "base64").toString("ascii"));
		const analyticsDataClient = new BetaAnalyticsDataClient({ credentials });

		const [response] = await analyticsDataClient.runReport({
			property: `properties/${propertyId}`,
			dateRanges: [
				{
					startDate: "2021-01-01",//取得したい期間を設定
					endDate: "today"
				}
			],
			dimensions: [
				{
					name: "pagePath" //ページのパスを取得
			   }
      ],
			metrics: [
				{
					name: "screenPageViews" // PV数を取得
				}
			]
		});

		const rankingData = response.rows.map((row) => ({
			pagePath: row.dimensionValues[0].value,
			uniquePageviews: row.metricValues[0].value
		}));

		res.status(200).json(rankingData);
	} catch (error) {
		res.status(500).json({ statusCode: 500, message: error.message });
	}
}
```

- `const credentials = JSON.parse(Buffer.from(process.env.GOOGLE_CREDENTIALS_BASE64, "base64").toString("ascii"));`で先ほどエンコードしたbase64をデコードしています
- `const analyticsDataClient = new BetaAnalyticsDataClient({ credentials });`でAPIのクライアントを作成する際にデコードしたものを渡します
- propertyIdはグーグルアナリティクスのプロパティIDです。こちらも環境変数から取得するようにすると良いと思います
- dev環境ならhttps://localhost3000/api/fetchDataのパスにアクセスするとデータが取得できれば成功！

## エンドポイントからデータを取得

例えばこんな感じで試してみてください

```jsx
useEffect(() => {
		const fetchData = async () => {
			const res = await fetch(`/api/fetchData`);
			const data = await res.json();

			if (!Array.isArray(data)) {
				console.error("Data is not an array:", data);
				return;
			}
      console.log(data)
		fetchData();
	}, []);
```

# さいごに

参考にした記事

****[Node.js (TypeScript) で Google Analytics Reporting API v4 を使用する方法](https://fwywd.com/tech/ga-popular-node-ts)****

**[【Google Analytics】Google Analyticsでビューが表示されないとき・・・されないときー](https://www.e-f.co.jp/blog/33326/)**

****[GoogleアナリティクスのAPIをNode.jsから触る](https://qiita.com/n0bisuke/items/fde53bab3f3b5bfbdfc9)****

以上でNext.jsのプロジェクトでGA4からAPIでデータを取得する方法でした。

実際の利用しているのはコチラのサイトです。

試しに見てみてくださいね～

[投稿小説閲覧サイト| Lit:Bite｜ランキングページ](https://next-novel-site.vercel.app/ranking)

それでは！