使用 Microsoft Clarity 分析网站用户行为

在部署博客或静态网站时，由于缺乏后端存储，通常难以获取用户的访问数据。早前我在为 Fuwari 添加访问统计卡片一文中介绍了如何配置 Umami 统计。

虽然 Umami 能提供访问量和来源 URL，但无法看到用户在页面上的点击、滑动等交互行为，为此，我们可以集成微软提供的免费服务 —— Microsoft Clarity。

Clarity 是一款功能强大的用户行为分析工具。通过它，你不仅能获取基础的访问数据，还能查看点击热力图、滚动深度，甚至是访客的会话录屏。最重要的一点是，该服务完全免费且无数据量限制。

下面将介绍如何集成并使用 Microsoft Clarity 进行网站分析。

注册与创建项目#

首先，你需要拥有一个微软、Google 或 Facebook 账号。

访问 Microsoft Clarity 官网并点击 Sign up。
登录后点击 New project（新项目）。
输入项目名称和网站 URL，点击 Add new project。

获取与安装跟踪代码#

项目创建完成后，进入 Settings -> Setup 页面。Clarity 提供了多种安装方式：

手动安装#

适用于纯前端项目，直接将 <script> 脚本添加到 HTML 的 <head> 标签中。

在 Install manually 栏目下，点击 Get tracking code。

复制生成的脚本。其结构大致如下：

1
<script type="text/javascript">
2
    (function(c,l,a,r,i,t,y){
3
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
4
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
5
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
6
    })(window, document, "clarity", "script", "你的项目ID");
7
</script>

将该代码粘贴到项目的 index.html 或公共头部的 <head> 区域。

使用 NPM 安装#

如果你的项目是基于 React、Vue 或 Astro 等框架构建的，推荐使用 NPM 包。 NPM 安装选项

安装依赖：
Terminal window
```
1
npm install @microsoft/clarity
```

在应用入口（如 main.js 或 Layout.astro）进行初始化：

1
import { clarity } from '@microsoft/clarity';
2
clarity.init('你的项目ID');

你可以在 Clarity 设置页面的 Overview 中找到项目 ID，或者从项目 URL 中截取（如 .../projects/view/vdh7g6e1p1/... 中的 vdh7g6e1p1 便是 ID）。

第三方平台集成#

如果你使用 WordPress 等平台，可以直接安装官方插件。安装后，也是只需输入项目 ID 即可完成配置。获取教程同上

验证安装#

安装并部署网站后，在网站页面右键点击“检查”（Inspect），切换到 Network（网络）选项卡，刷新页面，若看到指向 https://www.clarity.ms/collect 的 POST 请求，则说明安装成功。

解除内容屏蔽#

默认情况下，Clarity 为了保护隐私，会自动屏蔽录屏中的文本/图像内容（显示为方块或星号）。

由于个人博客通常不涉及敏感信息输入，所以为了获得更真实的回放画面，可以调整屏蔽策略：

进入 设置 -> 屏蔽设置
将屏蔽模式从默认改为宽松

这样，你在查看录像时就能看到实际的页面文字与图像了。

功能展示#

Clarity 提供了极具价值的数据看板和分析工具，以下是几个核心功能：

仪表盘#

在项目看板中，你可以直观地查看到访问次数、平均会话时长、滚动深度以及死链点击等等数据。

访客录屏与 AI 分析#

你可以回溯任意时间任意访客的会话录制，Clarity 还会利用 AI 对这些会话进行自动分析总结。

AI 分析示例：

1
- 用户从主页快速点击进入“用 OpenCode 让 GitHub 仓库自动修”文章，但在[00:05](?time=00:05)立即返回主页，显示对该内容兴趣不大。
2
- 随后尝试访问另一篇“使用宝塔面板部署 AstrBot 与 NapCat”文章，并在[00:21](?time=00:21)点击了外部赞助链接“VMRack Sponsor”，期间多次切换页面可见性，可能在查看外部资源。
3
- 在长时间停留于该文章页面后，于[01:12](?time=01:12)结束浏览，表明此主题吸引力较强。

点击热力图#

热力图可以让你直观地看到用户在页面上的点击分布。通过分析点击密度，你可以优化页面布局，将重要内容放在用户更容易点击到的位置。

滚动分布#

滚动/关注地图可以查看用户在页面不同深度的停留情况，帮助你了解用户是否阅读完了整篇文章，或者在哪个位置选择了离开。

总结#

Microsoft Clarity 提供了丰富的用户行为分析功能，集成和使用都非常简单。在定价页面微软也是直接写明:以绝对零成本享受 Clarity 的所有功能。永远不会遇到流量限制或被迫升级到付费版本。绝对可以称得上良心产品了。