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
Learn
Guía
Videos
Guías paso a paso
Preguntas Frecuentes
Archivo de Boletines
Documentos
Aula
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
Guía
Videos
Guías paso a paso
Preguntas Frecuentes
Archivo de Boletines
Documentos
Aula
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
  • Guía
    • COMENZANDO

      • Editor de Tareas
      • Marcos
        • Marco de Lienzo
        • Marco de Página
        • Marco de Sitio Web
      • Línea de Tiempo del Ensayo
      • Presentación de Estímulos
      • Correctitud de la Respuesta
      • Objetos
      • Eventos
      • Variables
      • Asistente de Tareas
      • Sistema de Ensayos
      • Diseño del Experimento
        • Creación de un Estudio
        • Patrones de marco de datos
        • Diseño de Experimentos Multiusuario
        • Diseño de Experimentos Longitudinales
    • TEMAS DESTACADOS

      • Aleatorización y Balance
      • Seguimiento Ocular
        • Presentación de Estímulos en una Tarea de Seguimiento Ocular
        • Cómo Elegir Configuraciones de Calibración de Seguimiento Ocular
        • Configuración del Seguimiento Ocular en una Tarea
        • Grabación y Exportación de Datos de Mirada
        • Usando Formas como Áreas de Interés (AOI) para el Seguimiento Ocular
        • La Experiencia de Calibración del Participante
      • Puente Web
        • Selección de AOIs de Sitio Web | Anclar, Ajustar y Verificar el Seguimiento de AOI
        • Seguimiento del Comportamiento del Ratón en un AOI de Sitio Web | Guía del Puente Web
      • Cuestionarios
      • Aplicación de Escritorio
      • Estudios de Muestra
      • Reclutamiento de Participantes
      • Acceso a API
        • REST API
        • API de Webhook
        • API de WebSocket
      • Otros Temas

        • Temporizaciones de Estímulos Precisas
        • Estudios Mult.usuario
        • Seguimiento de Cabeza en Labvanced | Guía
    • TABS PRINCIPALES DE LA APLICACIÓN

      • Descripción General: Pestañas Principales
      • Tablero
      • Mis Estudios
      • Estudios Compartidos
      • Mis Archivos
      • Biblioteca de Experimentos
      • Mi Cuenta
      • Licencia y Servicios
    • TABS DEL ESTUDIO

      • Descripción General: Pestañas Específicas del Estudio
      • Diseño del Estudio
        • Tareas
        • Bloques
        • Sesiones
        • Grupos
      • Editor de Tareas
        • Controles de Tareas
        • El Sistema de Pruebas
        • Tipos de Marcos
        • Objetos
        • Tablas de Propiedades de Objetos
        • Variables
        • Tabla de Variables del Sistema
        • El Sistema de Eventos
        • Funciones del Editor de Texto
        • Opciones de Seguimiento Ocular en el Editor de Tareas
        • Seguimiento de Cabeza en una Tarea
        • Estudios Multi-Usuario
      • Configuraciones
      • Variables
      • Medios
      • Textos y Traducción
      • Lanzar y Participar
      • Gestión de Sujetos
      • Vista de Datos y Exportación
        • Vista de Datos y Selección de Variables y Tareas (Versión ANTIGUA)
        • Accediendo a Grabaciones (Versión ANTERIOR)
  • Videos
    • Resumen de Video
    • Introducción a Labvanced
    • Creando Tareas
    • Videos de Elementos
    • Eventos y Variables
    • Temas Avanzados
  • Guías
    • Introducción
    • Tarea Stroop
    • Tarea de Decisión Léxica
    • Tarea de Indicación de Mirada de Posner
    • Paradigma de Parpadeo de Ceguera por Cambio
    • Estudio Sample de Seguimiento Ocular
    • Estudio de Seguimiento Ocular en Infantes
    • Estudio de Captura Atencional con Seguimiento de Ratón
    • Presentación Visual Serial Rápida
    • Estudio de ChatGPT
    • Demostración de Seguimiento Ocular: SVGs como AOIs
    • Demostración Multi-Usuario: Mostrar los Punteros de los Sujetos
    • Controlador de Gamepad / Joystick - Configuración Básica
    • Estudio de Aplicación de Escritorio con Integración de EEG
    • Equilibrio de Grupos entre Sujetos y Configuración de Variables
    • Construyendo un Estudio Multi-usuario
    • Guía de Seguimiento Ocular en Marco de Sitio Web
    • Seguimiento Ocular Condicional con Webcam
  • FAQ
    • Características
    • Política de Soporte y Directrices
    • Seguridad y Privacidad de Datos
    • Licenciamiento
    • Precisión de Labvanced
    • Uso Programático y API
    • Uso de Labvanced sin Conexión
    • Resolución de Problemas
    • Preguntas sobre Creación de Estudios
  • Archivo de Boletines
  • Documentos
  • Aula
