默认情况下，我们的 tracker 会向我们的平台发送大量有用的信息，但所有这些信息都是标准的。只要某个数据点属于 Web API 的一部分，我们很可能就在追踪它。

但是，如果你还想用特定于你应用的数据来增强你的会话录制，会怎么样呢？

比如在查看用户的回放时，了解你的用户处于哪个付费计划？这些信息可以为你的开发者提供额外的上下文，所以仅仅因为它不是标准信息，并不意味着我们应该忽略它，对吧？

这正是元数据发挥作用的地方。

请注意，我们的 YouTube 频道上有本教程的视频版本。所以如果你更偏向于视觉学习，欢迎去看看。

在会话回放的语境中，元数据是你的用户并未生成、但以某种方式与该用户相关的所有信息。

换句话说，如果用户点击某个特定链接，或执行某个特定操作，那不是元数据，那是自定义事件（如果你想了解更多，请查看关于自定义事件的文档）。

但如果有一个标志告诉你某个用户处于免费计划还是付费计划。又或者有一个追踪代码向你显示该用户来自哪里？这些都是元数据，你可以轻松地将它们添加到你的会话中。

首先要做的是直接在平台中设置元数据字段。

如果你跳过这一步，你将无法记录任何信息，所以不要跳过它！

为此，你将通过点击顶部菜单右上角的齿轮图标，进入你项目的配置页面：

进入后，点击屏幕最左侧的 Metadata 菜单项：

这会带你进入元数据配置界面。确保你从下拉菜单中选择了正确的项目，并根据需要创建任意数量的字段。

在这个示例中，我们为 “e-commerce test” 项目创建了 3 个字段：

• “plan”，它将包含用户当前的计划。
• “utm_source”，包含一个标识用户来自何处的代码。
• 最后，“items_in_cart” 包含用户购物车中的商品总数。

最后一个是取决于用户操作的数据，这与我们的建议有所不同。然而，在这个示例中，你将看到元数据字段的局限性，以及为什么这一特定信息本应是一个自定义事件。

完成这些设置后，下一步就是添加所需的代码，以便真正将数据作为会话的一部分发送出去。

为了将元数据添加到会话中，我们将使用 tracker 的 setMetadata 方法。你可以在用户会话期间的任何时候使用此方法，只需牢记以下两点注意事项：

1. 如果你对同一个元数据字段应用多个值，只有最后一个会作为会话的一部分被保存。
2. 所有值都必须是字符串。否则，它们将不会被保存。tracker 不会将值转换为字符串，所以请注意这一点。

在这个示例中，我们使用的是用 Next.js 构建的电商网站，也就是我们在 NextJs 教程中使用的那个，请务必查看那个教程以了解下面截图中所示的上下文 provider 的底层架构：

红色箭头显示了进行相关更新的位置。这个上下文 provider 导出了一个名为 setMetadata 的函数，而该函数又会调用 tracker 的 setMetadata 方法。

如果你想要一个可运行的示例，可以查看这个仓库。

现在我们要做的就是，每当我们想配置元数据字段时，使用导出的这个函数。

为了本示例的目的，我们将决定直接从首页设置 utm_source 和 plan 字段，然后每当用户向购物车添加商品时，我们就更新最后剩下的那个字段。

在 pages/index.tsx 文件中，我们将添加以下代码：

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

这个 hook 的大部分内容本来就已经存在，但我们添加了对 setMetadata 函数的引用，然后是对它的两次调用。在这个示例中，getPlan 和 getUTMSource 这两个函数都返回随机数据。对于你的具体使用场景，你需要相应地实现它们。

这段代码将在首页加载时设置这些元数据值。

现在我们需要添加最后一个值，即购物车中的商品数量。为此，我们将进入 ProductSidebar 组件，它负责控制我们点击 “Add to cart” 时发生的事情，我们将添加另一个 hook 来响应购物车商品数量的变化。

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

当然，你也需要像之前一样从上下文 provider 中获取 setMetadata 函数，但一旦你做到这一点，就大功告成了。

现在数据正在被保存。我们也可以在平台上通过会话列表看到这一点。

既然现在所有会话回放内部都保存了元数据，你能用它来做什么呢？

首先，你可以直接从回放中可视化查看它：

你应该会开始在播放器屏幕的右上角看到元数据字段。在这个示例中，我们看到该用户拥有 Enterprise Edition 计划，他来自 Reddit，并且购物车中只添加了一件商品。

你可以用元数据做的另一件强大的事情，是将它用作搜索参数。使用 omnisearch 搜索栏，你可以选择你创建的自定义元数据字段作为搜索参数：

所以如果你只想查看 Enterprise Edition 的回放，你只需选择 Plan 字段并按 “ee” 对其进行筛选，就像这样：

在为你的 dashboard 创建 widget 时，你也可以使用同一个 omnisearch 搜索栏。所以，继续用 EE 这个示例，如果你想只为 Enterprise 客户创建一个 dashboard，你可以使用 “Plan” 属性来筛选每个自定义 widget。

例如，下面这个 widget 显示了有多少 Enterprise 客户在点击 “Add to cart” 按钮：

最终得到一个如下所示的 widget：

借助元数据字段，你可以随心所欲地自定义和扩展你从会话回放中获得的洞察。

元数据可以显著增强你从会话回放中获得的洞察，而且设置它们相对容易。

请记住，无论你想保存什么信息，它都必须始终采用字符串的形式，否则它们将被忽略。

使用元数据的示例项目的完整源代码可以在这里查看。

如果你在这个流程的任何步骤中遇到任何问题，请通过我们的 Slack 社区联系我们，直接向我们的开发者提问！