microsoft/clarity
GitHub: microsoft/clarity
微软开源的基于 TypeScript 的行为分析库，通过 DOM 变更追踪与用户交互记录实现隐私优先的网站会话回放与聚合洞察。
Stars: 2693 | Forks: 275
# 清晰度
Clarity 是一个使用 TypeScript 编写的开源行为分析库，有两个核心目标：隐私与性能。
它可以帮助您了解用户如何在所有现代设备和浏览器上查看和使用您的网站。了解用户如何导航、交互和浏览您的网站，可以为您提供关于用户的新见解。设身处地为用户着想，观察功能的成败之处，有助于改进您的产品、提升收入并提高用户留存率。
它也是为 Microsoft 托管的行为分析解决方案提供支持的同一套代码：https://clarity.microsoft.com。如果您想查看其工作原理的演示，请查看实时演示。
我们鼓励社区加入我们，共同构建将隐私放在首位、优先考虑性能的最佳行为分析库。
## 项目结构
1. **[clarity-js](https://github.com/microsoft/clarity/tree/master/packages/clarity-js)**：放置在网站上并跟踪用户交互以及布局变化的埋点代码。
2. **[clarity-decode](https://github.com/microsoft/clarity/tree/master/packages/clarity-decode)**：通常在服务器上运行的代码，将传入的数据解码回其原始格式。
3. **[clarity-visualize](https://github.com/microsoft/clarity/tree/master/packages/clarity-visualize)**：它从 clarity-decode 获取解码后的数据，并将其还原为像素级完美的会话回放。
4. **[clarity-devtools](https://github.com/microsoft/clarity/tree/master/packages/clarity-devtools)**：适用于基于 Chromium 的浏览器的开发者工具扩展，可针对任何网站生成实时捕获。
## 发布新版本
1. **提升版本号**
yarn bump-version
2. **提交更改**
* 提交更新的文件
* 推送更改
* 创建 PR
## 示例
以下是一些热门网站上的示例会话可视化，用于演示所捕获的遥测数据：
1. CNN (Web)
2. Cook with Manali (Mobile)
## 隐私声明
Clarity 会谨慎处理敏感数据。默认情况下，页面上的敏感内容在上传到服务器之前会被掩盖。此外，Clarity 还提供了多种掩盖配置选项，以确保您对数据拥有完全的控制权。
## Claude Code 设置（可选）
如果您使用 [Claude Code](https://claude.ai/claude-code) 进行开发，此代码库包含：
1. **`CLAUDE.md`** - 由 Claude 自动加载的项目上下文和开发指南
2. **`.mcp.json`** - 用于增强 Git 操作的 MCP (Model Context Protocol) 服务器配置
### MCP Server 的前置条件
1. 安装 Python 3：
python3 --version # 验证安装
2. 安装 Git MCP Server：
pip3 install mcp-server-git
### 启用 MCP Server
代码库包含一个用于配置 Git MCP Server 的 `.mcp.json` 文件。要启用它：
**选项 1：自动启用（推荐）**
添加到您的 `.claude/settings.local.json`：
```
{
"enableAllProjectMcpServers": true
}
```
**选项 2：明确批准**
Claude Code 会在首次使用时提示您批准该 MCP Server。
### 它提供的内容
- **CLAUDE.md**：为 Claude 提供持久指令，包括构建命令、测试、架构和编码标准
- **Git MCP Server**：通过自然语言进行增强的 Git 操作（提交历史、diffs、分支管理等）
## 改进 Clarity
如果您还没有开始贡献，请按照**[此处](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**的说明开始贡献。
本项目采用了 [Microsoft 开源行为准则](https://opensource.microsoft.com/codeofconduct/)。有关更多信息，请参阅[行为准则 FAQ](https://opensource.microsoft.com/codeofconduct/faq/)，或如有任何其他问题或意见，请联系 [opencode@microsoft.com](mailto:opencode@microsoft.com)。
祝您编程愉快！
2. Cook with Manali (Mobile)
## 隐私声明
Clarity 会谨慎处理敏感数据。默认情况下，页面上的敏感内容在上传到服务器之前会被掩盖。此外，Clarity 还提供了多种掩盖配置选项，以确保您对数据拥有完全的控制权。
## Claude Code 设置（可选）
如果您使用 [Claude Code](https://claude.ai/claude-code) 进行开发，此代码库包含：
1. **`CLAUDE.md`** - 由 Claude 自动加载的项目上下文和开发指南
2. **`.mcp.json`** - 用于增强 Git 操作的 MCP (Model Context Protocol) 服务器配置
### MCP Server 的前置条件
1. 安装 Python 3：
python3 --version # 验证安装
2. 安装 Git MCP Server：
pip3 install mcp-server-git
### 启用 MCP Server
代码库包含一个用于配置 Git MCP Server 的 `.mcp.json` 文件。要启用它：
**选项 1：自动启用（推荐）**
添加到您的 `.claude/settings.local.json`：
```
{
"enableAllProjectMcpServers": true
}
```
**选项 2：明确批准**
Claude Code 会在首次使用时提示您批准该 MCP Server。
### 它提供的内容
- **CLAUDE.md**：为 Claude 提供持久指令，包括构建命令、测试、架构和编码标准
- **Git MCP Server**：通过自然语言进行增强的 Git 操作（提交历史、diffs、分支管理等）
## 改进 Clarity
如果您还没有开始贡献，请按照**[此处](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**的说明开始贡献。
本项目采用了 [Microsoft 开源行为准则](https://opensource.microsoft.com/codeofconduct/)。有关更多信息，请参阅[行为准则 FAQ](https://opensource.microsoft.com/codeofconduct/faq/)，或如有任何其他问题或意见，请联系 [opencode@microsoft.com](mailto:opencode@microsoft.com)。
祝您编程愉快！标签：TypeScript, 会话回放, 安全插件, 数据可视化, 用户体验分析, 网站埋点, 自动化攻击