Cloudflare 从入门到精通 11 Zaraz 管理网站第三方脚本

📜 前言

运营一个网站有时候需要注入一些第三方工具和脚本到网页页头或者页脚，例如：

添加流量分析工具
添加广告脚本
验证网站所有权
客服机器人
营销自动化工具
……
管理这些三方工具和脚本对于有无开发经验的朋友都不是什么方便事。例如：
如果网站是自己开发的，注入一段第三方脚本的流程大致是这样：

打开编辑器 → 找到要添加/删除脚本的位置 → 部署上线

如果频繁变动脚本的场景，就要不断重复上面的步骤。

如果网站不是自己开发的，对于不懂代码的普通站长甚至不知道在哪里添加或者删除脚本，
不仅管理麻烦，还有以下问题：

三方脚本添加多了用户加载网站会很慢
客户浏览器直接与第三方工具交互，无法保证这些工具都收集了什么客户信息

Cloudflare Zaraz 可以很好地解决上面提到的问题，Zaraz 提供了一个简易的后台管理界面，方便用户对第三方工具进行增删改查，再凭借 Cloudflare 的全球网络，保证用户加载这些网络的脚本的速度和安全性

本文以给网站添加 Umami 脚本为例，手把手教你使用 Cloudflare Zaraz 管理第三方脚本

🧾 教程

Umami 简介

Umami 是一款注重隐私保护的开源(地址：https://umami.is )网站流量统计分析工具，可作为 Google Analytics 的轻量化替代方案。其核心特点在于简单易用和隐私合规, 你可以自部署该软件避免数据依赖第三方平台，也可以使用 Umami 官方提供的 SaaS 服务。特别适合个人博客或中小型网站进行合规、低成本的流量监控。

为了方便展示，我就使用 Umami 官方提供的 SaaS 服务的免费版作为 demo，自部署的版本操作流程也是一致的。

网页登录后台后，我们先添加自己的网站域名，在设置Tracking code里有一串脚本用于用站数据统计追踪，这里先保存下来，后面会用

Zaraz 设置

使用 Zaraz 前提：域名托管在 Cloudflare 且打开了 proxy 的小黄云开关，当然这也是 Cloudflare 很多产品的使用前提，熟悉本系列的读者应该都清楚。

入口在后端管理界面的左侧 Tag Management里，一进入就能看到当前账户下你的哪些域名使用了 Zaraz

我们选择希望配置 Zaraz 的域名，进入后可以看到最上方有 4 个标签页，默认入口是在Thrid-party tools

我简单说下这 4 个 tab 的作用

Thrid-party tools：默认输入，主要的工具配置页面
Triggers：满足哪些条件触发 Thrid-party tools 中设置的工具
Variables：设置 api 用到的一些变量
Settings: 各种设置的入口

其他 tab 我们暂时不管，主要关注Thrid-party tools，点击右上方的Add new tool 添加第三方的工具或者脚本，这里我已经添加了 Umami 的脚本但不影响我们的配置。进入添加工具的界面我们看到 Cloudflare 已经为我们内置了很多工具，广告相关的有Google Ads, Facebook Pixel等，流量统计有常见的Google Analytics

如果没有我们需要的工具怎么办？点击左侧的Custom选择Custom HTML

进入这个选项后会让你填写该工具的名称，和具体操作

这里要说明一下，Firing Triggers就是触发器的意思，代表什么情况下触发使用该工具，系统会提供一个默认的Pageview触发器，下面配置的意思是：当有用户访问网页的时候就会触发该脚本 ，再点击 save 保存，这样就设置好了。

验证设置是否生效

添加完工具我们要查看工具是否生效，首先可以在 Zaraz 的入口处查看，可以看到过去该工具过去 24 小时内的简单调用折线图

还有一种方式也能检查工具配置是否生效。访问添加该配置的网站，可以在网页的<head>标签中找到<script>的标签，可以看到网页已经加载zaraz和相关的工具

🕳️ 避坑指南

之前的[[Cloudflare从入门到精通 7. Cache网站加速神器]]这篇文章提到，你可以设置 Cache Rule 缓存某些页面的 html 文件，如果你设置了这样的规则，使用 Zaraz 后记得点击「Purge Cache」让缓存暂时失效，否则用户获取到页面还是老的页面

📝 总结

Zaraz 对很多工具做了官方集成，例如 Google Analytics，方便用户网站一键添加这些工具，如果官方没有集成的功能，我们也可以使用 Cutom Html 自行设置。设置完后记得查看是否有设置 html 页面缓存相关的 cache rule，有的话记得让缓存失效才能让 Zaraz 设置立马生效。

有了 Zaraz，依靠 Cloudflare 全球化网络，既能提升网站加载三方工具和脚本和保证三方脚本的安全性，又能方便地管理脚本无需频繁修改网站源代码

🗒️ 后记

使用 Zaraz 管理第三方脚本只是功能的一部分，该工具还有很多强大的功能，例如：

创建并管理用户同意窗口
给网站嵌入 Ins 和 X 博文
通过 Managed Components 实现服务端渲染嵌入
用户行为埋点分析

鉴于篇幅问题我会在后面的文章中继续介绍