Labvanced Web Bridge 扩展的头部插图

Labvanced Web Bridge — 扩展支持与指南

第一次使用 Web Bridge？ 请参阅 网站框架眼动跟踪指南 了解从头到尾的任务流程，然后回来这里获取完整的参考细节。

需要帮助？ 请联系我们 [email protected]

目录

1. 什么是 Labvanced Web Bridge？

Labvanced Web Bridge 是一个针对 Google Chrome 的浏览器扩展，连接 Labvanced 实验平台 (labvanced.com) 到真实网站。它使研究人员能够进行控制的用户体验研究和行为研究，参与者与实时的第三方网站进行交互，同时 Labvanced 记录眼动（通过摄像头）、鼠标点击、悬停事件和滚动行为。

没有这个扩展，浏览器出于标准安全限制，阻止网站嵌入研究中。该扩展仅在受控的 Labvanced 研究会话中解除这些限制，并增加所需的行为跟踪能力，以测量参与者在嵌入网站上的交互。

有关这个区分为什么重要的内容，真实记录的点击和注视与 AI 预测的注意力可能去向之间，请参阅 AI 可以预测你会看哪里。但它仍然不知道你会做什么。

在 Labvanced 编辑器中，嵌入使用 Website Frame 完成，这是与 Canvas Frame 和 Page Frame 并列的第三种框架类型，专门为此目的而非其余两个的变体。请参阅 网站框架 了解它与其他框架类型的关系。

使用 chrome 扩展在 Labvanced 中嵌入的网站

2. 安装

步骤说明

研究人员

  1. 导航到 Google Chrome。
  2. 前往 Labvanced Web Bridge 的 Chrome 网上应用店页面。
  3. 点击 "添加到 Chrome"。
  4. 在确认对话框中，点击 "添加扩展"。
  5. 您会看到 Labvanced Web Bridge 图标出现在您的 Chrome 工具栏中。

Labvanced Web Bridge 扩展在 Chrome 中安装

参与者

  1. 点击安装
  2. 点击 "添加到 Chrome"。
  3. 在确认对话框中，点击 "添加扩展"。
  4. 返回实验并刷新页面以开始研究。

确认扩展已激活

研究人员 安装后，导航到 Dashboard 标签并创建 New Study。向下滚动并通过选中框激活 Track External Website:，输入目标网站 URL。如果扩展正确安装，Labvanced 编辑器将显示绿色勾号和确认信息。

在 Labvanced 中创建新研究时显示的绿色确认信息，确认 Web Bridge 扩展已安装并正常工作。

参与者

刷新实验页面后，实验将继续进行。

提示参与者安装 chrome 扩展

3. 谁应该安装此扩展？

研究人员

如果您正在设计包括 真实网站 作为刺激的研究，请安装该扩展（例如，测试产品页面、新闻文章、信息亭界面）。

  • 在 Labvanced 编辑器中使用 Website Frame 元素。
  • 预览或试点包含外部网站的研究。

对于仅使用标准 Labvanced 刺激（图像、视频、文本、表单等）的研究，或者您是网站所有者，可以直接编辑和控制自己网站的 HTTP 头部，则不需要此扩展。

研究参与者

如果您：

  • 已收到研究链接并被指示在开始之前安装它。
  • 研究的入门页面要求您确认已安装扩展。

如果您不确定是否需要它，您的研究链接页面将在研究开始前告诉您。

4. 如何使用它 — 研究者指南

4.1 将网站框架添加到研究中

  1. 在 Labvanced 编辑器中打开您的实验。
  2. 在 Trial Timeline 下，点击 + Website 框架选项。
  3. 从元素类型中选择 "网站框架"，然后选择 External Website 选项。如果扩展处于活动状态，绿色确认信息将会出现。否则，请参阅上面的安装程序部分。
  4. 您在创建任务时指示的网站将自动出现。

4.2 选择关注区域 (AOIs)

关注区域 (AOIs) 是您希望跟踪的嵌入网站上的特定元素。例如，产品图像、标题或 "添加到购物车" 按钮。

