iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
Cloud Native

江湖在走,Cloudflare 要懂,懂得天天吃板橋湳雅夜市系列 第 19

第19天 Cloudflare Zaraz :插入任何 JS / 千尋味酸辣粉 | 30天板橋湳雅夜市

  • 分享至 

  • xImage
  •  

Cloudflare Zaraz 是 Cloudflare 推出的「第三方工具管理平台」,專門用來集中管理 Google Analytics、Meta Pixel、聊天客服工具、廣告 SDK 等第三方腳本。
它最大的特色是把這些工具的邏輯搬到 Cloudflare 邊緣節點執行,減少使用者瀏覽器端需要跑的 JavaScript,達到 更快的載入速度、隱私保護與安全性提升


Zaraz 和 Google Tag Manager 很像

如果你有用過 Google Tag Manager (GTM),會發現 Zaraz 的概念非常接近:

  • 統一管理第三方腳本:不用在網頁上一個個硬塞追蹤碼,而是集中在 Zaraz 後台管理。
  • 事件觸發器 (Triggers):可設定「Pageview」、「Click」、「表單送出」等條件,決定什麼時候執行腳本。
  • 變數 (Variables):可設定共用參數,在不同腳本間共用。
  • 自訂 JS 插入:最重要的是,可以像 GTM 的「Custom HTML Tag」一樣,直接貼上任何 JavaScript 語法,由 Zaraz 在觸發時注入。

插入 JS 的範例

在 Zaraz 後台 → Add Tool → Custom HTML,貼上你的腳本並設定觸發條件,例如:

<script>
  console.log("Hello from Cloudflare Zaraz!");
  // 可以放任何你要的追蹤程式碼或 SDK
</script>

效果和 GTM 幾乎一樣,但最大的不同是:
Zaraz 可以把部分執行邏輯搬到 Cloudflare 邊緣 (Edge),讓使用者端的 JS 負擔更小。


Custom HTML vs Custom Managed Component

Zaraz 提供兩種主要方式讓你插入自訂程式碼:

  1. Custom HTML

    • 最簡單的方式,類似 GTM 的 Custom HTML Tag。
    • 直接把 <script> 貼進去,由 Zaraz 注入到頁面。
    • 適合快速測試、插入 SDK、或簡單追蹤碼。
  2. Custom Managed Component

    • 進階玩法,把你的工具封裝成「Managed Component」。
    • 可轉成 Cloudflare Worker,在邊緣執行邏輯。
    • 適合效能敏感或需要更細緻控管的情境。

Cloudflare Apps 已下線

過去 Cloudflare 有提供 Cloudflare Apps,讓管理員像裝外掛一樣,把第三方小工具加到網站裡。
但 Cloudflare 已經公告 Apps 功能下線,不再支援新安裝

現在如果你要新增第三方腳本或功能,官方建議:

  • 單純插入腳本 → 用 Zaraz Custom HTML
  • 需要進階整合 → 用 Custom Managed ComponentCloudflare Workers

為什麼用 Zaraz?

  • 效能更好:大量第三方邏輯搬到邊緣執行,不拖慢瀏覽器。
  • 安全與隱私:集中控管,避免瀏覽器直接載入外部 JS,降低風險。
  • 易於維護:不用每次改前端程式碼,後台就能切換追蹤工具。
  • 上手快速:操作方式和 GTM 類似,熟悉 GTM 的人學習成本低。

總結

Cloudflare Zaraz 就像是 跑在 Cloudflare 上的 GTM
你可以用它集中管理第三方工具、設定觸發器與變數,甚至直接插入任何 JavaScript 語法(Custom HTML)。
和 GTM 不同的是,Zaraz 把更多邏輯搬到邊緣執行,帶來更快、更安全的體驗。

舊的 Cloudflare Apps 已經走入歷史,現在如果要在 Cloudflare 上加掛第三方功能,首選就是 Zaraz

https://ithelp.ithome.com.tw/upload/images/20250820/20163416m01WrQqWwQ.png

千尋味重慶名吃酸辣粉

  • 店名:千尋味重慶名吃酸辣粉
  • 地址:新北市板橋區南雅東路16 號
  • 營業時間:週三到一11:00–23:30
  • Google Maps
  • 本系列地圖
    https://ithelp.ithome.com.tw/upload/images/20251004/20163416HZh1ZGeOwC.jpg

這家酸辣粉真的很帶勁,聽老闆口音就知道是重慶人,夠辣夠麻,小麵好吃

https://ithelp.ithome.com.tw/upload/images/20251004/20163416FUuF6U1z1N.jpg


上一篇
第18天,Cloudflare Gateway 裝置網路守門員 / 蚵仔之家 | 30天板橋湳雅夜市
系列文
江湖在走,Cloudflare 要懂,懂得天天吃板橋湳雅夜市19
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言