嵌入式网站上的眼动追踪：Web Bridge 操作指南

本指南涵盖了从安装所需扩展到读取导出数据的完整路径，以在 Labvanced 研究中跟踪在真实外部网站上基于摄像头的注视、点击和滚动行为。它使用与 Kaduk et al., 2024 中验证的 同行评审的摄像头眼动追踪管道 相同的方法，但将其应用于一个实时网站，而不是在 Labvanced 中直接构建的刺激。

在此视频中观看完整的操作指南：

1. 这是正确的方法吗？

如果您的研究嵌入真实的、实时的外部网站（如产品页面、新闻文章或客户自己的界面），并且您需要测量参与者如何查看、点击和滚动它，请使用本指南。如果您是跟踪直接在 Labvanced 中构建的刺激（如图片、文本、形状）的注视，请查看 摄像头眼动追踪指南。要了解这两条路径的完整情况，请参见 Labvanced 中的眼动追踪。

2. 首先安装扩展：每位参与者都需要

Labvanced Web Bridge 是一个实时、普遍可用的 Chrome 扩展，必须由 您和每位参与者 安装，而不仅仅是构建研究的人员。跳过此步骤，您遇到的第一个问题将是试点会话失败，而不是构建时警告。在传播研究链接之前，务必测试已安装扩展的情况。

按照完整的 Web Bridge 指南中的 安装 从 Chrome 网上商店安装它。尚未安装的参与者会看到如下提示，而不是研究内容：

3. 创建研究并添加网站框架

Website Frame 是 Labvanced 中的真实第三种框架类型，除了 Canvas Frame 和 Page Frame，以相同方式添加。

1. 在编辑器中打开实验。
2. 在 Trial Timeline 下，点击 + Website。
3. 命名框架并输入目标网站的 URL，然后确认扩展显示绿色确认消息。如果没有出现，继续之前请返回第 2 步。
4. 嵌入的网站现在会在编辑器中实时显示。

4. 选择您的 AOI：这是手动步骤

没有自动检测。Labvanced 从不读取网站自己的标记以猜测哪些容器对您的研究重要，每个兴趣区域 (AOI) 都是您手动点击并固定的容器。

1. 打开网站框架，并使嵌入的网站可交互，点击 AOI 图标，这是当选择网站框架时出现的工具栏中的顶部图标（工具提示：Add Website AOI）。
2. AOI 会以红色出现。点击嵌入网站上的目标元素（如产品图片、标题、按钮）。选择后，一旦固定会变为绿色。

3. 如果固定的区域过于宽、过于窄或偏离一个元素，请使用 Parent、Child、Prev 和 Next 在 Object Properties 面板中在页面元素树中上下或横向移动选择。有关这些控件的完整机制，请参阅 选择和调整网站 AOI，以及 Text Filter、Scrollable container 和如何在发布之前验证 AOI 是否真正固定。
   • Resolution（桌面与移动）在网站框架的属性上，而不是 AOI 的属性上，请使用它来预览您的固定 AOI 在不同屏幕大小下是否仍然正确。
4. 对您要跟踪的每个元素重复此步骤。

如果 AOI 在您加载的页面的不同页面上

网站框架仅具有一个起始 URL。如果您需要的元素在网站的不同页面上，例如仅在产品页面上存在的“添加到购物车”按钮，请先导航嵌入的网站到该页面（或直接指向框架的 URL 设置），然后以相同的方式在那里固定 AOI。您在框架中添加的所有 AOI 都会列在侧边面板中。

5. 记录注视数据：添加事件

AOI 本身不记录任何内容。只有当您构建一个事件将其捕获到变量中时，注视数据才会变得可用：

1. 从事件编辑器添加一个新事件。
2. 对于触发器，选择 Physiological Signal Triggers → Eyetracking Gaze。
3. 选择仅对特定元素触发的选项，然后将 AOI 添加为目标。
4. 命名事件。此时会自动出现 Eyetracking Gaze Event Setup 对话框，提供为您构建记录操作的选项，接受 Record gaze timeseries [X,Y,T,C]（默认勾选），Labvanced 将为您在下面创建 Set / Record Variable 操作，目标是您的 AOI。
5. 如果您跳过或关闭该对话框，请手动构建它：操作 Variable Actions → Set / Record Variable，变量设置为格式 Array 和记录类型 All changes / time series，然后在值选择菜单中选择 Coord. + Time + Confidence [X,Y,T,C] Array 作为 Trigger (Eyetracking Gaze) 选项。

这是与 Labvanced 构建的刺激一起使用的相同触发器和操作模式，应用于网站 AOI 目标。有关此事件、自动设置对话框和校准错误记录的详细信息，请参见 记录和导出注视数据 和 眼动追踪注视触发器 参考。

Web Bridge 还报告同一 AOI 的非注视行为数据：元素位置、点击、悬停、鼠标移动和滚动位置。有关如何记录每个内容，请参见完整指南中的 什么被跟踪。

6. 可选：为试点添加注视指示器

当选择网站框架时出现的工具栏中，有一个第二个图标紧挨着 Add Website AOI，称为 Add Gaze Indicator。点击它，Labvanced 将在框架中添加一个小红色圆形标记，以及一个自动创建的 update gaze position 事件，该事件在播放期间保持标记位置更新为当前的注视坐标。

这是一个试点辅助工具：它允许您在测试研究时观察自己的注视落点。这不作为数据记录，也不是参与者所需的功能。

7. 如果您还需要在相机提示之前分组参与者

如果您的研究需要在相机访问提示出现之前仅将部分参与者引入摄像头眼动追踪流程，无论是通过参与者选择、任务表现、自动组分配还是分割您的招募链接，这都是一种独立的、一般的分支研究模式，而不是特定于网站框架的。有关如何设置，请参见 条件摄像头眼动追踪。

8. 测试并读取您的导出

预览已安装扩展的任务，并确认网站加载并且 AOI 按预期固定。满足后发布，遵循完整指南中的 发布与分享。

您的注视数据的导出方式与其他任何摄像头眼动追踪数据相同：作为 Dataview & Export 标签中的时间序列行。有关如何读取 X、Y、T 和 C 列的信息，请参见 导出注视数据。

有关其他所有内容，包括研究人员和参与者的安装细节、完整用例、数据和隐私细节以及故障排除，请参见下面链接的完整 Labvanced Web Bridge 指南。

常见问题

进一步阅读