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

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

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

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

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

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

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

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

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

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

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

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

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

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

• “plan”将包含用户的当前套餐。
• “utm_source”包含一个用于标识用户来源的代码。
• 最后，“items_in_cart”包含用户购物车中商品的总数。

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

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

要将元数据添加到会话中，我们将使用 tracker 的 setMetadata 方法。你可以在用户会话期间的任何时候使用这个方法，只需记住以下两点：

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

红色箭头显示了进行相关更新的位置。这个 context 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])

当然，你也必须像之前那样从 context 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 社区上联系我们，直接向我们的开发人员提问！