Ilustración de encabezado de la extensión Labvanced Web Bridge

Labvanced Web Bridge — Soporte y Guía de Extensión

¿Nuevo en Web Bridge? Sigue el Recorrido por el Seguimiento Ocular del Marco del Sitio Web para un flujo de tareas de principio a fin, luego regresa aquí para obtener detalles de referencia completos.

¿Necesitas ayuda? Contáctanos en [email protected]

Tabla de Contenidos

  • ¿Qué es Labvanced Web Bridge?
  • Instalación
  • ¿Quién debería instalar esto?
  • Cómo usarlo — Guía para Investigadores
  • Cómo usarlo — Guía para Participantes
  • Casos de Uso
  • Datos y Privacidad
  • Solución de Problemas
  • Preguntas Frecuentes
  • Contacto y Soporte

1. ¿Qué es Labvanced Web Bridge?

Labvanced Web Bridge es una extensión de navegador para Google Chrome que conecta la plataforma de experimentos Labvanced (labvanced.com) con sitios web reales. Permite a los investigadores realizar estudios de UX controlados e investigación del comportamiento en los que los participantes interactúan con sitios web de terceros en vivo, mientras Labvanced registra los movimientos oculares (a través de webcam), clics del ratón, eventos de pases del ratón y comportamiento de desplazamiento.

Sin esta extensión, los navegadores impiden que los sitios web se incrusten dentro de los estudios de investigación debido a restricciones de seguridad estándar. La extensión levanta esas restricciones solo dentro de sesiones de investigación controladas de Labvanced y añade las capacidades de seguimiento del comportamiento necesarias para medir la interacción del participante en el sitio incrustado.

Dentro del editor de Labvanced, la incrustación se realiza utilizando el Website Frame, un tercer tipo de marco junto a Canvas Frame y Page Frame, diseñado específicamente para esto en lugar de ser una variante de los otros dos. Consulta Marco del Sitio Web para ver cómo encaja junto a los otros tipos de marco.

Un sitio web incrustado en Labvanced usando la extensión de chrome

2. Instalación

Paso a paso

Investigadores

  1. Navega a Google Chrome.
  2. Ve a la página de la Chrome Web Store de Labvanced Web Bridge.
  3. Haz clic en "Agregar a Chrome".
  4. En el cuadro de confirmación, haz clic en "Agregar extensión".
  5. Verás que el ícono de Labvanced Web Bridge aparece en la barra de herramientas de Chrome.

La extensión Labvanced Web Bridge instalada en Chrome

Participantes

  1. Haz clic en Instalar
  2. Haz clic en "Agregar a Chrome".
  3. En el cuadro de confirmación, haz clic en "Agregar extensión".
  4. Regresa al experimento y actualiza la página para comenzar el estudio.

Confirmar que la Extensión está Activa

Investigadores Después de la instalación, navega a la pestaña Dashboard y crea un New Study. Desplázate hacia abajo y activa Track External Website: marcando la casilla e ingresa la URL del sitio web objetivo. Si la extensión está correctamente instalada, el editor de Labvanced mostrará una marca de verificación verde y un mensaje de confirmación.

Mensaje de confirmación verde al crear un nuevo estudio en Labvanced confirmando que la Extensión Web Bridge está instalada y funcionando.

Participantes

Al actualizar la página del experimento, este procederá.

Mensaje para que los participantes instalen la extensión de chrome

3. ¿Quién debería instalar esto?

Investigadores

Instala la extensión si eres:

  • Diseñando un estudio que incluya un sitio web real como estímulo (por ejemplo, probando una página de producto, un artículo de noticias, una interfaz de quiosco).
  • Usando el elemento Website Frame en el editor de Labvanced.
  • Previsualizando o pilotando un estudio que incluya sitios web externos.

