Next.jsのWebアプリにGA4設定してみた

はじめに

個人開発のWebアプリを使ってデータ分析・解析をやってみたいなと思いGoogleアナリティクスを設定しました。実は以前にもUniversal Analyticsは利用経験がありましたが、そろそろGoogle Analytics 4へ移行する必要があるとのことだったので、もろもろ設定方法をまとめてみました。 なお、以下略称まとめです。

• Googleアナリティクス（以下、GA）：総称
• Google Analytics 4（以下、GA4）：最新バージョン現行バージョン
• Universal Analytics（以下、UA）：現行バージョン旧バージョン

前提

• Next.jsでWebアプリ作成+公開済み
• Googleアナリティクスのアカウント未作成

今回設定の流れとしては、GA4設定 > Next.jsプロジェクト設定 > Vercel設定の大きく2ステップとなります。

Google関連の設定

GA4設定（1/3）- 基本設定（前半）

GA4の基本設定については、こちらのURLから以下の流れです。 "1.アカウントの作成" → "2.プロパティの作成" → "3.お店やサービスの詳細" → "4.ビジネスの目標" → "5.データの収集" GA4用に新しくアカウントから作っていきましょう。

1.アカウントの作成（GA4）

• アカウントの詳細：
  • アカウント名を入力します。何でも大丈夫です。ここで作ったアカウントの下に複数のプロパティを作成することが可能です。
• アカウントのデータ共有設定：
  • 個人のGA4アカウントで収集したデータの、Googleへの共有範囲を管理する設定です。チェックは任意です。「次へ」を選択します。

2.プロパティの作成（GA4）

• プロパティの詳細：GA利用経験はありますが、GA4用に新しくアカウントから作っていきましょう。
  • プロパティはデータを収集・分析したいWebサイトごとに作成します。プロパティ名・タイムゾーン・通貨を指定します。それぞれ何でも大丈夫ですが、タイムゾーン・通貨はとりあえず日本で良いでしょう。ちなみに通貨を設定してはいますが、今回の設定で費用は発生しませんのでご安心を。「次へ」を選択します。

3.お店やサービスの詳細（GA4）

• ビジネスの詳細：
  • 今回の設定において重要な情報ではありません。Google様への貢献です。「次へ」を選択します。

4.ビジネスの目標（GA4）

• ビジネスの目標：
  • この項目はダッシュボード利用時のレポート画面に影響を及ぼすため、GA4の利用目的に沿って選択しましょう。なお、「ベースラインレポート」を選択した場合は、汎用性の高いレポート画面が表示されます。「作成」を選択します。
• 利用規約：
  • ビジネスの目標を設定すると、利用規約のモーダルが表示されるので、内容を確認してチェックしたあと次に進みます。

5.データの収集（GA4）

• ここで収集データの設定もできますが、一旦「今回はスキップ」を選択後、「データ収集を設定」を選択しましょう。

GA4設定（1/3）- データストリーム作成（後半）

上記5.で「データ収集を設定」を選択後、データ収集を開始するために"データストリーム" を設定します。"データストリーム" とは、Webサイト・Webアプリ・スマホアプリ等からデータを吸い上げてプロパティに流し込むための仕組みぐらいに考えておいてください。Webサイトからの場合は"ウェブストリーム"、スマホアプリからは"アプリストリーム" を作成します。

• まずは（モーダルで隠れてしまっていますが、）プラットフォームとして「ウェブ」を選択すると以下画面のように、"データストリームの設定"というモーダルが右から出現します。※赤の網掛け部分はアカウント名やプロパティ名になります。
• "ウェブストリームの設定"では"ウェブサイトのURL"と"ストリーム名"を入力していきます。この時点でいくつかのイベントがデフォルトで有効となっていますが、後から編集可能なので今回は一旦このまま「ストリームを作成」しましょう。
• すると、下画面のように「ウェブストリームの詳細」が表示されます。"ウェブサイトのURL"・"ストリーム名"は前画面で設定した通りですが、これに加えて"ストリームID"と"測定ID"が新たに生成されていることが分かります。"ストリームID"は一意の識別子として振られていますが差し当たり必要にはなりません。一方で"測定ID"については次のステップで設定時に必要になるものです。また、画面右上に「タグの実装手順を表示する」とあるように、現段階でこの測定IDが埋め込まれていないのでエラーが出ています。Google様に急かされているので仕方がありませんね、続きましてNext.jsプロジェクト側の設定です。

Next.jsプロジェクトの設定

Scriptの埋め込み（Next.js）（2/3）

基本的にはVercel/Next.jsのレポジトリを参考にしています。

.envファイルの作成

• まず.envファイルにNEXT_PUBLIC_GA_TRACKING_IDと測定IDを入力して、これから作成するファイルで受け取れるようにします。こちらは一旦はローカルでしか使いません。本番環境における設定方法は次のステップでの説明となります。

.gitignoreファイルへの追記

• .envファイルで設定した内容はローカルでしか使わないため、.gitignoreファイルでそのように管理しましょう。.envと記載するだけですが。

gtag.jsファイルの作成

• .envファイルで設定した測定IDに対して、GA4にイベントデータを送信するための設定です。
• (l.4~8)：ページビューを測定しています。UAベースの設定（URL）になっているためGA4向けに移行が必要になりますが、ここではページのURLを送っています。
• (l.11~17)：イベントのカテゴリとラベルに応じた値を送っています。同じくUAベースでの設定（URL）となっているので、スニペット上のURLを参考にすると良いかもしれません。

_app.jsファイルの変更

• データ収集のためには全ページで共通に設定させる必要があるので、_app.jsを修正していきます。
• なおbuild時にエラーが出る場合は、<script>タグ内に、asyncを追加してあげると上手くいくかもしれませんので必要に応じて試してみてください。

Vercelの設定

環境変数の設定（3/3）

今回はVercelにデプロイしましょう。Next.jsプロジェクト設定時に、.envファイルにGA4の測定ID（Gから始まるもの）を埋め込みましたが、同時にリモートレポジトリにpushされないように.gitignoreファイルも用意しました。そのため、本番環境でも測定IDを利用するにはVercel側での環境変数設定が必要になります。

• 環境変数を設定するには[Settings] > [Environment Variables]で上の画面にいきます。
• .envファイルと同様に、KeyにNEXT_PUBLIC_GA_TRACKING_ID、Valueに測定IDを入力後、すぐ下のProductionというチェックボックスにチェックを入れます。終わったら「Save」ボタンを押して環境変数は設定完了です。
• 最後にいつも通りデプロイを実施します。

まとめ

うまく設定できていれば、GA4のダッシュボードは以下のようにカウントされていると思います。あとはイベントが正しくカウントされているかどうか、リアルタイム等を見ながら確認してみましょう。例えばページ内にフォームがあれば入力してみると、"form_start"のようなイベントがカウントされているかと思います。

参考

GitHub - Vercel/Next.js Next.js で GTM + GA4を利用する(https://zenn.dev/keitakn/articles/nextjs-google-tag-manager) Next.js に Google Tag Manager を設定する