Cloudflare Meet-up Online で Zaraz について LT してきました #CloudflareUG_www

Zaraz はサードパーティツールを読み込むためのソリューションですよ

ウィスキー、シガー、パイプをこよなく愛する大栗です。

先日 Cloudflare Meet-up の Online の回に参加して Zaraz について LT をしてきたので、内容をまとめてみようと思います。(書こう書こうと思ってたら遅くなりました。。。)

Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~

Zaraz 試してみた

Zaraz が一般公開になりました。

Cloudflare Zarazが強化:一般公開版と新価格設定

Zaraz とは GA4 などのサードパーティツールを読み込むための開発者やマーケティング担当者が使用するソリューションです。

Zaraz を使用しない場合は、クライアントから各ツールにアクセスするため別ドメインの名前解決やハンドシェイクを行うためパフォーマンスが低下します。

しかし Zaraz の場合は独自の JavaScript を発行して Cloudflare を経由してアクセスするため、サイトと同じドメインにアクセスします。そのため個別の名前解決やハンドシェイクが不要になります。

サーバーサイトのタグマネージャが近い動作をしますが、Cloudflare 内に組み込まれているため独自のインフラ運用が不要で、マーケティング担当者でも導入できるようになります。

実際に Zaraz を使ってみます。

前提として、以下の環境です。

Mixpanel については以下のブログが詳しいので参照ください

売上上げたいならmixpanelをこう使え!#devio2023

Zaraz のコンソールから対象のツールを選択します。カスタムの HTML や Workers なども選択できるので、ツールの一覧が掲載されていなくとも対応可能です。

また、皆さんが好きなツールも選択できるので大丈夫そうですね!(サービス名称が古い。。。)

あとは Mixpanel 向けの初期設定を行い、アクションを設定します。

Request Map Generatorでアクセスするリソースを確認します。Zaraz の有無で www.googletagmanager.com へのアクセスが変わります。Mixpanel へのアクセスも変わってくると思ったのですが、私の設定に問題があるのかもしれません。

パフォーマンスにも変化があると思ったのですが、元のページが軽すぎて有意義な差が出ませんでした。。。

Zaraz はツール利用の同意管理も行えるので確認してみます。

言語ごとのメッセージを設定して、同意を得るときのポップアップを設定します。サイトに初めてアクセスするときに Cookie 設定の同意ポップアップが表示されるようになります。

  • Zaraz はマーケティング担当も使えるサードパーティツールを読み込むためのソリューションです
  • サーバーサイドのタグ管理が行えて、フルマネージドなので運用は必要ありません
  • Zaraz が自動的にサイトに JavaScript を埋め込むのでコードの変更も不要です
  • ちなみに WordPress 向けの高速化ソリューションでAutomatic Platform Optimization for WordPress があります

さいごに

Web サイトの運用を行っていると、様々なサードパーティツールを埋め込んでいると思います。しかし多数のツールを埋め込むと、サイトのパフォーマンスが悪くなり、パフォーマンス計測ツールなどで警告されます。Cloudflare では Observatory がありますが、Reduce the impact of third-party codeの対策として Zaraz の利用が推奨されます。サードパーティツールによるパフォーマンス低下が問題の場合には Zaraz の利用を検討してみてください。