> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 设置 Microsoft Clarity 集成

> 了解如何在 LanderLab 中为落地页添加 Microsoft Clarity，录制会话、查看热力图，并准确了解访客如何与你的页面互动。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/6p5E_h-1a6k3u1JY/images/LL-Clarity.png?fit=max&auto=format&n=6p5E_h-1a6k3u1JY&q=85&s=ba999c1cd6907f2a3d4c66cad2e8ca18" alt="LanderLab 与 Microsoft Clarity 的标志并排展示，代表 Clarity 集成" width="1200" height="600" data-path="images/LL-Clarity.png" />
</Frame>

在 LanderLab 中为落地页添加 Microsoft Clarity，录制真实的访客会话，查看点击和滚动热力图，并找出访客在转化前卡在哪里。

## 什么是 Microsoft Clarity？

Microsoft Clarity 是一款免费的行为分析工具。它会录制访客会话，并将其转化为热力图和会话回放，让你可以观察真实用户如何在你的落地页上滚动、点击和浏览。

Google Analytics 告诉你发生了**什么**，而 Clarity 则向你展示**为什么**会发生。你可以发现无效点击、愤怒点击，以及漏斗中某个具体步骤上的流失点。

LanderLab 会替你完成 Clarity 脚本的安装。你无需将跟踪代码粘贴到页面中，只需输入你的 Project ID，LanderLab 会在发布时自动添加脚本。

<Note>
  添加 Microsoft Clarity 集成后，它会**全局**保存在你的账户中。你可以将同一个账户连接到任意数量的落地页，无需再次输入信息。
</Note>

## 如何添加 Microsoft Clarity

<Steps>
  <Step title="打开你的落地页">
    前往 **Landing Pages**，点击你想跟踪访客行为的**落地页名称**。
  </Step>

  <Step title="打开集成面板">
    点击 **Add Integration**，然后在搜索栏中搜索 **Clarity**，或打开左侧的 **Tracking** 分类。
  </Step>

  <Step title="添加你的 Clarity 账户">
    点击 **Microsoft Clarity**；如果你已经保存过账户，请点击 **Add another account**。随后会出现一个简短的配置表单。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/jONgRNq0MGCYtFrd/images/add-clarity.png?fit=max&auto=format&n=jONgRNq0MGCYtFrd&q=85&s=ac89597902a4df18e1c3c37290d67cd9" alt="LanderLab 中的 Microsoft Clarity 配置表单，包含 Name 和 Project ID 字段" width="1197" height="862" data-path="images/add-clarity.png" />
    </Frame>
  </Step>

  <Step title="填写这两个字段">
    | 字段 | 说明 |
    | :- | :- |
    | **Name** | 用于识别该账户的名称（例如 “Microsoft Clarity” 或 “Clarity - Solar Funnel”）。当你保存了多个账户时很有用。 |
    | **Project ID** | 你的 Clarity 项目 ID，是一个由字母和数字组成的短字符串，例如 `abcdef1234`。可在你的 Clarity 项目设置中找到。 |
  </Step>

  <Step title="点击 Add Microsoft Clarity">
    点击 **Add Microsoft Clarity** 保存账户。它会被全局保存，可以直接用于任何其他落地页。
  </Step>

  <Step title="将其连接到页面">
    点击 **Connect to page**，在 **Apply to variants** 下选择哪些变体运行该脚本，然后点击 **Connect to page** 确认。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/uL31bP77dl4bZTVy/images/image-37.png?fit=max&auto=format&n=uL31bP77dl4bZTVy&q=85&s=596b6a433bbb6d5714d8951b34caaa78" alt="Connect to page 对话框，Apply to variants 选择器设置为 All variants" width="587" height="273" data-path="images/image-37.png" />
    </Frame>

    <Note>
      默认选中 **All variants**。如果你希望在整个 A/B 测试中获得统一的 Clarity 数据，请保持此选项；也可以只选择单个变体来单独跟踪某个设计。
    </Note>
  </Step>

  <Step title="发布页面">
    点击 **Publish** 或 **Republish**。Clarity 脚本只会在线上页面运行，因此发布后才会开始录制。
  </Step>
</Steps>

## 将 Microsoft Clarity 连接到其他落地页

由于 Clarity 账户是全局保存的，你永远无需重复输入 Project ID。

<Steps>
  <Step title="打开另一个落地页">
    前往 **Landing Pages**，打开你想要跟踪的页面。
  </Step>

  <Step title="选择已保存的账户">
    点击 **Add Integration**，搜索 **Clarity**，你会看到已保存的账户及其 Project ID。点击其旁边的 **Connect to page**。
  </Step>

  <Step title="选择变体并发布">
    在 **Apply to variants** 下选择变体并确认，然后 **Publish** 或 **Republish** 该页面。
  </Step>
</Steps>

## 在哪里找到你的 Clarity Project ID

1. 登录 [clarity.microsoft.com](https://clarity.microsoft.com)。
2. 打开你想使用的项目，或点击 **New project** 创建一个新项目。
3. 进入 **Settings**，然后选择 **Overview** 或 **Setup**。
4. 复制 **Project ID**，它是一个由字母和数字组成的短代码，例如 `abcdef1234`。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/EgAIN8K3eV1lQTIh/images/Group-2147226301-1.png?fit=max&auto=format&n=EgAIN8K3eV1lQTIh&q=85&s=5e50750769fdecb285785d58afc5edf0" alt="Microsoft Clarity 项目设置页面，显示 Project ID 的位置" width="2940" height="1607" data-path="images/Group-2147226301-1.png" />
</Frame>

你也可以直接从浏览器地址栏读取它。打开项目时，URL 中 `/projects/view/` 后面紧跟的就是该 ID。

<Tip>
  跳过 Clarity 显示的安装说明。LanderLab 会自动注入脚本，因此你只需要 Project ID。
</Tip>

## 如何确认 Clarity 正常工作

<Steps>
  <Step title="访问已发布的页面">
    在普通浏览器标签页中打开你落地页的线上 URL，并与其互动几秒钟。
  </Step>

  <Step title="查看 Clarity 控制台">
    返回 Clarity 并打开 **Recordings**。你的会话应该会在几分钟内出现。
  </Step>
</Steps>

<Warning>
  如果没有出现数据，请重新发布落地页，并确认在 **Apply to variants** 下选择了正确的变体。广告拦截器和隐私浏览器也可能会拦截 Clarity，因此请在干净的浏览器窗口中测试。
</Warning>

## 为什么使用 Microsoft Clarity

* **观看真实会话** - 准确了解访客如何滚动浏览你的页面、填写你的表单，或在中途放弃。
* **解读热力图** - 找出哪些标题、按钮和区域真正吸引了注意力，哪些被忽略了。
* **快速发现阻碍** - 愤怒点击和无效点击会直接指向失效的按钮、令人困惑的 CTA，或用户以为可以点击的元素。
* **改进 A/B 测试** - 将 Clarity 回放与 LanderLab A/B 测试结合使用，不仅了解一个变体比另一个好多少，还能理解它为什么更好。
* **免费且无流量限制** - Clarity 可免费使用，并且不会对你的数据进行抽样，因此即使是高流量的付费流量广告活动也能很好地使用。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.