没有自动检测：Labvanced 从不读取嵌入网站的 HTML 或容器标记，以猜测哪些元素对您的研究重要。每个 AOI 都是在编辑器中手动点击和锚定的操作。AOI 自身也不会记录任何数据，注视捕获需要在其基础上构建明确的 Eyetracking Gaze 事件，详见 记录注视数据：添加事件 中关于如何设置的内容。

  1. 在编辑器中激活网站框架并以交互方式显示网站后，点击侧边菜单中的 Add Website AOI 对象。
  2. AOI 对象将被添加并显示为红色。点击您的目标 AOI。选择现在将变为绿色。
  • 如果 Pick Element 没有锚定到您所指的确切元素，或者您想调整现有 AOI 的目标、大小或位置，请参阅 选择和调整网站 AOIs 以获取关于 Parent/Child/Prev/Next 导航控件、大小和位置偏移、Text Filter、Scrollable container 及在发布之前验证 AOI 实际锚定的完整参考。
  • 您还可以使用 Resolution 选项来指示研究是针对桌面还是移动。下图中，选择了移动，并且 AOIs 自动更新。
  1. 对其他元素重复此操作。
  2. 每个 AOI 将出现在 AOI 列表中。仅凭其本身不会记录任何数据，请按照上述说明添加 Eyetracking Gaze 事件以开始捕获它。

基于移动的网站嵌入和 AOI 预览

4.3 追踪内容

在研究会话期间，Labvanced 为研究人员提供以下记录行为数据的可能性：

数据类型描述
元素位置元素在屏幕上的边界框 (x, y, 宽度, 高度)，在参与者滚动时实时更新
注视数据基于摄像头的眼动跟踪映射到元素位置（需要在研究设置中启用眼动跟踪）
点击事件参与者在元素内是否点击以及点击的位置
悬停事件当参与者的鼠标进入和离开元素时
鼠标移动参与者在页面上移动时的鼠标坐标
滚动位置每时刻的页面滚动偏移

4.4 预览您的研究

在发布之前，请始终使用已安装扩展的预览来确认：

  • 网站在框架中正确加载。
  • AOIs 按预期工作。

首先保存任务，然后单击编辑器工具栏中Task Controls的**“预览”**播放按钮以打开特定任务的参与者视图预览。

4.5 发布与共享

一旦您的研究准备就绪：

  1. 转到Launch & Participate选项卡。
  2. 单击Activate按钮以启用您研究的数据记录。
  3. 在Online Participation / Study Published下，单击Publish.
  4. 复制Online Participation Link并与您的参与者分享。

5. 如何使用 — 参与者指南

在研究之前

  1. 您将从研究人员那里收到Labvanced研究的直接链接。
  2. 如果尚未安装扩展程序，研究页面将显示安装提示，并提供指向Chrome网上应用店的直接链接。
  3. 安装扩展程序，然后返回研究链接并刷新页面。
  4. 一旦研究确认扩展程序已安装，单击Start以开始。

在研究期间

  • 像往常一样使用和与展示给您的网站互动：按指示浏览、点击和滚动。
  • 扩展程序在后台静默工作。您无需与其互动。
  • 在研究期间请勿单击扩展图标。此操作不是必需的。

在研究之后

  • 如果提示，请完成任何后续研究问题。
  • 一旦研究结束，您可以卸载扩展程序，如果您不再需要它：
    • 右键单击工具栏中的扩展图标 → “从Chrome中移除”。

Removing the Labvanced chrome extension.

6. 使用案例

6.1 电子商务用户体验研究

嵌入产品列表或结账页面。跟踪参与者关注的产品图片，点击的“添加到购物车”按钮，以及在做出决策之前滚动的深度。

Example of a bookstore website e-shop embedded in Labvanced

6.2 新闻与媒体注意力研究

嵌入新闻文章或主页。测量哪些标题吸引最多注意，阅读模式随着文章长度的变化，以及哪些图片首先引起注意。

Example of a news website embedded in Labvanced

6.3 导航与信息架构测试

嵌入网站的导航菜单或多页面流程。记录点击和悬停停留时间，以评估菜单标签的清晰度和易找性。

6.4 比较研究（A/B）

创建两个嵌入不同网站版本的试验。使用Labvanced内置的平衡计数对参与者进行随机分组。比较群组之间的AOI度量。

7. 数据与隐私

扩展程序收集了哪些数据？