No necesitas esta extensión para estudios que solo utilizan estímulos estándar de Labvanced (imágenes, videos, texto, formularios, etc.) o si eres el propietario del sitio web que puede editar y controlar directamente tus propios encabezados HTTP para tu sitio web.

Participantes del Estudio

Instala la extensión si:

  • Has recibido un enlace de estudio y te han indicado que lo instales antes de comenzar.
  • La página de introducción del estudio te pide confirmar que la extensión está instalada.

Si no estás seguro de si la necesitas, la página de tu enlace de estudio te lo dirá antes de que comience el estudio.

4. Cómo usarlo — Guía para Investigadores

4.1 Agregar un Marco de Sitio Web a Tu Estudio

  1. Abre tu experimento en el editor de Labvanced.
  2. Bajo Trial Timeline, haz clic en la opción de marco + Website.
  3. Selecciona "Marco del Sitio Web" de los tipos de elementos, luego la opción External Website. Si la extensión está activa, aparecerá el mensaje de confirmación verde. De lo contrario, consulta la sección anterior sobre el procedimiento de instalación.
  4. El sitio web que indicaste al crear la tarea en el paso anterior aparecerá automáticamente.

4.2 Seleccionando Áreas de Interés (AOIs)

Las Áreas de Interés (AOIs) son los elementos específicos en el sitio web incrustado que deseas seguir. Por ejemplo, una imagen de producto, un título o un botón de "Agregar al Carrito".

No hay detección automática: Labvanced nunca lee el HTML o el marcado del contenedor del sitio web incrustado para adivinar qué elementos importan a tu estudio. Cada AOI es una acción manual de clic y anclaje en el editor. Un AOI por sí solo tampoco registra ningún dato, la captura de la mirada requiere un evento Eyetracking Gaze explícito construido sobre él, consulta Grabar los Datos de la Mirada: Agregar Eventos en el recorrido del Marco del Sitio Web para saber cómo configurarlo.

  1. Con el Marco del Sitio Web activo en el editor y el sitio web mostrándose de manera interactiva, haz clic en el objeto Add Website AOI del menú lateral.
  2. El objeto AOI se añadirá y aparecerá en rojo. Haz clic en tu AOI objetivo. La selección se volverá verde.
  • Si Pick Element no ancla al elemento exacto que deseabas, o quieres ajustar el objetivo, tamaño o posición de un AOI existente, consulta Seleccionando y Ajustando AOIs de Sitio Web para la referencia completa sobre los controles de navegación Parent/Child/Prev/Next, desplazamientos de tamaño y posición, Text Filter, Scrollable container, y verificar que un AOI esté realmente anclado antes de publicar.
  • También puedes usar la opción Resolution para indicar si el estudio debe ser para desktop o móvil. En la imagen de abajo, se seleccionó móvil y los AOIs se actualizaron automáticamente.
  1. Repite para elementos adicionales.
  2. Cada AOI aparecerá en la lista de AOIs. Por sí solo no registrará ningún dato, agrega un evento Eyetracking Gaze como se describió anteriormente para comenzar a capturarlo.

Incrustación de sitios web basada en móvil y vista previa de AOI

4.3 Qué se Rastreará

Para cada AOI durante una sesión de estudio, Labvanced ofrece al investigador las siguientes posibilidades para registrar datos de comportamiento:

Tipo de datosDescripción
Posición del elementoEl cuadro delimitador (x, y, ancho, alto) del elemento en pantalla, actualizado en tiempo real a medida que el participante se desplaza
Datos de miradaSeguimiento ocular basado en webcam mapeado a posiciones de elementos (requiere que el seguimiento ocular esté habilitado en la configuración del estudio)
Eventos de clicSi y dónde el participante hizo clic dentro del elemento
Eventos de pase del ratónCuando el ratón del participante entró y salió del elemento
Movimiento del ratónCoordenadas del ratón a medida que el participante se mueve por la página
Posición de desplazamientoEl desplazamiento de la página en cada momento

4.4 Previsualizando Tu Estudio

