Vercelで公開しているサイトに、Google アナリティクス4（GA4）のアクセス解析を追加しました。あわせて、Vercelの固定URLから正式な独自ドメインへ転送する設定も行いました。
今回は、すでに運営している別サイトと同じGA4測定IDを使う構成です。設定時につまずいた点も含めて、あとから見返せるように手順をまとめます。
※記事内のドメインと測定IDは説明用の例です。実際に設定するときは、ご自身の値に置き換えてください。
作業前の状態
サイト本体は作成済みで、Vercelから公開しています。独自ドメインの接続も完了している状態から作業を始めました。
今回行うのは、次の2つです。
- サイトにGA4のアクセス解析を追加する
- Vercelの固定URLから独自ドメインへ転送する
Search ConsoleとGA4の違い
最初に、Googleの2つのサービスの役割を整理しました。
| サービス | 主に確認すること |
|---|---|
| Search Console | Google検索からのクリック数や検索キーワード |
| GA4 | サイトへの訪問やページの閲覧状況 |
今回追加したのはGA4です。Search Consoleへの登録や所有権確認は、別途行います。
GA4の測定IDを設定する
今回は、既存サイトと同じGA4測定IDを使用しました。
同じIDを使うと、複数サイトのデータが同じ場所に集まります。サイト単位で確認するときは、GA4の探索などで「ホスト名」を使って絞り込みます。
設定する環境変数は、次の形式です。
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
G-XXXXXXXXXX の部分を、使用するGA4測定IDに置き換えます。
この環境変数名は今回の実装で使っているものです。別の構成のサイトでは、コード側が読み込む名前に合わせてください。
設定ファイルを保存するだけでは計測されない
測定IDを手元のファイルに保存するだけでは、公開サイトの計測は始まりません。
必要なのは、次の3つです。
- サイト側にGA4の計測処理を追加する
- 公開環境に測定IDを登録する
- コードと設定を反映して再公開する
今回のサイトでは、共通レイアウトからGA4の計測処理を読み込むようにしました。
ローカル用の環境変数ファイルはGit管理外にしているため、その設定はVercelへ自動では反映されません。公開環境にも登録します。
Vercelに環境変数を登録する
作業時のVercel画面では、次の順で設定画面を開きました。
- 対象プロジェクトの「Settings」を開く
- 「Environments」を開く
- 「Production」を選ぶ
- 「Environment Variables」の「Add Environment Variable」を押す
入力する内容は次のとおりです。
| 項目 | 設定内容 |
|---|---|
| Type | Config |
| Key | NEXT_PUBLIC_GA_ID |
| Value | 使用するGA4測定ID |
| Environments | Production |
Vercelの画面構成は変更される場合があります。ここでは、実際の作業時に表示された項目名を記載しています。
「Secret」を選ぶとエラーになった
最初は「Secret」を選んだ状態で入力したため、公開用の接頭辞が付いているというエラーが表示されました。
今回の NEXT_PUBLIC_GA_ID は、ブラウザで使用する公開用の設定です。そのため、種類を**「Config」へ切り替える**ことで保存できました。
NEXT_PUBLIC_ を削除する必要はありません。
なお、パスワードやAPIの秘密キーを、この方法で公開用の変数に入れてはいけません。GA4の測定IDと秘密の認証情報は区別します。
再公開してGA4の計測を確認する
環境変数を保存したら、GA4の計測処理を追加したコードと一緒に反映して再公開します。
確認の流れは次のとおりです。
- 公開サイトを開く
- サイト内でページを移動する
- GA4の「リアルタイム」でアクセスを確認する
今回の実装では、ページ移動の計測にGA4の拡張計測を使っています。GA4側の「ページビュー」と「ブラウザの履歴イベントに基づくページの変更」の設定も確認します。
広告ブロッカーなどの影響で計測されない場合があるため、記録が見えないときはブラウザ側の設定も確認します。
Vercelの固定URLを独自ドメインへ転送する
次に、Vercelの固定URLへアクセスした場合も、正式な独自ドメインへ転送するようにしました。
転送の方向は次のイメージです。
Vercelの固定URL
↓
<https://events.example.com/>
「Domains」メニューが見つからなかった
今回の画面では、Settingsの左メニューに「Domains」がありませんでした。
そのため、次の順でドメイン管理画面を開きました。
- 「Settings → Environments → Production」を開く
- 「Domains」欄を探す
- 「Project domain settings」をクリックする
リンク先に、独自ドメインとVercelの固定ドメインが表示されました。
転送元のドメインを編集する
ドメイン一覧では、Vercelの固定ドメイン側の「Edit」を押します。
独自ドメインは転送先なので、編集する行を間違えないようにします。
設定手順は次のとおりです。
- 「Redirect to Another Domain」を選ぶ
- 「308 Permanent Redirect」を選ぶ
- 転送先に正式な独自ドメインを選ぶ
- 「Save」を押す
保存後、一覧に「308」と転送先のドメインが表示されました。
最後にVercelの固定URLを開き、ブラウザのアドレスが独自ドメインへ変わることを確認します。
公開版専用の長いURLとは区別する
Vercelには、固定ドメインとは別に、デプロイごとに生成される長いURLもあります。
今回設定したのは、ドメイン一覧に登録されている固定ドメインのリダイレクトです。過去のデプロイに対応するURLも、すべてまとめて転送する設定ではありません。
読者や利用者に案内するURLは、正式な独自ドメインに統一しておきます。
作業後に確認すること
設定を保存したことと、実際に動作していることは分けて確認します。
- GA4のコードと測定IDを反映して再公開したか
- GA4のリアルタイムにアクセスが記録されるか
- 対象サイトのホスト名でデータを絞り込めるか
- Vercelの固定URLから独自ドメインへ転送されるか
- Search Consoleの登録・所有権確認が済んでいるか
あとから作業を再開するときは、この確認項目から見直します。特に、ローカル設定と公開環境の設定、GA4とSearch Consoleをそれぞれ別の作業として覚えておくと、手順を整理しやすくなります。
コメント