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
Technology
功能概述 - 所有
研究构建器
眼动追踪
鼠标追踪
Web桥接
生成式人工智能集成
多用户研究
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
功能概述 - 所有
研究构建器
眼动追踪
鼠标追踪
Web桥接
生成式人工智能集成
多用户研究
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
Labvanced中网站产品页面的插图,带有绿色轮廓的追踪区域、注视热图点、光标和滚动图标,标题为网站眼动追踪与行为追踪

网站眼动追踪与行为追踪

Labvanced Web Bridge 将真实网站引入 Labvanced 环境中,这样您可以在受控环境中研究参与者如何注视、点击和浏览网站。利用 Labvanced 的 网络摄像头眼动追踪,它经过同行评审研究(Kaduk et al., 2024)验证,追踪注视、点击、悬停和滚动,所有数据都来自真实页面,而不是其重建版本。


目录

  • 使用 Labvanced Web Bridge 进行真实网站测试
  • 在研究中使用 Web Bridge
  • 研究使用案例
  • 收集的数据
  • 验证与比较

使用 Labvanced Web Bridge 进行真实网站测试

大多数研究平台只能显示参与者在其中构建的刺激内容,例如图像、视频、表单、自定义页面。Web Bridge 打破了这一限制:将实际的产品页面、新闻网站或网络应用带入研究中,使用免费的 Chrome 扩展程序。

受控的用户体验和行为研究获益最大,因为看到某人对真实事物的反应比重现其效果更为重要。

Web Bridge 是 Labvanced 完整实验平台的一部分,因此同一研究可以随机化参与者看到的页面版本,将网站追踪与 Labvanced 的其他测量结合起来,并以一致的格式导出所有内容。

真实网站,而非模型

参与者在研究中与您实际的网站互动。被追踪的是用户实际会看到的真实页面。

一处掌握全部

注视、点击、悬停和滚动都在同一个被追踪元素上捕获,因此每个信号都可以无缝对接,无需额外工作。

追踪元素,而非屏幕位置

只需标记一次。追踪会持续正确跟随,即使在滚动、调整大小,甚至是只在点击后才出现的弹出窗口或菜单中。


通常有两个浏览器限制,但 Web Bridge克服了这两者。

网站禁止嵌入。 许多网站设置安全头,X-Frame-Options 或 Content-Security-Policy,专门阻止自己在其他页面中显示。Web Bridge 解除这一限制,但仅在打开 Labvanced 的浏览器标签中有效,其他标签不受影响,并且一旦标签关闭或离开 Labvanced,变化会立即消失。

浏览器隔离嵌入页面。 即使网站已经嵌入,里面的鼠标活动通常无法影响周围的页面。Web Bridge 的扩展直接从嵌入页面中读取点击、悬停和移动,并实时将其转回研究中。


在研究中使用 Web Bridge

要使用它,研究人员将在研究中添加一个 Website Frame 并将其指向真实 URL。从那里,通过简单的点击和选择操作来标记要追踪的内容:点击产品照片、标题或按钮,Labvanced 将锁定该确切元素,而不是其在屏幕上的位置。Labvanced 持续监控页面,因此追踪会自动调整,以适应滚动、在点击后才出现的元素(如弹出窗口或下拉菜单),甚至是会自动调整大小或移动的动画或元素。每个追踪区域都是一个简单的矩形,且没有任何内容是自动追踪的:研究人员在研究运行之前选择确切重要的内容。

在 Labvanced 编辑器中选择和调整真实网站的 AOI 选择
使用 Labvanced 环境选择 AOIs 并调整真实网站的 AOI 选择。

属性规格
浏览器谷歌浏览器
构建于Labvanced 的同行评审的网络摄像头眼动追踪(Kaduk et al., 2024)和鼠标追踪
追踪内容您选择的任何元素上的注视、点击、悬停和滚动
隐私仅在 Labvanced 嵌入的网站内部运行。密码和支付字段中的文本从未被读取

安装扩展程序

Web Bridge 是一个免费的 Chrome 扩展程序。您和您的参与者都需要安装它。只需不到一分钟的时间,如果参与者尚未拥有,Labvanced 会自动引导他们完成安装。

完整安装和设置指南

在您开始构建研究后,可以查看 选择和调整网站 AOIs 以获取完整的 AOI 锚定控制。至于构建点击、悬停和移动事件,请参见 网站 AOI 上的鼠标行为追踪。


注册

研究使用案例

模拟的跑步鞋产品页面,带有鞋子照片上的注视热图、产品名称、价格、颜色样本和添加到购物车按钮

电子商务

