选择和调整网站 AOI

网站 AOI 并不跟踪固定的屏幕位置。它跟踪嵌入页面中的一个特定元素，称为其锚点，通过 CSS 选择器识别。使 AOI 定位到正确元素主要是关于选择和调整该锚点，而不是调整其大小。此页面涵盖了 Website AOI Object Properties 面板中的完整控制集：选择一个元素，通过 Parent、Child、Prev 和 Next 修正选择，微调大小和位置，为导出数据命名 AOI，通过文本过滤，跟踪元素内部的滚动，并在发布前验证 AOI 确实有效。

有关添加网站框架和您的第一个 AOI 的基础知识，请参见完整的 Web Bridge 指南中的 选择关注区域 (AOIs) 或 网站框架演练 的完整任务流程。

注意：选择网站 AOI 时会显示两个独立面板：一个通用的 Object Properties 块（Name、Visibility、Active、Position & Size 和一个 Anchor 网格控件），由 Labvanced 中的每种对象类型共享，以及此页面涵盖的特定于网站 AOI 的控件。通用面板的 Anchor 网格是一个位置/尺度参考点，与下面描述的 CSS 选择器锚点无关，其 Position & Size 字段不是决定网站 AOI 跟踪的因素。请使用下面的 CSS 选择器控件。

锚点：为什么 AOI 在滚动时依然有效

每个网站 AOI 存储一个 CSS 选择器，显示在其 CSS Selector 面板的 Object Properties 字段中。该选择器是 AOI 的锚点：它在嵌入页面的 DOM 中绑定的那个元素。只要锚点元素存在于页面上，Labvanced Web Bridge 扩展就会不断将其实时位置报告回 Labvanced，包括参与者滚动时，因为锚点元素本身是随页面一起移动的。这就是为什么正确锚定的 AOI 在滚动时能保持正确跟踪，而不需要您额外操作：被跟踪的是锚点，而不是屏幕坐标。

实际含义是：如果 AOI 似乎失去了目标，通常是锚点本身的问题（它指向错误的元素，或者该元素不再存在于页面上），而不是它的大小或位置。

选择器只会跟踪一个元素。如果它与页面上的多个元素匹配，例如一组重复卡片共享的类名，AOI 会跟踪在页面结构中首先出现的一个，而不是所有元素。这通常发生在基于共享类的手工输入选择器上；由 Pick Element 或下面的导航控件生成的选择器锚定在您着陆时的确切元素上，不会有这个问题。

为什么选择元素不一定会落在确切的元素上

在您还未选择或输入选择器之前，面板只显示 CSS Selector、Pick Element、Stimulus Info、Text Filter、Scrollable container 和 Show AOI overlay in player。 Adjust selection （Parent/Child/Prev/Next）和大小/位置偏移字段只有在存在选择器时才会出现。

Pick Element 不总是锚定于您点击的确切元素。它会寻找一个好的容器进行选择，更倾向于具有自身 ID 的元素或自然交互的元素，如链接、按钮或输入框，如果附近没有找到一个，它会退回到附近的容器。因此，实际上在卡片内点击标题或文本通常会选择整个卡片，而不仅仅是那个标题。当这种情况发生时，使用下面的导航控件移动到您真正想要的确切元素。

在选择时的任何时刻按 Esc 可以取消选择而不更改 AOI 的当前选择器。您还可以完全跳过选择器，直接在 CSS Selector 字段中输入或粘贴一个 CSS 选择器，如果您已经知道想要的选择器或者选择器一直未能找到它，这会很有用。

修正选择：父、子、前、后

一旦设置了 CSS 选择器，四个按钮会出现在 Adjust selection: 下方的 Object Properties 面板中：

这些是修复选择的主要方法，而不仅仅是调整其大小。当 Pick Element 落在错误元素上时的典型工作流程：单击 Child 进入容器的第一个内部元素，然后使用 Next（或 Prev）横向移动到该元素的兄弟元素，直到您达到实际想要的那个。如果仍然太高，单击 Child 以再向下移动一层，然后再横向移动。每次单击都会为您落脚的地方重新生成选择器，因此 AOI 始终锚定在该确切元素上，而不是经过其祖先的复合路径。

