好了，下面就给大家分享一下 CloudFlare Zaraz 管理网站 管理第三方代码 的具体方法，将分别以 Google Analytics

AdSense、MicroSoft Clarity 为例，因为这三种 第三方代码 都很有代表性：

1、Google Analytics 4

自从安之窝博客上线以来就一直在用 Google Analytics，随着 Google Analytics 4 的上线，明月也第一时间跟进更新使用，众所周知凡是网站分析统计工具都是需要在网站里放上其提供的代码才能实现实时和长期的统计分析的，Google Analytics 的代码一般都是下面这样的：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxx');
</script>

代码开头，可以看到有 https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxx 这样第三方 JS 库的调用，这是个跨域的请求链接，所以说它不影响你网站页面的载入速度很明显是不科学的，至于影响有多大，其实就是取决于这个第三方平台了。像 Google Analytics 这样国内好像现在已经没有服务器了（域名没有国内备案），应该服务器都是在遥远的美国了（香港服务器好像非常少），所以这样造成很多站长们尤其是国内的不喜欢使用 Google Analytics 作为网站首选的网站分析工具。有关网站分析工具的选择取舍大家可以参考【 Google Analytics 和 Microsoft Clarity 才是网站统计的终结 】一文，里面明月有详细的介绍和说明，就目前国内那些第二代网站统计代码的拉胯样，说实话明月是不屑于使用的，所以 Google Analytics 一直都没有放弃。这次正好借助 CloudFlare Zaraz 来解决这个拖慢网页载入速度的问题。

具体可以进入 CloudFlare 后台的【Zaraz】里来对接 Google Analytics 4，首次进入 Zaraz 后可以看到如下图所示：

点击 Google Analytics 图标开始对接 Google Analytics。

直接点击箭头所指【继续】

这里是权限开关，保持默认即可，点击箭头所指【继续】

这里需要输入准确的 Google Analytics【衡量 ID】②，Google Analytics 后台对应网站账号设置里获取位置如下图所示，这里最好修改 Zaraz 里托管监视的名称，可以叫 XXX 网站 GAS 就是了，如图上①位置。下面的③④⑤开关分别是访客 IP 不传递给 Google Analytics 以及是否需要电商统计分析的，一般咱们的博客网站可以不开启就是了。总之就是随便了，根据自己需要勾选就是了。点击【继续】

直接复制粘贴到②即可

最后这一步是跟踪和传递所有页面访问给 Google Analytics 的，保持默认勾选即可，然后就是点击【保存】

支持 CloudFlare Zaraz 里对接 Google Analytics 完成了，是不是跟我们理解的授权不一样？其实主要是 CloudFlare 在 Zaraz 里已经集成好了 GAS 的代码了，只是需要我们设置一下权限和输入 Google Analytics 的【衡量 ID】即可，很简单吧！这时候我们再次进入 CloudFlare 后台的【Zaraz】里既可以看到我们刚刚添加的 Google Analytics 工具了，如下图所示（箭头所指），“博客 GAS”就是我起的名字：

理论上这时候你网站的 Google Analytics 代码已经由 CloudFlare Zaraz 在管理了，所以可以放心大胆的删除网站上的 Google Analytics 代码了，这时候进入 Google Analytics 可以看到已经有统计信息和实时信息了。

2、MicroSoft Clarity

因为目前 CloudFlare Zaraz 没有跟 MicroSoft Clarity 官方对接，所以要让 CloudFlare Zaraz 托管 MicroSoft Clarity 的代码就没有图标可点解了，我们这时候可以使用“自定义代码”来添加 MicroSoft Clarity 的代码，效果是一样的。

进入 CloudFlare 后台的【Zaraz】点击【添加新工具】，如下图所示：

点击【Custom HTML】图标，就是添加自定义第三方代码的

开始添加流程

点击【继续】

依旧点击【继续】

起个工具名称后，点击【继续】

输入一个操作名称，可以叫 Clarity，【触发触发器】里下来选择 Pageview，在【HTML Code】里粘贴上 MicroSoft Clarity 的 JS 代码（需要 MicroSoft Clarity 后台创建或缺）即可。最后点击【保存】就完成了 MicroSoft Clarity 代码的托管了，跟 Google Analytics 一样，这时候就可以删除网站上的 MicroSoft Clarity 代码了。

MicroSoft Clarity 代码示例：

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "xxxxxxxxx");
</script>

3、AdSense 代码

AdSense 的代码，CloudFlare Zaraz 依旧是没有官方支持的，另外因为 AdSense 的特殊性，所以并不能把所有 AdSense 代码都托管给 CloudFlare Zaraz 的，我们只能把部分 AdSense 托管过来，主要目的就是了加速 AdSense 广告的载入速度。我们常见的 AdSense 如下所示：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

注意红色加粗标记出来的那段就是影响我们网站页面里 AdSense 广告载入速度的第三方 JS 库调用请求了，我们完全可以把这段代码托管给 CloudFlare Zaraz 来实现加速 AdSense 广告速度优化。

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

剩下的有关广告样式、ID 的 JS 代码依旧保留在网站对应广告位上即可，放心谷歌 AdSense 是允许这么放置代码的，并不违规。并且红色加粗标注的调用 JS 库全站其实有一段就可以了，并不是每个广告位置都需要的，这也是谷歌 AdSense 官方文档里阐述过的。

剩下的就是参照托管 MicroSoft Clarity 代码的方式把那段红色加粗代码托管给 Zaraz 就是了，记住是你自己的 AdSense 代码里的这段哦！介于篇幅问题，我就不一步一步的截图演示了。

好了，至此你网站上的 Google Analytics、MicroSoft Clarity、AdSense 第三方代码都托管给了 CloudFlare Zaraz 了，网站上的按照要求删除即可，这样你网站页面的载入就不会再去调用请求第三方的 JS 库造成载入速度降低了，并且因为 CloudFlare Zaraz 专门的对接传递数据，整体的精准度也更高了，一举两得有没有？

通过此文，大家知道 CloudFlare Zaraz 是干什么了的吧？说白了就是贴心的帮你托管你网站要用的第三方代码的，并且支持免费使用，免费额度是每个站点 100000 次调用，对于我们大部分博客网站来说足够了，真不够那只能说明你站点流量够劲儿，花点儿钱购买额度也毫无压力了，5000 次才 0.05 美刀而已了。

对了，查看当前 Zaraz 每次被调用次数可以在 CloudFlare 后台【Zaraz】的【监视】里看到的，如上图所示