嵌入真实产品页面。查看人们实际关注哪些照片,哪个按钮被点击,以及他们在将商品加入购物车之前滚动了多远。

模拟新闻页面,注视热图集中在文章标题和旁边的山脉引导照片上

新闻与媒体

嵌入一篇实时新闻文章。找出哪些标题最先引起注意,以及随着文章的加长注意力如何变化。

模拟网站导航栏,解决方案下拉菜单已打开,虚线路径追踪从解决方案菜单到定价的移动

导航测试

嵌入真实的菜单或多页面流程。看看人们是否真的能找到他们想要的东西,以及在哪些地方他们犹豫不决。

两个标记为A和B的模拟床上用品着陆页,具有不同的标题和立即购买按钮颜色,每个都有点击的访客份额,42%和67%,以及一个进度条

A/B 测试

嵌入同一页面的两个版本,使用Labvanced的内置平衡随机分配参与者,并直接比较结果。

模拟儿童教育测验页面,询问哪种动物是狮子,旁边有狮子插图和三张答案卡(狮子、大象、斑马),并且注视热图在狮子插图和狮子答案卡上最强

发展心理学

嵌入一个真实的儿童教育网站,并跟踪年轻参与者如何浏览。这个对数字素养的研究和注意力如何在线上发展非常有用。

模拟新闻文章页面,标题为我们能否在两极化的世界中信任新闻,外面一栋建筑的照片,及其标题、照片和作者署名上的注视热图

媒体与政治心理学

嵌入一篇真实的新闻文章并跟踪人们的目光是否到达署名或来源,在他们决定是否信任之前。

对于市场研究,请参见市场研究中的网站眼动追踪:五项研究您可以进行,从结账费用和弹出窗口到横幅广告、产品页面和A/B测试。


收集的数据

嵌入一个真实的网站将普通浏览转化为研究数据。使用Web Bridge,您可以了解:

  • 访客首先看哪里,以及看了多长时间
  • 哪些元素从未被注视,或完全被跳过
  • 注意力如何从页面的一个部分移动到另一个部分,然后有人点击
  • 人们点击的内容是否与他们最初看到的内容相符,或者注意力和行动是否朝不同方向拉动
  • 人们在某个区域停留多长时间,这可能意味着他们在认真阅读或被卡住寻找某物

选择页面上的任何内容,例如产品照片、标题或按钮。以下是该内容记录的数据:

您得到的它告诉您的
注视人们实际看哪里,以及看了多长时间
元素位置您正在跟踪的内容的确切位置和大小,随着页面滚动实时更新
点击人们点击的内容,以及确切位置
悬停即使没有点击,也能引起注意的内容
鼠标移动光标在页面上的移动方式
滚动人们在采取行动之前滚动了多远

每个结果都可以干净地导出为CSV、XLSX或TSV,准备进行分析。


使用这些数据

在围绕这些数据设计研究时,有几个行为值得事先了解。

坐标空间因交互类型而异。 点击、按下鼠标、松开鼠标和鼠标移动事件报告相对于页面的坐标,这是嵌入页面的完整可滚动区域内的位置,包括已经滚动过去的部分。悬停和离开事件则报告相对于元素的坐标,这是在跟踪元素内的位置。两者在界面中使用相同的坐标标签,因此请提前决定研究需要哪个交互类型。在一个导出的列中结合这两者将混合两个不同的坐标系统,且没有任何警告。在跟踪的元素上记录的注视数据使用与点击相同的页面相对空间,因此来自同一元素的注视和点击数据直接对齐,无需任何转换。

持续追踪更新,而不仅仅是滚动。 每个被追踪元素的位置和大小在每一帧上都会重新测量,这使得追踪能够正确跟随动画、CSS过渡和动态调整大小的元素,而不仅仅是滚动或重新定位。

被追踪元素内部的可滚动区域拥有自己的坐标空间。 如果一个被追踪元素具有内部滚动,例如聊天面板或可滚动的产品列表,将其标记为可滚动容器将使该区域的滚动位置和内容大小与页面的整体滚动分开,以便嵌套滚动不会与外部页面混淆。

鼠标事件提供三种目标模式。 鼠标事件可以针对一个特定的被追踪元素触发,也可以针对任何被追踪元素,而不需要单独选择一个,或者针对嵌入页面上的任何地方,无论它是否为被追踪元素。这对于捕捉广泛的交互模式而不需要提前标记每个元素非常有用。


验证与比较

