选择和调整网站 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 中 AOI 绑定的一个元素。只要锚点元素存在于页面上，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 面板中：
| 按钮 | 移动到 |
|---|---|
↑ Parent | 当前元素的包含元素 |
↓ Child | 当前元素的第一个子元素 |
← Prev | 当前级别的前一个兄弟元素 |
→ Next | 当前级别的下一个兄弟元素 |
这些是修正选择的主要方法，而不是调整其大小。当 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（容器本身滚动的程度）。有关Mouse触发器在同一 AOI 上记录的内容，请参见 在网站 AOI 上跟踪鼠标行为。
验证 AOI 实际有效
由于其选择器未在当前页面上匹配任何内容、目标元素尚未加载或 Web Bridge 扩展未激活，无法锚定的 AOI 默认不会向参与者或研究者显示任何错误。它仅保持不活动状态：没有凝视、点击或悬停数据记录，并且研究中没有明显的指示。
在您构建研究时，每个 AOI 已经直接在编辑器中呈现为彩色覆盖，绿色意味着其选择器当前匹配页面上的元素，红色意味着不匹配，在您工作时无需切换以查看此内容。Show AOI overlay in player 将相同的覆盖扩展到 Preview 及实时研究，这才是实际确认 AOI 从头到尾有效的方式，而不仅仅是在编辑时。始终至少预览一次打开这个选项以确认每个 AOI 是绿色，然后在发布前再关闭它，如果您不想让参与者看到覆盖。
会出现或消失的元素（对话框、模式框）
网站 AOI 的锚点不必在页面上始终存在。由于扩展持续检查 CSS 选择器当前是否匹配任何内容，锚定在对话框、模式框或仅在特定时刻出现的其他内容内的元素时，该 AOI 在该元素出现时激活，并在其被移除时停用，无需任何额外设置。这使您能够跟踪那些仅暂时存在的元素的交互，例如在特定操作后出现的确认对话框，使用上述描述的相同锚定机制。
常见问题
我应该使用大小偏移来缩小 AOI，还是那是错误的工具？
Parent、Child、Prev 或 Next ，而不是缩小或扩展现有的。保留 Size offset 和 Position shift 用于在锚点本身已经正确之后进行微调。 为什么选择元素选择的容器比我点击的要大？
Child 然后 Next/Prev 来深入到确切的元素。 我点击了 Next 或 Child，但没有任何反应。这是个错误吗？
我如何知道一个 AOI 是否实际上在跟踪任何东西？
Object Properties 面板中启用 在播放器中显示 AOI 覆盖 并预览研究。绿色意味着选择器当前匹配页面上的元素；红色意味着不匹配。如果 AOI 无法锚定，则没有参与者可见的错误，因此请在发布之前检查这一点。 
