Cloudflare Zarasで、Astro / Cloudflare Pagesで公開しているサイトにGA4を追加してみた
Cloudflareでは、Google Analytics 4(GA4)などのサードパーティツールを利用するための仕組みが提供されています。この仕組みを利用すると、サイトやアプリケーションのコードを変更せずに、トラッキングコードなどを追加することができます。具体的な設定手順についても説明されており、Zarasというツールを使用することで、GA4の機能を追加することができます。Zarasを使用することで、カスタムなトラッキングを行いたい場合に便利であり、メンテナンスの手間も軽減されるとのことです。また、WordPressなどの管理画面から設定するわけではないため、ユーザーの操作ミスによる問題も避けられます。
目次
Cloudflareには、GA4や各種SNS・マーケティング / アフィリエイトツールなどを利用するためのサードパーティツールを集約管理する仕組みが用意されています。
「サイト・アプリケーション側のコードを触らずに、トラッキングコードなどを追加できる」と聞いたので、早速触ってみました。
Google Analytics 4(GA4)のプロパティを用意する
今回設定するサイトは、そもそもGAを設定していませんでした。なのでまずはプロパティを作ります。

サイトのドメインとストリーム名を設定するなどの作業は、通常の手順と全く同じです。

[測定ID]が発行されました。これをコピーして、Cloudflareダッシュボードに移動しましょう。

Cloudflare Zarasで、GA4を登録する
Cloudflareのダッシュボードに移動し、登録済みのドメインから[Zaras]メニューに移動しましょう。

[新しいツールを追加する]ボタンをクリックすると、どのツールを追加するかの選択画面が表示されます。

今回はGA4なので、[Google Analytics 4]を選びましょう。

概要が表示されますが、英語なので適宜翻訳ツールを使って読むことをお勧めします。

アクセス権の設定も行いましょう。今回はデフォルトのまま進めます。

最後にMeasurement ID
の入力を求められます。ここで先ほどコピーした、G-
からはじまるIDを入力します。

保存すると、ツールアクションが追加されます。
ちょっと時間をおいてGA4の管理画面にアクセスすると、トラフィックが表示されます。

Zarasを設定してみての感想
カスタムなトラッキングを行いたい場合(細かくコンバージョンを取りたいケースなど)では、これまで通りアプリケーションコード内でトラックイベントを行うほうがよいかなとは思います。(もしZarasでもカスタムなイベントトラッキングができる様子でしたら、SNSなどで教えてもらえると嬉しいです)
とはいえ、「GA4のためにプラグインを追加して、そのメンテナンスコストを計上する」ことを考えると、基本はZarasに任せてしまってもよいのかなとは思います。
なにより、WordPressなどの管理画面から設定するわけではないので、ユーザーの操作ミスなどでコードが消える恐れがなくなるのは、いいことです。