该扩展程序仅在您处于活跃的Labvanced研究会话中收集以下数据：

  • 研究人员选择的页面元素的边界框位置（x，y，宽度，高度）
  • 鼠标坐标、点击位置、悬停事件和鼠标移动路径
  • 当前页面的滚动位置和页面URL
  • 从悬停/点击元素中提取的可见文本片段（缩短至50个字符）

密码字段和敏感表单输入决不会被读取。 该扩展程序明确排除<input type="password">和具有敏感自动完成功能的输入（autocomplete="password"，cc-*）。在所有情况下，这些返回空值。

数据去向？

所有数据仅通过浏览器的postMessage API传输到嵌入的labvanced.com页面。扩展程序不会向外部服务器发送任何数据，不会在本地存储任何内容，并且在Labvanced研究之外的正常浏览过程中不会收集任何数据。

扩展程序会在其他网站上跟踪我吗？

不会。扩展程序的内容脚本注入到所有iframe中（因为目标网站域无法预知），但它们会立即退出，除非location.ancestorOrigins确认labvanced.com是祖先框架。在Labvanced未嵌入的任何网站上，不会安装任何监听器，也不读取DOM，也不流动任何数据。

扩展程序会在Labvanced之外修改任何内容吗？

不会。扩展程序仅在顶级URL为labvanced.com的浏览器标签中删除iframe嵌入限制（X-Frame-Options / Content-Security-Policy头）。所有其他标签完全不受影响。这些规则仅存储在内存中，并在标签关闭或导航离开时移除。

完整的隐私政策

请查看完整隐私政策：https://www.labvanced.com/extension-privacy-policy.html

8. 故障排除

网站在我的研究中无法加载

可能的原因和修复：

症状可能原因修复
空白白框扩展程序未安装或已禁用检查扩展程序在chrome://extensions中是否已启用
网站无法互动或响应网站在JS级别检测iframe嵌入某些网站无法嵌入，联系方式 [email protected]

扩展程序图标显示警告或变灰

  • 单击图标打开弹出窗口并阅读状态消息。
  • 确保您在labvanced.com页面或打开了Labvanced研究。
  • 尝试在chrome://extensions中禁用并重新启用扩展程序。

元素选择器没有高亮元素

  • 确保扩展程序已启用并且您处于编辑器中（而不是预览模式）。
  • 一些网站使用Shadow DOM或嵌套iframe结构，限制元素选择。尝试通过Parent面板选择Object Properties元素。
  • 刷新编辑器并重试。

9. 常见问题

问：扩展程序是免费的？ 答：是的。扩展程序是免费的，安装和使用都不收费。设计研究需要Labvanced帐户。

问：它在其他浏览器（Firefox、Safari、Edge）上有效吗？ 答：目前仅支持Google Chrome。Microsoft Edge（基于Chromium）可能有效，但不官方支持或测试。

问：研究结束后，我需要保留扩展程序吗？ 答：不需要。参与者可以在完成研究后立即卸载它。右键单击扩展图标 → "从Chrome中移除"。

问：扩展程序会使我的浏览器变慢吗？ 答：扩展程序在Labvanced会话之外是非活动的。它不会对正常浏览增加任何开销。

问：它能看到我的密码或银行信息吗？ 答：不会。密码字段（<input type="password">）和信用卡输入被明确排除，并在所有情况下返回空值。扩展程序从不读取或传输敏感的表单数据。

问：作为研究人员，我可以使用此功能跟踪参与者独自访问的网站吗？ 答：不可以。扩展程序仅在由labvanced.com嵌入的iframe中激活。它无法跟踪参与者在其他标签中独立浏览的网站。

问：我机构的IT政策要求对扩展程序进行审核，才能让员工安装。 我该联系谁？ 答：请通过联系[email protected]与我们联系，询问您的请求。

10. 联系与支持

电子邮件： [email protected]

文档： https://www.labvanced.com/content/learn/zh/guide/

Discord社区论坛： https://discord.com/invite/SBpFJnVZah

错误报告： 请包括：

  • 您的Chrome版本（chrome://settings/help）
  • 您尝试嵌入的网站的URL
  • 报错信息的截图
  • 重现问题的步骤


Labvanced Web Bridge由Scicovery GmbH开发和维护。有关完整隐私政策，请访问https://www.labvanced.com/extension-privacy-policy.html