Tensor Ray

外观

Cloudflare Web Tag Management 安装 Microsoft Clarity (2026年最新指南)

创建时间：2026/03/06
更新时间：2026/03/06
CloudflareWeb Tag ManagementZarazMicrosoft ClarityGDPR隐私合规网站优化

本教程将指导你如何在 Cloudflare Web Tag Management (原 Zaraz) 中安装 Microsoft Clarity，并配置合规的 Consent (用户同意) 管理。

为什么选择 Cloudflare Web Tag Management (而非直接安装代码)? ​

相比直接将 <script> 代码粘贴到网站 HTML 中，使用 Cloudflare Web Tag Management 有以下核心优势：

  1. 极速性能 (Off-loading)：

    • 传统方式：每个第三方脚本（Clarity, GA 等）都会在用户浏览器中下载并执行，拖慢页面加载速度，阻塞主线程。
    • Cloudflare 方式：脚本在 Cloudflare 的边缘服务器上运行。浏览器只需要与 Cloudflare 通信，极大地减少了用户端的 JavaScript 执行量，显著提升 Core Web Vitals 分数。

  2. 无需重新部署：

    • 一旦配置好，后续添加 Google Analytics、Pixel 或其他工具，只需在 Cloudflare 后台操作，无需修改网站代码或重新发布版本。

  3. 内置隐私合规 (GDPR/CCPA)：

    • 它提供了一套完整的 Consent Management Platform (CMP)。你可以轻松控制“只有用户同意后，才加载 Clarity”，而无需编写复杂的 JavaScript 拦截逻辑。

  4. 单一数据源：

    • 所有工具共用同一个触发器和数据层，数据更准确，管理更统一。

第一步：准备工作 ​

  1. 注册/登录 Microsoft Clarity。
  2. 创建项目，获取 Project ID (在 Settings -> Overview 中)。
  3. 确保你的域名已托管在 Cloudflare。

为了符合 GDPR/CCPA，我们需要先设置 Consent Purpose。

  1. 登录 Cloudflare Dashboard，进入你的域名。
  2. 左侧菜单选择 Web Tag Management (原 Zaraz) -> Consent。
  3. 点击 Add Purpose：
    • Name: Analytics & Improvements (或自定义名称)
    • Description: Help us improve the website by allowing Microsoft Clarity to analyze usage patterns.
    • 点击 Save。

(可选) 自定义弹窗样式： 在 Consent 页面下方找到 Custom CSS，粘贴以下代码以美化弹窗：

css
.cf_modal {
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important;
    font-family: system-ui, sans-serif !important;
}
.cf_modal .button_container button.accept_all {
    background-color: #0052D4 !important; /* 替换为你品牌的主色 */
    color: white !important;
    border-radius: 9999px !important;
}

第三步：添加 Microsoft Clarity 工具 ​

由于目前官方库中 Clarity 模板可能不可用或过时，推荐使用 Custom HTML 方式，最灵活且稳定。

  1. 进入 Web Tag Management -> Tools -> Add new tool。
  2. 选择 Custom HTML，点击 Continue。
  3. 命名为 Microsoft Clarity，点击 Save。
  4. 点击刚创建的工具进入配置页面：
    • Settings -> Add Field (如果需要，否则直接在代码框操作)。
    • 点击 Edit Code (或类似的代码输入区域)，粘贴以下脚本：
html
<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", "YOUR_PROJECT_ID_HERE");
</script>

⚠️ 注意：请将 YOUR_PROJECT_ID_HERE 替换为第一步获取的 Project ID。

  1. 配置触发器 (Triggers)：

    • 确保 Firing Triggers 包含 Pageview (默认通常已有，如果没有则添加一个规则为 Page URL matches regex .* 的触发器)。

  2. 关联 Consent (关键步骤)：

    • 在工具设置页面找到 Consent 部分。
    • 在下拉菜单中选择第二步创建的 Analytics & Improvements。
    • 保存设置。

效果：只有当用户在弹窗中同意了 "Analytics & Improvements"，Clarity 脚本才会加载。

(注意：Cloudflare Web Tag Management 的拦截是在边缘侧进行的，浏览器甚至不会收到加载 Clarity 的请求，这是最彻底的隐私保护方式。)

GDPR 要求用户必须能随时撤回同意。你需要在网站底部添加一个链接来重新唤起弹窗。

1. 创建客户端组件 (Next.js 示例) ​

如果你使用的是 Next.js (App Router)，需要创建一个 Client Component 来处理点击事件。

src/components/CookieSettingsLink.tsx:

typescript
'use client';

import React from 'react';

interface Props {
  className?: string;
  text?: string;
}

export function CookieSettingsLink({ className, text = "Cookie Settings" }: Props) {
  return (
    <a 
      href="#" 
      onClick={(e) => { 
        e.preventDefault(); 
        // 调用 Cloudflare Web Tag Management API 显示弹窗
        if ((window as any).zaraz) {
            (window as any).zaraz.showConsentModal();
        }
      }} 
      className={className}
    >
      {text}
    </a>
  );
}

2. 在 Footer 中引入 ​

src/components/layout/Footer.tsx:

typescript
import { CookieSettingsLink } from '../CookieSettingsLink';

// ...
<footer className="site-footer">
    <!-- 其他链接 -->
    <CookieSettingsLink className="legal-link" />
</footer>

第五步：验证安装 ​

  1. 打开你的网站（建议使用无痕模式）。
  2. 你应该能看到 Cloudflare 的 Consent 弹窗。
  3. 测试拒绝：点击 "Reject All" 或不勾选 Analytics。打开控制台 (F12) -> Network，搜索 clarity，应该没有相关请求。
  4. 测试同意：点击 "Cookie Settings" 重新打开弹窗，勾选 Analytics 并保存。Network 中应该出现 clarity.ms 的请求。
  5. 等待 1-2 小时，进入 Microsoft Clarity 后台查看数据。

常见问题 ​

Q: 为什么不用 Clarity 的 "Cookies: No" 模式？ A: 虽然 Clarity 支持无 Cookie 模式，但为了最严格的合规性，建议将整个脚本加载都置于用户同意之后。Cloudflare Web Tag Management 的原生拦截是目前最安全、性能最好的做法。

Q: Google Analytics 怎么处理？ A: 同样的方法。添加 Google Analytics 工具，并将其关联到同一个 (Analytics) Purpose。这样用户一次点击就能同时授权或拒绝所有分析工具。