Antes de publicar, siempre previsualiza tu estudio con la extensión instalada para confirmar:

  • El sitio web se carga correctamente en el marco.
  • Los AOIs funcionan como se esperaba.

Primero guarda la tarea, luego haz clic en el botón de reproducción de "Vista previa" en la barra de herramientas del editor bajo Task Controls para abrir una vista previa en modo participante de la tarea específica.

4.5 Publicación y Compartición

Una vez que tu estudio esté listo:

  1. Ve a la pestaña Launch & Participate.
  2. Haz clic en el botón Activate para habilitar las grabaciones de datos para tu estudio.
  3. En Online Participation / Study Published, haz clic en Publish.
  4. Copia Online Participation Link y compártelo con tus participantes.

5. Cómo Usar — Guía para Participantes

Antes del Estudio

  1. Recibirás un enlace directo a un estudio de investigación de Labvanced del investigador.
  2. Si la extensión no está instalada aún, la página del estudio mostrará un aviso de instalación con un enlace directo a la Chrome Web Store.
  3. Instala la extensión, luego regresa al enlace del estudio y actualiza la página.
  4. Una vez que el estudio confirme que la extensión está instalada, haz clic en Start para comenzar.

Durante el Estudio

  • Usa e interactúa con el sitio web que se te muestra como lo harías normalmente: navega, haz clic y desplázate según se indique.
  • La extensión funciona silenciosamente en segundo plano. No necesitas interactuar con ella.
  • No hagas clic en el ícono de la extensión durante el estudio. No es necesario.

Después del Estudio

  • Completa cualquier pregunta posterior al estudio si se te solicita.
  • Una vez que termine el estudio, puedes desinstalar la extensión si ya no la necesitas:
    • Haz clic derecho en el ícono de la extensión en la barra de herramientas → "Eliminar de Chrome".

Eliminando la extensión de Chrome de Labvanced.

6. Casos de Uso

6.1 Investigación UX en E-commerce

Incorpora una lista de productos o una página de pago. Rastrea en qué imágenes de productos se fijan los participantes, qué botones de "Agregar al carrito" hacen clic y cuán lejos se desplazan antes de tomar una decisión.

Ejemplo de un sitio web de librería e-shop integrado en Labvanced

6.2 Estudios de Atención en Noticias y Medios

Incorpora un artículo de noticias o una página de inicio. Mide qué titulares atraen más atención, cómo varían los patrones de lectura según la longitud del artículo y qué imágenes llaman primero la atención.

Ejemplo de un sitio web de noticias integrado en Labvanced

6.3 Pruebas de Navegación y Arquitectura de la Información

Incorpora el menú de navegación de un sitio web o un flujo de múltiples páginas. Registra clics y tiempos de permanencia al pasar el mouse para evaluar la claridad de las etiquetas del menú y su facilidad de localización.

6.4 Estudios de Comparación (A/B)

Crea dos ensayos con diferentes versiones del sitio web integradas. Randomiza a los participantes entre condiciones utilizando el contrabalanceo incorporado de Labvanced. Compara métricas AOI entre grupos.

7. Datos y Privacidad

¿Qué datos recoge la extensión?

La extensión recoge lo siguiente solo cuando estás dentro de una sesión de investigación activa de Labvanced:

  • Posiciones de los cuadros delimitadores (x, y, ancho, alto) de los elementos de la página seleccionados por el investigador
  • Coordenadas del mouse, posiciones de clics, eventos de paso del mouse y trayectorias de movimiento del mouse
  • La posición de desplazamiento actual de la página y la URL de la página
  • Fragmentos de texto visibles de los elementos que se pasaron o hicieron clic (truncados a 50 caracteres)

Los campos de contraseña y las entradas de formularios sensibles nunca se leen. La extensión excluye explícitamente <input type="password"> y entradas con atributos de autocompletar sensibles (autocomplete="password", cc-*). Estos devuelven valores vacíos en todos los casos.

¿A dónde va la información?

Todos los datos se transmiten exclusivamente a la página labvanced.com integrada a través de la API postMessage del navegador. La extensión no envía ningún dato a servidores externos, no almacena nada localmente y no recopila datos durante la navegación normal fuera de un estudio de Labvanced.

¿La extensión me rastrea en otros sitios web?

