第4回 Google Analyticsをゆまラボへ導入する―GA4を設定してリアルタイム計測まで確認

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

執筆：ゆまラボ運営者

公開：
第4回 Google Analyticsをゆまラボへ導入する―GA4を設定してリアルタイム計測まで確認

第3回では、Cloudflare Web Analyticsで現在のアクセス状況を確認し、今後はGoogle Analyticsも使うことにした。

Cloudflareはそのまま残す。Google Analyticsは、記事ごとのアクセスや流入元を見たり、将来Data APIから人気記事のデータを取得したりするために使う予定だ。

まだGoogle Analyticsの設定は何もしていなかったので、今回はアカウント作成から始める。

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タグの検出に成功
↓
リアルタイムレポートでアクセスを確認

第3回で決めたとおり、Cloudflare Web Analyticsも残している。

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

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

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

参考#

連載：サイトを作ったら ― 運用・SEO・SNS

サイト運用アクセス解析

Astroブログは記事が増えると何が変わるか―分類・検索・保守とアクセス解析の実例

記事数が増えたAstroブログで、分類、ページネーション、検索、内部リンク、リンク切れ確認など何が必要になったかを、ゆまラボの実例とアクセス解析から増えていく機能を分けて確認します。

サイト運用アクセス解析

第3回 人気記事を自動表示したい―Cloudflareでも見られるがGoogle Analyticsを使うことにする

ゆまラボのトップページに直近30日の人気記事を自動表示するため、Cloudflare Web Analyticsで現在見られるデータを確認し、今後の分析やData APIでの自動取得を考えてGoogle Analyticsも使うことにした。