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是一个免费的Chrome扩展,用于网站眼动追踪和行为追踪。它将一个实时网站嵌入Labvanced研究中,并记录参与者的注视、点击和滚动位置,使用Labvanced的网络摄像头眼动追踪,该技术在一项同行评审研究中与EyeLink 1000进行了验证(Kaduk等,2024)。


目录

  • 什么是Labvanced Web Bridge?
  • Labvanced Web Bridge能做什么
  • Web Bridge的不同之处
  • 您可以使用Labvanced Web Bridge进行的研究
  • 收集的数据
  • 基准测试准确性
  • Labvanced Web Bridge如何追踪真实网站
  • 网站追踪数据的表现
  • 设置Labvanced Web Bridge
  • 限制
  • 常见问题

什么是Labvanced Web Bridge?

Labvanced Web Bridge是一个免费的Chrome扩展,将Labvanced与真实的外部网站连接起来。通常,研究平台只能展示参与者在其内部构建的刺激,如图像、视频、表单和自定义页面。Web Bridge改变了这一点:它允许研究人员将实际的实时网站,如产品页面、新闻网站或网络应用,直接引入研究中,然后测量参与者在其上的行为。

它在受控的用户体验和行为研究中特别有用,在这些研究中,看到某人对真实事物的反应比再现它更重要。但它并不局限于此。


Labvanced Web Bridge能做什么

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

真实网站,而非模型

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

一切尽在一处

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

追踪元素,而非屏幕位置

标记某个元素一次。追踪会准确地跟随它,通过滚动、调整大小,甚至在点击后才显示的弹出窗口或菜单。


Web Bridge的不同之处

测试真实网站的其他方法在对网站的需求和能够记录的内容方面有所不同。

问题其他方法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,眼动追踪设备制造商,提供需要其Neon眼动追踪器的Web AOI工具。不需要。它使用参与者的网络摄像头。

有关与记录真实参与者相比,AI预测热图可以和不能告诉您的信息,请参见AI可以预测您的注视位置,但仍然无法知道您将要做什么

最后审查时间: 2026-09-25。详细信息与RealEye的知识库、Microsoft Clarity的设置文档、Attention Insight的知识库,以及Pupil Labs的Web AOI文档进行了核对。浏览器对读取嵌入页面的限制在MDN的同源策略文档中有所描述。


您可以使用Labvanced Web Bridge进行的研究

运动鞋产品页面的模型,上面有一个注视热图,覆盖在鞋子照片上,产品名称、价格、颜色样本和添加到购物车按钮

电子商务

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

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

新闻与媒体

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

模拟网站导航栏,Solutions下拉菜单打开,并有虚线轨迹从Solutions菜单到定价

导航测试

嵌入真实菜单或多页面流程。看看人们是否能找到他们所寻找的内容,以及他们在何处犹豫。

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

A/B测试

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

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

发展心理学

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

模拟新闻文章页面,标题为“在极化的世界中我们能否信任新闻”,一张人们在建筑外的照片,以及标题、照片和作者署名上的目光热图

媒体与政治心理学

嵌入一篇真实的新闻文章,并跟踪人们的目光是否能够到达作者署名或来源,然后再决定是否信任它。


收集的数据

嵌入真实网站将普通浏览转变为研究数据。通过Web Bridge,您可以了解到:

  • 访客首先查看的位置,以及查看的时间
  • 哪些元素从未被关注,或完全被跳过
  • 注意力如何从页面的一部分移动到另一部分,然后有人点击
  • 人们点击的内容是否与他们首先关注的内容相匹配,或注意力和行动是否朝不同的方向
  • 人们在一个区域停留的时间,这可能意味着他们在仔细阅读或卡在寻找某物

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

您得到的它告诉您什么
目光人们实际注视的地方,以及持续的时间
元素位置您正在跟踪的内容的确切位置和大小,随着页面滚动实时更新
点击人们点击的内容,以及确切的位置
悬停哪些内容即使没有点击也能引起注意
鼠标移动光标如何在页面上移动
滚动人们在采取行动之前滚动的距离

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


基准准确性

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

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


Labvanced Web Bridge如何追踪真实网站

Web Bridge使得对实时第三方网站进行受控行为研究成为可能:参与者与真实页面互动,同时Labvanced记录他们的眼动、点击、悬停和滚动。

实现这一目标需要绕过两个独立的浏览器限制。首先,许多网站设置安全头,X-Frame-Options或Content-Security-Policy,专门防止他们被嵌入在其他页面中。Web Bridge仅在Labvanced打开的浏览器选项卡中解除该限制。其他选项卡不受影响,关闭选项卡或离开Labvanced时,该更改被移除。其次,即使一个网站被嵌入,浏览器通常不允许在该嵌入页面中的鼠标活动访问周围的页面。这是一个单独的限制。Web Bridge的扩展也处理这个问题,直接从嵌入的页面中读取点击、悬停和移动事件,并实时将它们回传给研究。

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


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

注册

网站追踪数据的行为

在围绕这些数据设计研究之前,有几个行为值得提前了解。

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

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

被追踪元素内部的可滚动区域拥有自己的坐标空间。 如果被追踪元素有其内部滚动,比如聊天面板或可滚动的产品列表,标记为可滚动容器会将该区域的滚动位置和内容大小单独暴露,而不是与页面的整体滚动相结合,因此嵌套滚动不会与外部页面混淆。

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


设置Labvanced网络桥接

网络桥接是一个免费的Chrome扩展。您和您的参与者都需要安装它。这只需要不到一分钟的时间,如果参与者尚未安装,Labvanced会自动引导他们完成安装。

完整安装与设置指南

在您构建研究后,您可以参考选择和调整网站AOI以获取完整的AOI锚定控件。要构建点击、悬停和运动事件,请参见在网站AOI上追踪鼠标行为。


限制

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


常见问题

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

进一步阅读

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

网络摄像头眼动追踪

支持网络桥接的验证引擎,以及完整的准确性研究。

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

鼠标追踪

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

Labvanced网络桥接Chrome扩展指南,显示带有三个标记兴趣区域的浏览器窗口

Labvanced网络桥接指南

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


注册