在嵌入式网站上进行眼动跟踪:Web Bridge教程
本教程覆盖了在Labvanced研究中跟踪基于网络摄像头的凝视、点击和滚动行为的完整路径,从安装所需的扩展到读取导出的数据。它使用在Kaduk et al., 2024中验证的相同经过同行评审的网络摄像头眼动跟踪管道,应用于实时网站而不是直接在Labvanced中构建的刺激。
1. 这是否是正确的方式?
如果您的研究嵌入了一个真实、实时的外部网站(一个产品页面、一篇新闻文章、客户自己的界面),并且您需要测量参与者如何查看、点击和滚动它,请使用此教程。如果您正在跟踪直接在Labvanced中构建的刺激(图像、文本、形状)而不是网站,则请查看网络摄像头眼动跟踪指南。有关这两条路径的完整信息,请参见Labvanced中的眼动跟踪。
2. 首先安装扩展:每个参与者都需要它
Labvanced Web Bridge是一个实时的、广泛可用的Chrome扩展,必须由您和每个参与者安装,而不仅仅是由构建研究的人安装。跳过此步骤,您首次发现问题的迹象将是失败的试点会议,而不是构建时的警告。始终在链接发布前测试已安装扩展的情况。
从Chrome Web商店安装它,按照完整Web Bridge指南中的安装。尚未安装扩展的参与者会看到这样一个提示,而不是研究:
3. 创建研究并添加网站框架
Website Frame 是Labvanced中的一种真实第三框架类型,与Canvas Frame和Page Frame并列,以相同的方式添加。
- 在编辑器中打开您的实验。
- 在
Trial Timeline下,点击+ Website。 - 命名框架并输入目标网站的URL,然后确认扩展显示其绿色确认消息。如果没有出现,请在继续之前重新访问步骤2。
- 嵌入的网站现在在编辑器中的框架内实时显示。
4. 选择您的AOI:这是一个手动步骤
没有自动检测。Labvanced从不读取网站自己的标记来猜测哪些容器对您的研究重要,每个关注区域(AOI)都是您手动点击并锚定的容器。
- 打开网站框架,并让嵌入的站点互动,点击AOI图标,这是选择网站框架时出现的工具栏中的顶部图标(工具提示:
Add Website AOI)。 - AOI显示为红色。点击嵌入网站上的目标元素(产品图片、标题、按钮)。一旦锚定,选择将变为绿色。
- 使用
Parent、Child、Prev和Next在Object Properties面板中移动选择,向上、向下或横向调整页面的元素树,如果锚定区域过宽、过窄或偏离一个元素。Resolution(桌面与移动)位于网站框架自己的属性上,而不是AOI的,请使用它来预览您的锚定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。
这是用于在Labvanced构建的刺激上进行眼动跟踪的相同触发和动作模式,而是应用于网站AOI目标。有关此事件、自动设置对话框和校准错误记录的详细信息,请参见记录和导出凝视数据和眼动凝视触发器参考。
Web Bridge还报告同一AOI的非凝视行为数据:元素位置、点击、悬停、鼠标移动和滚动位置。请参见完整指南中的跟踪内容以了解如何记录每一项。
6. 可选:为试点添加凝视指示器
选择网站框架时出现的工具栏旁边有第二个图标,名为Add Gaze Indicator。点击它,Labvanced会在框架上添加一个小的红色圆形标记,并自动创建一个update gaze position事件,以在播放期间保持标记的位置更新为当前的凝视坐标。
这是一个试点辅助工具:它让您在测试研究时观察自己的凝视落在何处。它不会作为数据记录,也不是参与者需要的东西。
7. 如果您还需要网络摄像头的选择/取消选择路径
如果您的研究需要让参与者在任何相机访问提示出现之前决定是否启用网络摄像头眼动跟踪,那么那是一个单独的一般分支研究模式,不特定于网站框架。计划提供对此的专门教程。如果您在发布之前需要此功能,请联系[email protected]。
8. 测试并读取您的导出
预览您的任务并确认已安装扩展,确保网站加载正常,您的AOI锚定按预期执行。满意后发布,遵循完整指南中的发布和共享。
您的凝视数据以与任何其他网络摄像头眼动跟踪数据相同的方式导出:作为Dataview & Export标签中的时间序列行。请参阅导出凝视数据,了解如何读取X、Y、T和C列。
有关其他所有内容,包括研究人员和参与者的安装详细信息、完整用例、数据和隐私特定信息以及故障排除,请参见下面链接的完整Labvanced Web Bridge指南。