Labvanced Web Bridge — 扩展支持与指南

首次使用 Web Bridge？ 请按照 网站框架眼动追踪指引 进行从头到尾的任务流程，然后返回此处以获取完整参考详情。

需要帮助吗？ 请通过 [email protected] 联系我们。

目录

1. 什么是 Labvanced Web Bridge？

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

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

使用 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. 谁应该安装此扩展？

研究人员

如果您：

  • 设计的研究包含 真实网站 作为刺激（例如，测试产品页面、新闻文章、亭子界面）。
  • 正在使用 Website Frame 元素在 Labvanced 编辑器中。
  • 预览或试点包含外部网站的研究。

您不需要此扩展用于只使用标准 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，选定部分现在会变成绿色。
  • 如果您希望修改 AOI 选择，可以使用对象属性面板通过指向选择的 Parent 来调整选择，向上移动选择更大部分的网站或选择的 Child 来选择更具体的组件。AOI 一旦被锚定（并显示为绿色），您还可以通过扩大或减少每边的 x 和 y 坐标中的像素来增加其大小偏移，以及其位置。
  • 您还可以使用 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 面板选择元素。
  • 刷新编辑器并重试。

9. 常见问题

问：这个扩展是免费的？ 答：是的。该扩展是免费安装和使用的。需要一个 Labvanced 账户来设计研究。

问：它在其他浏览器（火狐、Safari、Edge）中可以使用吗？ 答：目前仅支持 Google Chrome。基于 Chromium 的 Microsoft Edge 可能可以工作，但未正式支持或测试。

问：在研究后我需要保留扩展吗？ 答：不需要。参与者可以在完成研究后立即卸载它。右击扩展程序图标 → "从 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