ISSUEではトピックにページビューの情報を持たせています。
そのページビューは連携先のGA4から取得しています。

この実装をするにあたって、UA(ユニバーサルアナリティクス)とGA4の情報がネットに混在していて紛らわしかったので、GA4の実装を記事にしました。

今回作ったもの

トピック詳細ページにページビューを表示します。

Next.jsプロジェクトをFirebaseHostingからAppEngineへ移行した理由

UAとGA4どちらで実装すべきか

もし今GA4を使っているならGA4で実装した方がいいでしょう。
UAは 2023年7月1日にはサポートが終了します。

GA4を使いながらオプションでUAプロパティも作成し、ViewIDを使ってUAのデータを取得する方法もあります。しかし、この方法はGA4で計測しているデータを取ることができません。

また、すでにGA4で計測を開始してて新規でUAプロパティを追加すると追加されるまでのGA4のデータが引き継がれるわけでもありません。

どのライブラリを使うか

Google Data APIを使ってください。GA4用の新しいAPIです。紛らわしいのは、UA用のAPIであるGoogleAnalyticsReportingAPIです。こちらは使用しません。

GAデータをAPIで取得できるようにする(設定編)

ページビュー数を取得したいプロジェクトでGAデータをAPIで取得できるようにします。

APIを有効化する

プロジェクト内でライブラリ検索をしてAPIを有効化します。

【手順】

• APIとサービス > ライブラリ

*「Google Analytics Data API」で検索

• 「有効にする」ボタンを押す

① APIとサービス > ライブラリ

② 「Google Analytics Data API」で検索

③ 「有効にする」ボタンを押す

GAにアクセスできるようにする

先ほどは、GAのAPIを使えるようになりましたがまだGAへのアクセス権限がありません。
サービスアカウントを作成し、そのアカウントをGAに招待することで権限を手に入れることができます。

【大まかな手順】

• サービスアカウントを作成し、アカウントの権限情報を持つキーをダウンロードする
• 作成したサービスアカウントをGAのユーザーに追加する

サービスアカウントを作成し、アカウントの権限情報を持つキーをダウンロードする

① IAMと管理 > サービスアカウント

②「+サービス アカウントを作成」を押す

③ サービスアカウント名を入力し、「完了」ボタンを押す

④ 作成したアカウンのリンクをクリックして、キーを作成(鍵を追加)しダウンロードする

⑤ サービスアカウントのメールをコピーする

⑥ ⑤をGA上で招待する

GAデータをAPIで取得する(コード編)

用意したサービスアカウントはGAのアクセス権限を持っています。
そのサービスアカウントとしてAPIリクエストを送れば、GAの計測情報を取得できます。

【手順】

• ①. サービスアカウントのキー(json)を読み込んでAPIリクエストに権限を付与
• ②. 取得したい日付、属性を指定してデータを取得

dimensions(寸法)について

dimensionsはページビューを取得したいので、pagePathを指定します。
ページのパスごとに情報を返してくれます。

https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema#dimensions

metrics(指標)について

activeUsersを使用します。
これはサービスの方針にもよりますが、ページを読んだユニークなユーザー数ならactiveUsersが最適です。

• screenPageViews - ページが表示された回数(同じユーザーでも計測されるのでユーザーは重複する)
• activeUsers - ページを訪れたユニークなユーザーの数(重複×)
• newUsers - そのサイトを始めて訪れた新規ユーザーの数(ページを訪れても初めてそのサイトを訪れていなければ計測されない)

https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema#metrics

終わりに

これまでGA4を使ってうまくページビューを取れませんでしたが、今回は対応してるAPIを見つけたので実装することができました。UAはあと1年でサポート期間が切れるので、UAベースの実装は控えてGA4対応の実装をしていくのがおすすめです。