一个嵌入Labvanced网站框架中的真实外部网站，上面有一个绿色锚定的兴趣区，显示在产品图片上

在嵌入式网站上进行注视追踪：Web Bridge演示

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

观看本演示的完整视频：

1. 这是正确的方法吗？

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

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

Labvanced Web Bridge是一个实时、普遍可用的Chrome扩展，必须由您和每个参与者安装，而不仅仅是研究的构建者。如果跳过这一环节，您最初感到异状的标志将是一个失败的试运行，而不是构建时的警告。始终在分发研究链接前测试已安装的扩展。

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

参与者看到的提示，要求在研究可以继续之前安装Labvanced Web Bridge浏览器扩展

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

Website Frame 是Labvanced中的第四种真实框架类型，其他还有Canvas Frame和Page Frame，以相同方式添加。

在编辑器中打开您的实验。
在Trial Timeline下单击+ Website。
命名框架并输入目标网站的URL，确认扩展显示其绿色确认消息。如果没有出现，请在继续之前重访第二步。
嵌入的网站现在在编辑器中的框架内实时显示。

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

没有自动检测。Labvanced从不读取网站自己的标记来猜测哪些容器对您的研究重要，每个兴趣区（AOI）都是您手动单击和锚定的容器。

在打开的网站框架中，嵌入的网站可交互，单击AOI图标，即在选择网站框架时出现的工具栏顶部图标（工具提示：Add Website AOI）。
AOI会以红色显示。单击嵌入网站上的目标元素（产品图像、标题、按钮）。选择后会变为绿色。

如果锚定区域过宽、过窄或偏离一个元素，请在Object Properties面板中使用Parent、Child、Prev和Next来移动选择。
- Resolution（桌面与移动）保留在网站框架的属性中，而不是AOI的属性中，您可以使用它来预览锚定的AOI在不同屏幕大小下是否仍然正确落位。
针对每个您想要追踪的元素重复此过程。

锚定的网站AOI及其对象属性面板，显示CSS选择器、父子/前后调整控制以及侧边面板中的AOI列表

如果AOI在您加载的页面之外

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

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

AOI本身不记录任何内容。注视数据只有在您构建一个事件以将其捕获到变量中后才会变成数据：

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