Cloudflare Zaraz の効果

# Cloudflare Zaraz
[Cloudflare Zaraz](https://developers.cloudflare.com/zaraz/) は Web アプリケーションに組み込まれたサードパーティツールとの通信主体をブラウザから Cloudflare のエッジ Workers にオフロードし、セキュリティとパフォーマンス、プライバシーの向上に寄与します。

本投稿では [Google Analytics](https://analytics.google.com/) を有効にした Web サイトを例に Zaraz の効果を簡単に紹介します。

## Zaraz 導入前
テストするサイトを [Request Map Generator](https://requestmap.webperf.tools/) で確認すると下記の状態です。

![before1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/153a9355-9030-8fb0-585e-45716d82dbb7.png)

[WebPageTest](https://www.webpagetest.org/) でブラウザの挙動を見ると、当該サイトの他に [Google Tag Manager](https://tagmanager.google.com
)、Google Analytics へのリクエストが発生しています。

![before2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/d30da270-c51a-e583-a00e-2bbc7c71f890.png)

Google Analytics でのモニタリングもできています。
![Screenshot 2023-01-22 at 12.03.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/21938b4d-776d-4743-99cd-c2274bc2e71c.png)

## Zaraz 導入
この状態から Cloudflare Zaraz を使い、ブラウザとサードパーティツール Google Analytics のやり取りのオフロードを狙います。

[Cloudflare の管理画面](https://dash.cloudflare.com/)から Zaraz の設定を行います。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/a1d41c4d-49af-29d5-0bd3-888aeb99575f.png" width=30%>

1. ツールの追加で [Google Analytics 4](https://support.google.com/analytics/answer/10089681?hl=ja) を選択します

![select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/388f41e4-be30-6613-5eff-8a847a1903d8.png)

2\. 設定フローに従って進めます 

![Screenshot 2023-01-22 at 11.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/63ec3ded-2739-d487-2f55-2ece92c4d742.png)
![Screenshot 2023-01-22 at 11.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/0e521427-1f4a-44b0-a7e6-49fec59e3461.png)
![Screenshot 2023-01-24 at 21.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/17f17df8-e3ba-2ba0-cf18-a6a6075f4e33.png)

::: note
Measurement ID には当該の TagID を設定します。
:::

3\. GA4 のデフォルトでは発動トリガーとして [Pageview が設定](https://developers.cloudflare.com/zaraz/get-started/add-tool/)されています

![Screenshot 2023-01-24 at 22.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/6228a96b-c2ca-1898-53a0-3e0001ba4302.png)

Zaraz の準備ができたので、サイトに設定していたスクリプトをコメントアウトします。
```
	<!-- Google tag (gtag.js) 
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    :
	-->
```

## Zaraz 導入後

この状態で Request Map Generator を確認してみます。
Zaraz 導入前の状態と比べると、サードパーティツール Google Analytics の読み込みが見られず当該ホストとの通信のみとなっています。
![after1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/03e39842-9f97-be3c-b3e4-cbc174bf4783.png)

ブラウザからのリクエストの詳細も確認してみます。
![after2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/f6db33ab-d9e8-39c3-713b-f39c8afeba67.png)

Google Tag Manager および Google Analytics への通信が発生していません。
その代わり、オリジンサイトにはない `s.js` というスクリプトのリクエストが発生しています（5番目）。

これは一番最初のトップページのリクエストに対するレスポンス (HTML) にて、下記を含む Javascript が [Zaraz により自動的に挿入](https://developers.cloudflare.com/zaraz/reference/settings/#auto-inject-script)されたことによります。

```
:
n.src="/cdn-cgi/zaraz/s.js?
:
```
* オリジン側で挿入 [1](https://developers.cloudflare.com/zaraz/advanced/load-zaraz-manually/), [2](https://developers.cloudflare.com/zaraz/advanced/domains-not-proxied/) することも可能です。

肝心の Google Analytics はどうでしょう。
ブラウザではなく、Cloudflare から Google への通信でリアルタイムにアップデートされ、送信元の地理情報も反映されています。
![Screenshot 2023-01-24 at 22.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/c13cca7e-2199-3b10-e1b1-fc757d329161.png)
![Screenshot 2023-01-24 at 22.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/00e41b8e-6372-06c0-5939-1a84d6f0afbb.png)

また、WebPageTestの結果から想像すると、サイトパフォーマンスの向上が期待できます。
統計的ではないですが、[PageSpeed Insights](https://pagespeed.web.dev/) に食わせたところ、Zaraz 後は4ポイント Performance 値が上昇しました。

Zaraz 前
![before3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/a9539d9d-81f0-cbed-8f9b-7765adf2be9c.png)
Zaraz 後
![after3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/e7b1ff1c-0e7e-8274-51c9-569c1eee3673.png)

なお、[トリガー](https://developers.cloudflare.com/zaraz/get-started/create-trigger/)や[アクション](https://developers.cloudflare.com/zaraz/get-started/create-actions/)は個別に定義することが可能です。
たとえば、リクエストが特定ホストにマッチすることをトリガーにし、イベント名にデバイスのデイスプレイ解像度を指定した例です。
![Screenshot 2023-01-24 at 22.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/10e3e36d-db41-bb02-d4c9-b504a96cb51b.png)
![Screenshot 2023-01-24 at 22.51.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/87cfedac-0fc5-565f-74fa-85740b0ae27d.png)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218045/0b4bee52-ca0d-1357-82da-7ce0fd26d5e5.png" width=50%>

## まとめ

Zaraz を利用することで、サードパーティツールのブラウザからのオフロードとその効果について簡単ではありますが確認することができました。

Google Analytics 以外にも対応していますので、ご自身のサイトで利用されているサードパーティツールについて、一度 Zaraz 導入によるメリット・デメリットを検討されてみてはいかがでしょうか。

## その他参考リンク
Zaraz ユースケース [Cloudflare Blog](https://blog.cloudflare.com/tag/zaraz/) 
サードパーティツールの[一覧](https://developers.cloudflare.com/zaraz/reference/supported-tools/) 
Zaraz [FAQ](https://developers.cloudflare.com/zaraz/faq/)