はじめに
自身のNext.js製のサイトにGoogleAnalyticsを導入してPV数をカウントし、そのカウント数をAPIで取得したかったのですが、ググってもGA3の頃のやり方ばかり出てきてとても苦戦を強いられたので備忘録のためにまとめます。
何が問題だったか
GoogleAnalyticsのデータを取得するため、下記のような記事をみてトライしました。
Node.js (TypeScript) で Google Analytics Reporting API v4 を使用する方法
問題は下のスクショであるようなビューというカラムが、私の設定画面では出ないことでした。
ＧＡ４からビュー管理の画面は廃止されている
どうやらビュー管理の画面がＧＡ４になった際に廃止されているようです。
ですが、いろいろググっても出てくるのがビューIDが必要な方法ばかり。
割とさ迷いました。
【Google Analytics】Google Analyticsでビューが表示されないとき・・・されないときー
この記事のようにUAプロパティで作成すればいいようですが、今から新しいプロパティに切り替えるのは面倒。。。
さらにUAプロパティ自体が、2023/7/1で終了するとのことでした。
すぐじゃん！！
ということで調べなおし
今回APIでデータを取得しようとしたときに私が使おうとしてたのはGoogle Analytics Reporting APIだったのですがGA4からはGoogle Analytics Data APIを使えとのことでした。
APIが違ったのですね。。。
まだあまりドキュメントが多くなく弱弱な私にはよくわからに事も多いのですが、一旦Next.jsでエンドポイントを作成して、取得したデータを扱うことができました。
こちらの記事を参考にして、ChatGTPも駆使しながら行いました。
API導入手順
ここから導入手順です。
GA4の計測はすでにできているものとして話を進めます。
API有効化
まずは**Google Cloud Platform**へ登録、もしくはログインをします。
-
ダッシュボードから右端のプロジェクト作成へ
- 名前を決めて作成でOK
- 名前を決めて作成でOK
-
左上のメニューからAPIとサービス→ライブラリへ
-
検索バーでGoogle Analytics Data APIを検索して有効化
-
APIが有効ですとなっていることを確認
API 用のサービスアカウントを作成し、JSON 形式の鍵を作成
続いてAPIの利用に必要なKeyが含まれるJson形式のファイルをダウンロードします。
-
左上のメニューからIAMと管理→サービスアカウントと進みます
-
サービスアカウント名を決めて、必要があれば説明欄を記入して2と3は飛ばして完了
-
サービスアカウントが作成できたら、リストに表示されるので今作ったアカウントを選択します
-
タブから「キー」を選択して、鍵の追加→新しい鍵を作成
-
Json形式を選択して作成する→認証情報が含まれたキーをPC上にcredentials.jsonというファイル名でダウンロードしてください。Next.jsの場合は、プロジェクトのルートに置いておけば良いですが、GitHubでPushしないようにignoreに追加するのを忘れないでおいてください！！
Google Analytics の閲覧権限を付与
- GoogleAnalyticsにログインして計測データを取得したいプロパティを選択
- この時プロパティの設定からプロパティIDを控えておいてください
- プロパティのカラムに「プロパティのアクセス管理」という項目があるので選択
- ＋ボタンからユーザ追加
- メールアドレスの欄に、先ほどダウンロードしたJsonファイルの中のメールアドレスを張り付けてください。権限は取得だけなら閲覧者で大丈夫です
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ファイルで環境変数に定義しておきます
GOOGLE_CREDENTIALS_BASE64="base64string"
続いてAPIリクエストで必要なデータの取得
src/pages/apiディレクトリの配下に新しくファイルを作成します
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のパスにアクセスするとデータが取得できれば成功！
エンドポイントからデータを取得
例えばこんな感じで試してみてください
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 を使用する方法
【Google Analytics】Google Analyticsでビューが表示されないとき・・・されないときー
以上でNext.jsのプロジェクトでGA4からAPIでデータを取得する方法でした。
実際の利用しているのはコチラのサイトです。
試しに見てみてくださいね～
それでは！