AstroにGA4を導入する方法｜Google Analytics設定からリアルタイム計測まで

Google Analyticsを初めて設定し、ゆまラボ用のGA4プロパティとWebデータストリームを作成。AstroへGoogleタグを追加してCloudflareへ反映し、リアルタイムレポートでアクセスが入るところまで確認した記録です。

公開：更新：
AstroにGA4を導入する方法｜Google Analytics設定からリアルタイム計測まで

AstroサイトへGA4を入れようとして、 「Google Analytics側で何を作ればいいのか」 「GoogleタグをAstroのどこへ入れればいいのか」 「公開後、本当に計測できているかどう確認するのか」 と困っていないでしょうか。タグを置いただけで終わらず、リアルタイムで実アクセスが入るところまで確認しておくと安心です。

ゆまラボではGoogle Analyticsをゼロから設定し、プロパティ名をゆまラボ、タイムゾーンを日本、通貨を日本円として作成しました。AstroへGoogleタグを追加してCloudflareへ反映し、実際にリアルタイムレポートへアクセスが入るところまで確認しています。

この記事では、アカウント作成からサイト側への設置、公開後確認までを実画面で追います。「タグを貼ったが本当に計測できているか分からない」というところまで含めて、Astro＋CloudflareでGA4を導入する手順が分かります。

Google Analyticsのアカウントを作成#

Google Analyticsを開くと、最初に「測定を開始」が表示された。

Google Analyticsを初めて開いた状態

ここからゆまラボ用のアカウントを作る。

アカウント名はそのままゆまラボにした。

Google Analyticsでゆまラボ用アカウント名を入力している画面

この画面ではアカウントのデータ共有設定も選べる。

今回はまず通常のアクセス解析を始めるのが目的なので、アカウントを作って次へ進む。

GA4プロパティを作成#

次はプロパティの作成。

設定した内容は以下。

プロパティ名
ゆまラボ

レポートのタイムゾーン
日本（GMT+09:00）日本時間

通貨
日本円（¥）

GA4プロパティ名、タイムゾーン、通貨を設定している画面

サイトのアクセスを日本時間で確認したいので、タイムゾーンは日本にした。

通貨も日本円を指定する。

このあと事業情報やビジネス目標の入力画面を進み、Webサイトのデータを収集する設定へ移った。

bringain.comのWebデータストリームを作る#

データストリームでは、ゆまラボのURLを登録する。

ウェブサイトのURL
https://bringain.com

ストリーム名
ゆまラボ

bringain.comのWebデータストリームを作成している画面

拡張計測機能はONのままにした。

画面上でも、ページビューに加えてスクロール、離脱クリックなどが自動計測の対象として表示されている。

Google Analyticsの拡張計測機能では、通常のページビュー以外にもいくつかのイベントを追加コードなしで収集できる。今回は独自イベントを追加せず、この標準機能だけで始める。

Webストリームを作成すると、G-から始まる測定IDが発行された。

今回使った測定IDは以下。

G-7R6GRHH4FT

GoogleタグをAstroへ追加#

Google Analytics側で「Googleタグの設定」を開くと、手動インストール用のコードが表示された。

Google AnalyticsでGoogleタグの手動インストールコードを確認している画面

Googleの案内では、このGoogleタグをサイトの各ページの<head>直後へ入れる。

ゆまラボはAstroで作っているので、サイト全体で使っている共通側へGoogleタグを追加する形で実装を進めた。

今回記事として確認できているのは、Googleタグを追加して公開したことまで。どのAstroファイルへ追加したかなど、手元に実装報告がない部分はここでは書かない。

Google Tag Managerは使わず、GA4のGoogleタグだけを入れている。

Cloudflareへデプロイ#

Googleタグを追加したあと、Cloudflareへ反映した。

Google Analytics導入の変更がCloudflareへデプロイされた画面

デプロイ履歴には、

ゆまラボへGoogle Analytics 4を導入

という変更が反映されている。

この時点で公開サイト側の確認へ移る。

Googleタグの検出を確認#

Google Analytics側からインストールテストを実行すると、

ウェブサイトで Google タグが正しく検出されました。

と表示された。

bringain.comでGoogleタグが正しく検出された画面

これで少なくとも、公開中のbringain.comからGoogleタグを検出できる状態になった。

Googleの公式ヘルプでも、手動インストールではGoogleタグを各ページの<head>直後へ配置し、その後サイトをテストする手順になっている。

タグ自体はここで確認できた。

ストリーム画面にはまだ警告が残っていた#

タグの検出が成功したあと、Webストリームの詳細画面へ戻ると、上部にはまだ警告が出ていた。

Googleタグ導入直後のWebストリーム詳細画面

表示は、

データ収集がウェブサイトで有効になっていません。
タグを実装してから48時間以上経過している場合は、
タグが適切に設定されていることをご確認ください。

という内容。

その下には、作成したストリームと測定IDが表示されている。

タグのテストは成功しているので、この警告だけを見て設定をやり直すことはしなかった。

Google Analytics側の状態表示には反映まで時間差がある。画面にも48時間という案内が出ている。

ここでは実際にイベントが届くかを確認するため、リアルタイムレポートを見ることにした。

リアルタイムでアクセスが入った#

bringain.comを開いてからリアルタイムレポートを確認すると、データが入った。

Google Analyticsのリアルタイムレポートでbringain.comのアクセスを確認した画面

確認時点では、

アクティブユーザー（過去30分以内）
2

表示回数（過去30分以内）
3

になっている。

ページパスには、

/
 /privacy/

が表示された。

トップページだけでなく、別ページへのアクセスも計測されていることが分かる。

Googleのリアルタイムレポートは過去30分以内のアクティビティを確認できる。通常レポートの集計を待たなくても、導入直後の確認には使える。

ストリーム詳細画面の警告は残っていたが、リアルタイムで実データが入ったので、今回のGA4導入確認はここまでとした。

GA4導入で設定したもの#

Google Analyticsを初めて開いた状態から、ゆまラボのアクセスがリアルタイムへ出るところまで進めた。

実施した内容は以下。

Google Analyticsアカウントを作成
↓
ゆまラボ用のGA4プロパティを作成
↓
bringain.comのWebデータストリームを作成
↓
測定IDを取得
↓
GoogleタグをAstroへ追加
↓
Cloudflareへデプロイ
↓
Googleタグの検出に成功
↓
リアルタイムレポートでアクセスを確認

その方針どおり、Cloudflare Web Analyticsも残している。

これでCloudflare側のアクセス状況と、Google Analytics側のデータを両方ため始められる。

人気記事の自動表示はまだ作らない。まずはGoogle Analyticsへデータをためる。

ある程度データが入ったら、直近30日の記事別アクセスをどう取得するかを確認する。

参考#