id: fec779a3dd0d465b89592f763ae038cb
parent_id: 
item_type: 1
item_id: d799d64ef2804d8c81352ac4d40c1dcb
item_updated_time: 1764345635221
title_diff: "[{\"diffs\":[[1,\"Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":36}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"43414\\\"></a>\\\r\\\n<h1>Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483967&amp;idx=1&amp;sn=db61253a32da54cc89032722440d0556&amp;chksm=c2ae4f7d14347520e01b4680091ae946ac2302aaceab8b7d7f25366bbca0c9a5bb2b1019cbca&amp;mpshare=1&amp;scene=1&amp;srcid=0526alVpsr3kLVBodddYIAC2&amp;sharer_shareinfo=c2d3b8dadad51474438095ad2b19a56b&amp;sharer_shareinfo_first=c2d3b8dadad51474438095ad2b19a56b#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span><span style=\\\"\\\">DeBill</span></span><span><a style=\\\"\\\"> DeBill独立开发 </a></span><span><em></em></span></div><div style=\\\"\\\"><div style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; color: rgb(0, 0, 0); word-spacing: 0em; letter-spacing: 0em; word-break: break-word; overflow-wrap: break-word; text-align: left;\\\"><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 20px; color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 5px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 191, 82); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>📜 前言</span></span></h2><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>运营一个网站有时候需要注入一些第三方工具和脚本到网页页头或者页脚，例如：</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>添加流量分析工具</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>添加广告脚本</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>验证网站所有权</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>客服机器人</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>营销自动化工具</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>……</span></div></li></ul><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>管理这些三方工具和脚本对于有无开发经验的朋友都不是什么方便事。例如， 注入一段第三方脚本的流程大致是这样：</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>打开编辑器 → 找到要添加/删除脚本的位置 → 部署上线</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果频繁变动脚本的场景，就要不断重复上面的步骤。</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果网站不是自己开发的，对于不懂代码的普通站长甚至不知道在哪里添加或者删除脚本， 不仅管理麻烦，还有以下问题：</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>三方脚本添加多了用户加载网站会很慢</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>客户浏览器直接与第三方工具交互，无法保证这些工具都收集了什么客户信息</span></div></li></ul><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Cloudflare Zaraz 可以很好地解决上面提到的问题，Zaraz 提供了一个简易的后台管理界面，方便用户对第三方工具进行增删改查，再凭借 Cloudflare 的全球网络，保证用户加载这些网络的脚本的速度和安全性</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>本文以给网站添加 Umami 脚本为例，手把手教你使用 Cloudflare Zaraz 管理第三方脚本</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 20px; color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 5px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 191, 82); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>🧾 教程</span></span></h2><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 4px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 227, 163); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Umami 简介</span></span></h3><div style=\\\"display: flex;\\\"><span><img src=\\\":/c5570959734143d998c63297fdc2cf82\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"umami-saas\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>umami-saas</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Umami 是一款注重隐私保护的开源(地址：https://umami.is )网站流量统计分析工具，可作为 Google Analytics 的轻量化替代方案。其核心特点在于</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>简单易用</span></strong><span>和</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>隐私合规</span></strong><span>, 你可以自部署该软件避免数据依赖第三方平台，也可以使用 Umami 官方提供的 SaaS 服务。特别适合个人博客或中小型网站进行合规、低成本的流量监控。</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>为了方便展示，我就使用 Umami 官方提供的 SaaS 服务的免费版作为 demo，自部署的版本操作流程也是一致的。</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>网页登录后台后，我们先添加自己的网站域名，在设置</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Tracking code</span></code><span>里有一串脚本用于用站数据统计追踪，这里先保存下来，后面会用</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/48114fd240504ee8bb1cf2240ee257cf\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"umami\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>umami</span></div></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 4px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 227, 163); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Zaraz 设置</span></span></h3><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>使用 Zaraz 前提：域名托管在 Cloudflare 且打开了 proxy 的小黄云开关，当然这也是 Cloudflare 很多产品的使用前提，熟悉本系列的读者应该都清楚。</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>入口在后端管理界面的左侧 </span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Tag Management</span></code><span>里，一进入就能看到当前账户下你的哪些域名使用了 Zaraz</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/489e26fceb1b434a9acac179573b8798\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"zaraz-entrance\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>zaraz-entrance</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我们选择希望配置 Zaraz 的域名，进入后可以看到最上方有 4 个标签页，默认入口是在</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Thrid-party tools</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/03727216134545f7b07b39e54179c5f3\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"zaraz-tagsetup\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>zaraz-tagsetup</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我简单说下这 4 个 tab 的作用</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Thrid-party tools：默认输入，主要的工具配置页面</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Triggers：满足哪些条件触发 Thrid-party tools 中设置的工具</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Variables：设置 api 用到的一些变量</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Settings: 各种设置的入口</span></div></li></ul><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>其他 tab 我们暂时不管，主要关注</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Thrid-party tools</span></code><span>，点击右上方的</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Add new tool</span></code><span> 添加第三方的工具或者脚本，这里我已经添加了 Umami 的脚本但不影响我们的配置。进入添加工具的界面我们看到 Cloudflare 已经为我们内置了很多工具，广告相关的有</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Google Ads</span></code><span>, </span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Facebook Pixel</span></code><span>等，流量统计有常见的</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Google Analytics</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/26711818209a420fbd3685cc44e369e6\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"add-tools\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>add-tools</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果没有我们需要的工具怎么办？点击左侧的</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Custom</span></code><span>选择</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Custom HTML</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/a46acba7b9344f79b4afaf24a48fb651\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"custom-html\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>custom-html</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入这个选项后会让你填写该工具的名称，和具体操作</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/01405691ee4b41c793674d03634a7ad5\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"custom-html-name\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>custom-html-name</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>这里要说明一下，</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Firing Triggers</span></code><span>就是触发器的意思，代表什么情况下触发使用该工具，系统会提供一个默认的</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Pageview</span></code><span>触发器，下面配置的意思是：</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>当有用户访问网页的时候就会触发该脚本</span></strong><span> ，再点击 save 保存，这样就设置好了。</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/00b71ba9efef4ec2b5190316be899585\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"custom-html-settings\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>custom-html-settings</span></div></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 4px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 227, 163); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>验证设置是否生效</span></span></h3><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>添加完工具我们要查看工具是否生效，首先可以在 Zaraz 的入口处查看，可以看到过去该工具过去 24 小时内的简单调用折线图</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/94ab75e8e3b441c3b0989bce5679490e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"zaraz-check\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>zaraz-check</span></div></div><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>还有一种方式也能检查工具配置是否生效。访问添加该配置的网站，可以在网页的</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>&lt;head&gt;</span></code><span>标签中找到</span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>&lt;script&gt;</span></code><span>的标签，可以看到网页已经加载zaraz和相关的工具</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/1d43b8204229444fbde520409323a9bb\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" alt=\\\"check by web\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span><div style=\\\"color: rgb(136, 136, 136); letter-spacing: 0em; text-align: center; font-weight: normal;\\\"><span>check by web</span></div></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 20px; color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 5px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 191, 82); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>🕳️ 避坑指南</span></span></h2><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>之前的这篇文章（<a href=\\\"https://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483851&amp;idx=1&amp;sn=635175d0bf6f913e2ab873826bb35974&amp;scene=21#wechat_redirect\\\" style=\\\"\\\" target=\\\"_blank\\\">Cloudflare从入门到精通 | 7. Cache网站加速神器</a>）提到，你可以设置 Cache Rule 缓存某些页面的 html 文件，如果你设置了这样的规则，使用 Zaraz 后记得点击「Purge Cache」让缓存暂时失效，否则用户获取到页面还是老的页面</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 20px; color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 5px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 191, 82); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>📝 总结</span></span></h2><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Zaraz 对很多工具做了官方集成，例如 Google Analytics，方便用户网站一键添加这些工具，如果官方没有集成的功能，我们也可以使用 </span><code style=\\\"color: rgb(244, 138, 0); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgba(27, 31, 35, 0.05); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Cutom Html</span></code><span> 自行设置。设置完后记得查看是否有设置 html 页面缓存相关的 cache rule，有的话记得让缓存失效才能让 Zaraz 设置立马生效。</span></p><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>有了 Zaraz，依靠 Cloudflare 全球化网络，既能提升网站加载三方工具和脚本和保证三方脚本的安全性，又能方便地管理脚本无需频繁修改网站源代码</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 20px; color: rgb(244, 138, 0); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 5px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 191, 82); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>🗒️ 后记</span></span></h2><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>使用 Zaraz 管理第三方脚本只是功能的一部分，该工具还有很多强大的功能，例如：</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>创建并管理用户同意窗口</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>给网站嵌入 Ins 和 X 博文</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>通过 Managed Components 实现服务端渲染嵌入</span></div></li><li><div style=\\\"color: rgb(20, 20, 20); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>用户行为埋点分析</span></div></li></ul><p style=\\\"color: rgb(20,20,20); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>鉴于篇幅问题我会在后面的文章中继续介绍</span></p></div><div><span><br/></span></div></div></div><div><div><div><div style=\\\"display: flex;\\\"><div style=\\\"color: rgba(0,0,0,.3);\\\"><span>修改于</span></div></div></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":49540}]"
metadata_diff: {"new":{"id":"d799d64ef2804d8c81352ac4d40c1dcb","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348817588,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:03:21.342Z
created_time: 2025-11-28T21:03:21.342Z
type_: 13