Zaraz 試してみた #CloudflareUG #CloudflareUG_www

Cloudflare Meet-up Online!! (2023/7/26) の LT で使用した資料です。 #CloudflareUG #CloudflareUG_www
https://cfm-cts.connpass.com/event/286362/

Transcript

1. Zaraz 試してみた
 Cloudflare Meet-up Online!!
 ~日本全国ユーザー大集合LT~
 クラスメソッド
 大栗 宗
 1 2023年7月26日
 #CloudflareUG_www
2. お前誰よ？ 大栗　宗（@maroon1st） クラスメソッド株式会社所属 日系SIer → クラスメソッド → 某外資 → クラスメソッド (2回目) Cloudflare Meetup は8回目の参加。東京の運営メンバー。 AWS と Google Cloud のクラウド二刀流 Top Engineer で Cloudflare のプリセールスをやってブログ書いてます • Cloudflare, Google Cloud, AWS, etc • Google Cloud Partner Top Engineer 2023 • 2023 Japan AWS Top Engineers (Database) #CloudflareUG_www
3. Zaraz 使ってますか？ #CloudflareUG_www
4. 私は使っていません （Webの運用とか解析やってない） #CloudflareUG_www
5. 先週 Zaraz が GA しました #CloudflareUG_www
6. Zaraz とは GA4 などのサードパーティツールを読み込むための開発者 やマーケティング担当者が使用するソリューション Webサイトの変更追加なくツールを追加できます サードパーティツールの多用によりパフォーマンスの 悪化やサードパティ Cookie の利用を行う必要があるがZaraz でパフォーマンスとプライバシーを強化します ※：Web解析等に縁がないので不正確な情報があるかも #CloudflareUG_www
7. Zaraz とは Zaraz を使用していない場合、 クライアントが別ドメインへ アクセスするので名前解決や ハンドシェイクでパフォーマンスが 低下 #CloudflareUG_www
8. Zaraz とは Zaraz がサイトと同じドメインから 独自の JavaScript を発行 Zaraz 経由でサードパーティツー ルにアクセスする #CloudflareUG_www
9. 類似のソリューション サーバーサイドのタグマネージャに近い動きをします。 例えばサーバーサイド Google Tag Manager の場合は、 サーバーサイドのインフラとして、別途 App Engine や Cloud Run を動かす必要があります。 Zaraz は CDN に組み込まれておりフルマネージドなので運用 負荷を大幅に低下でき、マーケティング担当者でも導入でき ます。 #CloudflareUG_www
10. やってみた #CloudflareUG_www
11. やってみた 前提 • WordPress 6.2.2 でサイトを立てる ◦ 今回は Amazon Lightsail を利用 ◦ Cloudflare を使用している状態 • Zaraz 経由と GTM 経由のツールでの違いを見てみる ◦ Mixpanel を導入して確認 ◦ Googleタグ マネージャーを使ってMixpanelを初期導入してみる https://dev.classmethod.jp/articles/d9ced1faa336b46ab5b6f4c5e139134dc51a280b/ #CloudflareUG_www
12. Mixpanel？ Mixpanelとは「プロダクト分析ツール」と言われているもの で、プロダクトを利用しているユーザーの行動データを分析 する機能を持っています。 詳しくはこちら！ https://dev.classmethod.jp/articles/mixpanel-devio2023/ #CloudflareUG_www
13. サンプルサイト 適当に重い画像を10枚ほど載せる #CloudflareUG_www
14. サードパーティツールの設定 Zaraz のコンソールからツールを選ぶ #CloudflareUG_www
15. サードパーティツールの設定 Zaraz のコンソールからツールを選ぶ #CloudflareUG_www
16. サードパーティツールの設定 Mixpanel の初期設定 #CloudflareUG_www
17. サードパーティツールの設定 アクションの設定 #CloudflareUG_www
18. 動作の確認！ #CloudflareUG_www
19. サードパーティリソースの確認 Request Map Generator でチェック Zaraz なし Zaraz あり #CloudflareUG_www
20. パフォーマンスは？ Observatory でチェック Zaraz なし Zaraz あり サイトが軽すぎて 有意な差がでない。。。 #CloudflareUG_www
21. Zaraz は ツール利用の 同意管理もできます #CloudflareUG_www
22. 同意の管理 言語ごとのメッセージを 設定します #CloudflareUG_www
23. 同意の管理 同意を得るときのポップアップの設定 #CloudflareUG_www
24. 同意の表示 #CloudflareUG_www
25. まとめ • Zaraz はマーケティング担当も使えるサードパーティツール を読み込むためのソリューション • サーバーサイドのタグ管理が行えて、フルマネージドなの で運用は必要なし • Zaraz が自動的にサイトに JavaScript を埋め込むので コードの変更も不要 • ちなみに WordPress 向けの高速化ソリューションで Automatic Platform Optimization for WordPress がある #CloudflareUG_www