如果按钮没有移动到任何位置（Prev 处没有早期兄弟、Child 在没有子元素的元素上，或 Parent 当唯一的上层元素是页面的外部 html/body），则什么也不会发生：选择保持不变，没有错误消息。如果导航按钮似乎无响应，您可能已到达该方向的页面结构边缘，请尝试其他按钮。

微调大小和位置

一旦元素被锚定，两个额外的控件会出现，用于小的像素级修正，与上面的导航不同：

• Size offset (px, ± per side)：在 X 和 Y 轴上以设定的像素数扩展或缩小跟踪区域，均匀应用于每一侧。
• Position shift (px)：在不改变其大小的情况下按设定的像素数移动跟踪区域。

只有在锚点本身正确后才使用这些。它们调整的是已经正确锚定的元素的边界；并不改变被跟踪的元素是哪一个。

网站 AOI 始终是一个矩形，即它所锚定的元素的边界框。这里没有多边形或自定义形状的选项，不像 Labvanced 中直接构建的刺激上的 AOI。如果您需要跟踪的元素本身不是矩形，请锚定到包含它的最小矩形元素，然后使用 Size offset 来修剪框。

为导出数据命名 AOI

Stimulus Info 字段是 AOI 的简短文本标签。它会根据您选择或导航到的元素的文本（或者如果没有文本则根据元素的标签名称）自动填写，您可以将其编辑为更清晰的内容。此标签将作为事件触发器和导出数据中的 Stimulus Info 值出现，因此这是您在帧上有多个 AOI 时识别给定凝视、单击或悬停行实际属于哪个 AOI 的方式。

在开始收集真实数据之前，给每个 AOI 一个独特的 Stimulus Info 标签。从元素文本中自动填写的标签，如"添加到购物车"，本身是可以的，但一旦同一文本出现在多个 AOI 上，就会变得令人困惑。

文本过滤器

Text Filter 字段将 AOI 限制为仅在锚点元素的可见文本包含特定字符串时处于活动状态（匹配不区分大小写）。当您的锚选择器可能合理地匹配文本变化的元素时，这非常有用，例如循环循环数个状态的状态标签，并且您只希望 AOI 在特定状态时被计为活动。

跟踪可滚动的子区域

如果您锚定的元素有自己的内部滚动，例如嵌套在页面中的聊天面板或可滚动的产品列表，请勾选 Scrollable container。这告诉 Labvanced 还要跟踪该元素自己的滚动位置和内容维度，与页面的整体滚动分开。

这些数据仅通过 Eyetracking Gaze/Eyetracking Fixation 触发器暴露，而不是 Mouse Trigger。当凝视落在一个滚动容器 AOI 内时，其值选择菜单提供 Container Relative X/Container Relative Y（在容器的全部可滚动内容中的位置，而不仅仅是当前可见的内容）以及 Container Scroll X/Container Scroll Y（容器本身已滚动的距离）。请参见 跟踪网站 AOI 上的鼠标行为，了解鼠标触发器在同一 AOI 上记录的内容。

验证 AOI 确实有效

由于其选择器与当前页面上的任何内容不匹配、目标元素尚未加载或 Web Bridge 扩展未激活，未能锚定的 AOI 默认不会向参与者或研究人员显示任何错误。它简单地保持非活动状态：不会记录任何凝视、单击或悬停数据，并且研究中的任何内容都不会明显指示这一点。

在您构建研究时，每个 AOI 已在编辑器中直接呈现为彩色覆盖，绿色意味着其选择器当前与页面上的元素相匹配，红色意味着不匹配，在您工作时无需切换来查看此内容。 Show AOI overlay in player 将该覆盖扩展到 Preview 和实时研究本身，这实际上确认了 AOI 从头到尾有效，而不仅仅是在编辑时。始终使用此功能至少预览一次您的研究，确认每个 AOI 都是绿色，然后在发布前关闭该功能，如果您不希望参与者看到覆盖。

出现或消失的元素（对话框、模态）

网页 AOI 的锚点不必一直存在于页面上。因为该扩展不断检查 CSS 选择器是否当前与任何内容匹配，因此锚定到对话框、模态或其他仅在特定时间点出现的内容中的元素的 AOI，会在该元素出现时激活，在其被移除时停用，而无需任何额外设置。这使您能够跟踪仅暂时存在的元素的交互，例如在特定操作后打开的确认对话框，使用上述描述的相同锚定机制。

常见问题解答

进一步阅读