labvanced logoLabVanced
  • Research
    • Publications
    • Researcher Interviews
    • Use Cases
      • Developmental Psychology
      • Linguistics
      • Clinical & Digital Health
      • Educational Psychology
      • Cognitive & Neuro
      • Social & Personality
      • Arts Research
      • Sports & Movement
      • Marketing & Consumer Behavior
      • Economics
      • HCI / UX
      • Commercial / Industry Use
    • Labvanced Blog
    • Services
  • Technology
    • Feature Overview
    • Code-Free Study Building
    • Eye Tracking
    • Mouse Tracking
    • Generative AI Integration
    • Multi User Studies
    • More ...
      • Reaction Time/Precise Timing
      • Text Transcription
      • Heart Rate Detection (rPPG)
      • Emotion Detection
      • Questionnaires/Surveys
      • Experimental Control
      • Data Privacy & Security
      • Desktop App
      • Mobile App
  • Learn
    • Guide
    • Videos
    • Walkthroughs
    • FAQ
    • Release Notes
    • Documents
    • Classroom
  • Experiments
    • Cognitive Tests
    • Sample Studies
    • Public Experiment Library
  • Pricing
    • Licenses
    • Top-Up Recordings
    • Subject Recruitment
    • Study Building
    • Dedicated Support
    • Checkout
  • About
    • About Us
    • Contact
    • Downloads
    • Careers
    • Impressum
    • Disclaimer
    • Privacy & Security
    • Terms & Conditions
    • Third-Party Licenses
  • Appgo to app icon
  • Logingo to app icon
Learn
指南
视频
步骤说明
常见问题解答
通讯档案
文档
课堂
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
指南
视频
步骤说明
常见问题解答
通讯档案
文档
课堂
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
  • 指南
    • 入门

      • 任务编辑器
      • 刺激呈现
      • 反应的正确性
      • 对象
      • 事件
      • 变量
      • 任务向导
      • 试验系统
      • 研究设计
        • 任务
        • 阻塞
        • 会议
        • 组
    • 精选主题

      • 实验设计
        • 创建研究
        • 数据框模式
      • 随机化与平衡
      • 眼动追踪
        • 在眼动追踪任务中呈现刺激
        • 如何选择眼动追踪校准设置
        • 在任务中设置眼动追踪
        • 记录和导出视线数据
        • 使用形状作为兴趣区 (AOI) 进行眼动追踪
        • 参与者校准体验
      • 问卷
      • 桌面应用
      • 示例研究
      • 参与者招募
      • API访问
        • REST API
        • Webhook API
        • WebSocket API
      • 其他主题

        • 精确刺激时机
        • 多用户研究
        • Labvanced中的头部追踪 | 指南
    • 主应用选项卡

      • 概述:主选项卡
      • 仪表板
      • 我的研究
      • 共享研究
      • 我的文件
      • 实验库
      • 我的账户
      • 许可证与服务
    • 研究选项卡

      • 概述:研究特定选项卡
      • 研究设计
        • 任务
        • 阻塞
        • 会议
        • 组
      • 任务编辑器
        • 任务控制
        • 试验系统
        • 画布和页面框架
        • 对象
        • 对象属性表
        • 变量
        • 系统变量表
        • 事件系统
        • 文本编辑器功能
        • 任务编辑器中的眼动追踪选项
        • 任务中的头部追踪
        • 多用户研究
      • 设置
      • 变量
      • 媒体
      • 文本与翻译
      • 开始与参与
      • 受试者管理
      • 数据查看与导出
        • 数据视图和变量 & 任务选择(旧版本)
        • 访问录音(旧版本)
  • 视频
    • 视频概述
    • 在Labvanced中的入门
    • 创建任务
    • 元素视频
    • 事件与变量
    • 高级主题
  • 逐步指南
    • 介绍
    • 斯特鲁普任务
    • 词汇判断任务
    • 波斯纳注视提示任务
    • 变更盲点闪烁范例
    • 眼动追踪样本研究
    • 婴儿眼动追踪研究
    • 鼠标追踪的注意力捕获研究
    • 快速串行视觉呈现
    • ChatGPT研究
    • 眼动追踪演示:SVG作为AOI
    • 多用户演示:显示被试光标
    • 游戏手柄/摇杆控制器 - 基本设置
    • 具有EEG集成的桌面应用程序研究
    • 被试间组平衡和变量设置
  • 常见问题
    • 功能
    • 支持政策与指导方针
    • 安全与数据隐私
    • 许可
    • Labvanced的精确性
    • 编程使用与API
    • 离线使用Labvanced
    • 故障排除
    • 研究创建问题
  • 通讯档案
  • 文档
  • 教室

