Labvanced Web Bridge 扩展的标题插图

Labvanced Web Bridge — 扩展支持与指南

新手使用 Web Bridge？ 请按照 网站框架眼动追踪教程 完成从头到尾的任务流程，然后返回这里以获取完整的参考细节。

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

目录

1. 什么是 Labvanced Web Bridge？

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

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

在 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 工具栏中。

在 Chrome 中安装的 Labvanced Web Bridge 扩展

参与者

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

确认扩展程序已激活

研究人员 安装后，导航到 Dashboard 标签并创建一个 New Study。向下滚动并通过选中框激活 Track External Website:，输入目标网站 URL。如果扩展程序正确安装，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 选项来指示研究是针对桌面还是移动设备。在下图中，选择了移动，并且 AOI 自动更新。
  1. 对其他元素重复此操作。
  2. 每个 AOI 将出现在 AOI 列表中。它本身不会记录任何数据，如上所述添加一个 Eyetracking Gaze 事件以开始捕获数据。

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

4.3 跟踪内容

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

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

4.4 预览您的研究

在发布之前，请始终使用已安装扩展的情况下预览您的研究，以确认：

  • 网站在框架中正确加载。
  • AOI 正常工作。

首先保存任务，然后点击编辑器工具栏下的 “预览” 播放按钮，在 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, width, height)
  • 鼠标坐标、点击位置、悬停事件和鼠标移动路径
  • 当前页面的滚动位置和页面 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。基于 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