个人独立站接入微软 Clarity 指南

青萍叙事2025-05-08

✅ 什么是 Microsoft Clarity？

Microsoft Clarity 是一款免费的网站用户分析工具，提供以下功能：

热图分析（Heatmaps）
会话回放（Session Recordings）
点击与滚动跟踪（Click & Scroll Tracking）
JavaScript 性能检测
隐私保护（自动模糊敏感信息）

Clarity 特别适合不想使用 Google Analytics（Google国内无法使用，而百度的太拉跨）的站长，或是希望补充更多可视化行为数据的用户。

🧩 接入 Clarity 的前提条件

你需要：

一个已上线的个人网站（静态站或动态站均可）
能够访问和修改网站的 <head> 段落（例如使用 HTML、Vue、React、WordPress 等）
一个 Microsoft 账户（Outlook、Hotmail 均可）

🔧 第一步：注册 Clarity 并创建项目

访问 https://clarity.microsoft.com/
使用 Microsoft 账户登录
点击左侧的 “新建项目”
填写以下信息：
- 名称：你的网站名称（可自定义）
- 网站 URL：你网站的完整 URL（例如 https://example.com）
- 网站行业：你网站服务的行业

创建完成后，Clarity 跳转到安装界面，可以选择安装方式，这里演示手动安装。

点击获取跟踪代码，会提供如下一段 js的集成代码：

🧾 第二步：将 Clarity 代码嵌入你的网站

将以上代码粘贴至你网站的 <head> 标签内，建议放在 <meta> 标签之后，</head> 之前。
如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的个人站</title>
  
  <!-- 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/YOUR_PROJECT_ID";
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
  </script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>