Web Bridge结合了Labvanced的两个核心测量引擎。注视数据来自Labvanced的网络摄像头眼动追踪,在一项经过同行评审的研究中与专业眼动仪(EyeLink 1000)进行了测试:整体准确度为1.4°,精度为1.1°,在屏幕中心提高到1.3°的准确度和0.9°的精度(Kaduk et al., 2024)。

点击、悬停和光标数据来自Labvanced的鼠标追踪,并在与注视数据相同的被追踪元素上记录。


它与其他方法的比较

测试真实网站的其他方法在需要什么和可以记录什么方面有所不同。

问题其他方法Web Bridge
网站需要更改吗?RealEye,一种网络摄像头眼动追踪服务,需要在网站上放置其JavaScript SDK,并在每个被追踪元素上添加data-re-aoi-name属性,进行其嵌入式网站测试。Microsoft Clarity,一种热图和会话记录工具,需要在网站上安装其跟踪代码。不需要。您只需粘贴要测试的网站的URL,并在Labvanced编辑器中点击元素进行标记。
它能记录嵌入页面内部发生的事情吗?其他网站的简单嵌入,例如Labvanced的I-Frame对象,无法被周围页面读取,因此无法捕捉到其中的点击和滚动。Microsoft Clarity也无法捕捉第三方iframe。是的。扩展可以读取嵌入页面内部的点击、悬停、鼠标移动和滚动。
它能与滚动和更改页面保持同步吗?RealEye的嵌入网站测试分析网站的屏幕截图,并不支持横向滚动。是的。标记元素会随着滚动、调整大小、动画和在页面打开后加载的内容而移动。
数据来自真实参与者吗?预测工具如Attention Insight使用AI模型估计注意力,而不是记录真实参与者。是的。它记录真实参与者的观看和点击位置。
它需要特殊硬件吗?Pupil Labs,一家眼动仪制造商,提供了一款Web AOI工具,要求使用其Neon眼动仪。不需要。它使用参与者的网络摄像头。
最后审查:2026-09-25。

关于AI预测热图与记录真实参与者相比能告诉您的信息,请参见AI能预测您的注视点,但仍然不知道您会做什么。


限制

Web Bridge仅在Google Chrome上运行,研究人员和每个参与者都需要安装免费的扩展。使用Website Frame进行研究需要Ultimate许可证。某些网站无法嵌入:amazon.com和ebay.com由于其防机器人保护而在编辑器中被阻止,而其他检测嵌入的网站可能也无法工作。Web Bridge追踪的是研究人员标记的元素,而不是页面上的所有内容。


常见问题

Web Bridge会追踪其他网站上的人吗?
不。追踪仅在Labvanced自己嵌入的网站内部开始。在其他任何页面上,扩展会立即退出,并且不会读取页面中的任何内容。它只检查浏览器标签是否在labvanced.com上,以决定何时允许嵌入。
参与者需要安装任何东西吗?
是的,参与者需要安装研究人员使用的相同免费扩展。如果参与者尚未安装,提示将引导他们在研究开始前完成安装,通常在一分钟之内。
如果页面更改,追踪是如何继续工作的?
每个被追踪元素会锁定在页面的实际部分,而不是固定的屏幕位置。Labvanced不断监控页面,因此如果参与者滚动,或出现新内容,如弹窗或扩展菜单,或者元素自动调整大小或动画,追踪会自动跟随。
它能自动检测要追踪的内容吗?
不,这样设计是有意的。研究人员通过在编辑器中直接点击来精确标记应该被追踪的内容,如照片、标题或按钮。没有任何内容是通过猜测或在没有手动步骤的情况下进行追踪的。
我可以在没有眼动追踪的情况下追踪点击和鼠标移动吗?
是的。鼠标追踪(点击、悬停和移动)独立于眼动追踪工作。您可以在同一个被追踪元素上记录其中一个、另一个或两者结合。
这些数据的准确性和Labvanced的常规眼动追踪一样吗?
是的。这是完全相同的引擎,通过与EyeLink 1000进行验证,整体准确度为1.4°,在屏幕中心为1.3°(Kaduk et al., 2024)。不同的是,这在于在真实的外部网站上的使用,而不是底层的准确性。

进一步阅读

一个人正在看一个使用Labvanced创建的网络摄像头眼动追踪任务

网络摄像头眼动追踪

Web Bridge背后的验证引擎,以及完整的准确性研究。

代表Labvanced中鼠标追踪能力的图标

鼠标追踪

在Labvanced内部构建的刺激上追踪光标运动,而不仅限于外部网站。

Labvanced Web Bridge Chrome扩展指南,显示了带有三个标记兴趣区域的浏览器窗口

Labvanced Web Bridge指南

安装扩展,嵌入网站,标记元素,开始录制。


注册