选择和调整网站 AOIs

网站 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 扩展会保持报告其活动位置，包括参与者滚动时，因为锚点元素本身随页面移动。这就是为什么一个正确锚定的 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 上跟踪鼠标行为 以了解 Mouse Trigger 在同一 AOI 上记录的内容。

验证 AOI 实际有效

由于选择器与当前页面上没有任何内容匹配、目标元素尚未加载或 Web Bridge 扩展未处于活动状态，因此未能锚定的 AOI 默认不会向参与者或研究人员显示任何错误。它只是保持不活跃：没有注视、单击或悬停数据被记录在它上面，研究中也没有任何可见的指示。

在您构建研究期间，每个 AOI 已经直接以彩色覆盖的方式在编辑器中渲染，绿色表示其选择器当前匹配页面上的元素，红色表示不匹配，而在您工作时无需切换以查看这个 Show AOI overlay in player 扩展相同的覆盖到 Preview 和现场研究本身，这才是真正确认 AOI 的端到端，而不仅仅是在编辑时。始终使用此功能预览您的研究至少一次，确认每个 AOI 是绿色的，然后在发布前再次关闭它，如果您不想让参与者看到该覆盖。

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

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

常见问题

进一步阅读