在嵌入式网站上进行眼动跟踪:Web Bridge教程

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

1. 这是否是正确的方式?

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

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

Labvanced Web Bridge是一个实时的、广泛可用的Chrome扩展,必须由您和每个参与者安装,而不仅仅是由构建研究的人安装。跳过此步骤,您首次发现问题的迹象将是失败的试点会议,而不是构建时的警告。始终在链接发布前测试已安装扩展的情况。

从Chrome Web商店安装它,按照完整Web Bridge指南中的安装。尚未安装扩展的参与者会看到这样一个提示,而不是研究:

参与者面向的提示,要求在继续研究之前安装Labvanced Web Bridge浏览器扩展

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

Website Frame 是Labvanced中的一种真实第三框架类型,与Canvas Frame和Page Frame并列,以相同的方式添加。

  1. 在编辑器中打开您的实验。
  2. 在Trial Timeline下,点击+ Website。
  3. 命名框架并输入目标网站的URL,然后确认扩展显示其绿色确认消息。如果没有出现,请在继续之前重新访问步骤2。
  4. 嵌入的网站现在在编辑器中的框架内实时显示。
实验时间线显示+网站框架选项与Canvas和Page并列

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

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

  1. 打开网站框架,并让嵌入的站点互动,点击AOI图标,这是选择网站框架时出现的工具栏中的顶部图标(工具提示:Add Website AOI)。
  2. AOI显示为红色。点击嵌入网站上的目标元素(产品图片、标题、按钮)。一旦锚定,选择将变为绿色。
任务编辑器工具栏,上面高亮显示添加网站AOI图标,下面是一个实时嵌入式网站
  1. 使用Parent、Child、Prev和Next在Object Properties面板中移动选择,向上、向下或横向调整页面的元素树,如果锚定区域过宽、过窄或偏离一个元素。
    • Resolution(桌面与移动)位于网站框架自己的属性上,而不是AOI的,请使用它来预览您的锚定AOI在不同屏幕尺寸下是否仍然落在正确的位置。
  2. 对每个要跟踪的元素重复此操作。
锚定的网站AOI及其对象属性面板,展示CSS选择器、父子/前后调整控制和侧面板中的AOI列表

如果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会为您创建目标AOI的Set / Record Variable动作。
  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的非凝视行为数据:元素位置、点击、悬停、鼠标移动和滚动位置。请参见完整指南中的跟踪内容以了解如何记录每一项。

事件编辑器显示一个眼动凝视触发器,针对两个网站AOI目标,与设置/记录变量动作相连

6. 可选:为试点添加凝视指示器

选择网站框架时出现的工具栏旁边有第二个图标,名为Add Gaze Indicator。点击它,Labvanced会在框架上添加一个小的红色圆形标记,并自动创建一个update gaze position事件,以在播放期间保持标记的位置更新为当前的凝视坐标。

这是一个试点辅助工具:它让您在测试研究时观察自己的凝视落在何处。它不会作为数据记录,也不是参与者需要的东西。

7. 如果您还需要网络摄像头的选择/取消选择路径

如果您的研究需要让参与者在任何相机访问提示出现之前决定是否启用网络摄像头眼动跟踪,那么那是一个单独的一般分支研究模式,不特定于网站框架。计划提供对此的专门教程。如果您在发布之前需要此功能,请联系[email protected]。

8. 测试并读取您的导出

预览您的任务并确认已安装扩展,确保网站加载正常,您的AOI锚定按预期执行。满意后发布,遵循完整指南中的发布和共享。

您的凝视数据以与任何其他网络摄像头眼动跟踪数据相同的方式导出:作为Dataview & Export标签中的时间序列行。请参阅导出凝视数据,了解如何读取X、Y、T和C列。

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

进一步阅读

Labvanced Web Bridge | 支持与指南

完整参考:安装、用例、数据与隐私、故障排除和常见问题解答。

记录和导出凝视数据

眼动凝视触发器、校准错误记录和数据导出格式的完整参考。

眼动凝视触发器

该触发器的完整参考,包括自动化的眼动凝视事件设置对话框和特定值。

Labvanced中的眼动跟踪

在网络摄像头眼动跟踪、实验室硬件和跟踪嵌入网站之间做出决定。