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
   

   View Slide

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
   

   View Slide

3. Zaraz 使ってますか？
   #CloudflareUG_www
   

   View Slide

4. 私は使っていません
   （Webの運用とか解析やってない）
   #CloudflareUG_www
   

   View Slide

5. 先週 Zaraz が GA しました
   #CloudflareUG_www
   

   View Slide

6. Zaraz とは
   GA4 などのサードパーティツールを読み込むための開発者
   やマーケティング担当者が使用するソリューション
   Webサイトの変更追加なくツールを追加できます
   サードパーティツールの多用によりパフォーマンスの
   悪化やサードパティ Cookie の利用を行う必要があるがZaraz
   でパフォーマンスとプライバシーを強化します
   ※：Web解析等に縁がないので不正確な情報があるかも
   #CloudflareUG_www
   

   View Slide

7. Zaraz とは
   Zaraz を使用していない場合、
   クライアントが別ドメインへ
   アクセスするので名前解決や
   ハンドシェイクでパフォーマンスが
   低下
   #CloudflareUG_www
   

   View Slide

8. Zaraz とは
   Zaraz がサイトと同じドメインから
   独自の JavaScript を発行
   Zaraz 経由でサードパーティツー
   ルにアクセスする
   #CloudflareUG_www
   

   View Slide

9. 類似のソリューション
   サーバーサイドのタグマネージャに近い動きをします。
   例えばサーバーサイド Google Tag Manager の場合は、
   サーバーサイドのインフラとして、別途 App Engine や
   Cloud Run を動かす必要があります。
   Zaraz は CDN に組み込まれておりフルマネージドなので運用
   負荷を大幅に低下でき、マーケティング担当者でも導入でき
   ます。
   #CloudflareUG_www
   

   View Slide

10. やってみた
    #CloudflareUG_www
    

    View Slide

11. やってみた
    前提
    ● WordPress 6.2.2 でサイトを立てる
    ○ 今回は Amazon Lightsail を利用
    ○ Cloudflare を使用している状態
    ● Zaraz 経由と GTM 経由のツールでの違いを見てみる
    ○ Mixpanel を導入して確認
    ○ Googleタグ マネージャーを使ってMixpanelを初期導入してみる
    https://dev.classmethod.jp/articles/d9ced1faa336b46ab5b6f4c5e139134dc51a280b/
    #CloudflareUG_www
    

    View Slide

12. Mixpanel？
    Mixpanelとは「プロダクト分析ツール」と言われているもの
    で、プロダクトを利用しているユーザーの行動データを分析
    する機能を持っています。
    詳しくはこちら！
    https://dev.classmethod.jp/articles/mixpanel-devio2023/
    #CloudflareUG_www
    

    View Slide

13. サンプルサイト
    適当に重い画像を10枚ほど載せる
    #CloudflareUG_www
    

    View Slide

14. サードパーティツールの設定
    Zaraz のコンソールからツールを選ぶ
    #CloudflareUG_www
    

    View Slide

15. サードパーティツールの設定
    Zaraz のコンソールからツールを選ぶ
    #CloudflareUG_www
    

    View Slide

16. サードパーティツールの設定
    Mixpanel の初期設定
    #CloudflareUG_www
    

    View Slide

17. サードパーティツールの設定
    アクションの設定
    #CloudflareUG_www
    

    View Slide

18. 動作の確認！
    #CloudflareUG_www
    

    View Slide

19. サードパーティリソースの確認
    Request Map Generator でチェック
    Zaraz なし Zaraz あり
    #CloudflareUG_www
    

    View Slide

20. パフォーマンスは？
    Observatory でチェック
    Zaraz なし Zaraz あり
    サイトが軽すぎて
    有意な差がでない。。。
    #CloudflareUG_www
    

    View Slide

21. Zaraz は
    ツール利用の
    同意管理もできます
    #CloudflareUG_www
    

    View Slide

22. 同意の管理
    言語ごとのメッセージを
    設定します
    #CloudflareUG_www
    

    View Slide

23. 同意の管理
    同意を得るときのポップアップの設定
    #CloudflareUG_www
    

    View Slide

24. 同意の表示 #CloudflareUG_www
    

    View Slide

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

    View Slide

26. View Slide