No. Los scripts de contenido de la extensión se inyectan en todos los iframes (porque el dominio del sitio web objetivo no se puede conocer de antemano), pero salen inmediatamente a menos que location.ancestorOrigins confirme que labvanced.com es un marco ancestral. En cualquier sitio web que no está integrado por Labvanced, no se instalan oyentes, no se lee el DOM y no fluyen datos.

¿La extensión modifica algo fuera de Labvanced?

No. La extensión elimina las restricciones de integración de iframe (X-Frame-Options / encabezados de Content-Security-Policy) solo en las pestañas del navegador cuyo URL de nivel superior es labvanced.com. Todas las demás pestañas no se ven afectadas en absoluto. Estas reglas se almacenan solo en memoria y se eliminan cuando la pestaña se cierra o navega lejos.

Política de Privacidad Completa

Consulta la política de privacidad completa en: https://www.labvanced.com/extension-privacy-policy.html

8. Solución de Problemas

El sitio web no se carga en mi estudio

Posibles causas y soluciones:

SíntomaCausa probableSolución
Marco blanco vacíoExtensión no instalada o deshabilitadaVerifica que la extensión esté habilitada en chrome://extensions
El sitio web no es interactivo o sensibleEl sitio detecta la integración de iframe a nivel de JSAlgunos sitios no pueden integrarse, contacta a [email protected]

El ícono de la extensión muestra una advertencia o está atenuado

  • Haz clic en el ícono para abrir el cuadro emergente y leer el mensaje de estado.
  • Asegúrate de que estés en una página labvanced.com o tengas un estudio de Labvanced abierto.
  • Intenta deshabilitar y volver a habilitar la extensión desde chrome://extensions.

El selector de elementos no resalta elementos

  • Asegúrate de que la extensión esté habilitada y que estés en el editor (no en modo vista previa).
  • Algunos sitios web usan estructuras de Shadow DOM o iframe dentro de iframe que limitan la selección de elementos. Intenta seleccionar un elemento Parent a través del panel Object Properties.
  • Actualiza el editor e intenta nuevamente.

9. Preguntas Frecuentes

P: ¿Es la extensión gratuita? R: Sí. La extensión es gratuita para instalar y usar. Se requiere una cuenta de Labvanced para diseñar estudios.

P: ¿Funciona en otros navegadores (Firefox, Safari, Edge)? R: Actualmente solo se admite Google Chrome. Microsoft Edge (basado en Chromium) puede funcionar pero no es oficialmente compatible ni probado.

P: ¿Necesito dejar instalada la extensión después del estudio? R: No. Los participantes pueden desinstalarla inmediatamente después de completar el estudio. Haz clic derecho en el ícono de la extensión → "Eliminar de Chrome".

P: ¿La extensión ralentiza mi navegador? R: La extensión está inactiva fuera de las sesiones de Labvanced. No añade ningún costo adicional a la navegación normal.

P: ¿Puede ver mis contraseñas o información bancaria? R: No. Los campos de contraseña (<input type="password">) y las entradas de tarjetas de crédito están explícitamente excluidos y devuelven valores vacíos en todos los casos. La extensión nunca lee ni transmite datos sensibles del formulario.

P: Como investigador, ¿puedo usar esto para rastrear un sitio web que el participante visita por sí mismo? R: No. La extensión solo se activa dentro de los iframes integrados por labvanced.com. No puede rastrear sitios web que los participantes visitan de forma independiente en otras pestañas.

P: La política de TI de mi institución requiere una revisión de la extensión antes de que los empleados puedan instalarla. ¿A quién puedo contactar? R: Contáctanos en [email protected] con tu solicitud.

10. Contacto y Soporte

Correo electrónico: [email protected]

Documentación: https://www.labvanced.com/content/learn/es/guide/

Foro comunitario en Discord: https://discord.com/invite/SBpFJnVZah

Reportes de errores: Por favor incluye:

  • Tu versión de Chrome (chrome://settings/help)
  • La URL del sitio web que estás intentando incrustar
  • Una captura de pantalla de cualquier mensaje de error
  • Pasos para reproducir el problema



Labvanced Web Bridge es desarrollado y mantenido por Scicovery GmbH. Para la política de privacidad completa, visita https://www.labvanced.com/extension-privacy-policy.html

Prev
Seguimiento Ocular
Next
Cuestionarios