嵌入式网站上的注视追踪：Web Bridge教程

本教程涵盖了从安装所需扩展到读取导出数据的完整路径，用于在Labvanced研究中跟踪基于网络摄像头的注视、点击和滚动行为。它使用了同一条经过同行评审的网络摄像头注视追踪管道在Kaduk et al., 2024中验证的内容，应用于实时网站，而不是直接在Labvanced中构建的刺激。

1. 这是正确的方法吗？

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

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

Labvanced Web Bridge是一个实时、普遍可用的Chrome扩展程序，必须由您和每位参与者安装，而不仅仅是由构建研究的人安装。如果跳过此步骤，您首次察觉出问题的迹象将是一个失败的试点会议，而不是构建时的警告。在传播研究链接之前，请始终使用已安装的扩展程序进行测试。

从Chrome网上商店安装，按照完整Web Bridge指南中的安装。尚未安装的参与者在研究开始之前，会看到这样的提示：

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面板中通过页面的元素树上下或横向移动选择，如果锚定区域太宽、太窄或错过一个元素。
   • 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，然后在值选择菜单中从Trigger (Eyetracking Gaze)选项中选择Coord. + Time + Confidence [X,Y,T,C] Array。

这是用于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指南。

常见问题

进一步阅读