Labvanced Web Bridge — Soporte y Guía de Extensiones

¿Nuevo en Web Bridge? Sigue el Tutorial de Seguimiento Visual en Marco Web para un flujo de trabajo completo, y luego regresa aquí para obtener detalles de referencia completos.

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

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) a sitios web reales. Permite a los investigadores realizar estudios controlados de UX e investigación conductual en los que los participantes interactúan con sitios web en vivo de terceros, mientras Labvanced registra movimientos oculares (a través de webcam), clics del ratón, eventos de desplazamiento y comportamiento de desplazamiento.

Sin esta extensión, los navegadores impiden que los sitios web se incrusten dentro de 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 conductual necesarias para medir la interacción del participante en el sitio incrustado.

Para entender por qué esa distinción es importante, los clics y miradas grabados versus una estimación predicha por IA de dónde podría ir la atención, consulta La IA Puede Predecir Dónde Mirarás. Aún No Sabe Qué Harás.

Dentro del editor de Labvanced, la incrustación se realiza utilizando el Website Frame, un tipo de marco adicional 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 Web para ver cómo encaja junto a los otros tipos de marco.

2. Instalación

Paso a paso

Investigadores

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

Participantes

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

Confirmando 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 ingresando la URL del sitio web de destino. Si la extensión está correctamente instalada, el editor de Labvanced mostrará una marca de verificación verde y un mensaje de confirmación.

Participantes

Al actualizar la página del experimento, el experimento continuará.

3. ¿Quién Debe Instalar Esto?

Investigadores

Instala la extensión si estás:

• Diseñando un estudio que incluye 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 incluye 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 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 integración del estudio te pide que confirmes 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 Agregando 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 de 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 rastrear. Por ejemplo, una imagen de producto, un titular o un botón "Agregar al Carrito".

No hay detección automática: Labvanced nunca lee el HTML de la página web incrustada ni el marcado del contenedor para adivinar qué elementos importan para tu estudio. Cada AOI es una acción manual de clic y anclaje en el editor. Una AOI por sí sola tampoco graba datos; la captura de mirada requiere un evento Eyetracking Gaze explícito construido sobre ella, consulta Registrar los Datos de Mirada: Agregar Eventos en el tutorial de Marco Web para cómo configurarlo.

1. Con el Marco de 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 ahora se tornará verde.

• Si Pick Element no se ancla al elemento exacto que pretendías, o deseas ajustar el objetivo, tamaño o posición de una 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 verifica que una AOI esté realmente anclada antes de publicar.
• También puedes usar la opción Resolution para indicar si el estudio debería ser para escritorio o móvil. En la imagen a continuación, se seleccionó móvil y las AOIs se actualizaron automáticamente.

3. Repite para elementos adicionales.
4. Cada AOI aparecerá en la lista de AOI. Por sí sola no grabará datos, agrega un evento Eyetracking Gaze como se describe arriba para comenzar a capturarlos.

4.3 Qué se Rastreará

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

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.
• Las AOIs están funcionando como se espera.

Primero guarda la tarea, luego haz clic en el botón de "Vista previa" en la barra de herramientas del editor debajo de Task Controls para abrir una vista previa en el 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 el Online Participation Link y compártelo con tus participantes.

5. Cómo Usarlo — Guía para el Participante

Antes del Estudio

1. Recibirás un enlace directo a un estudio de investigación de Labvanced del investigador.
2. Si la extensión aún no está instalada, 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 vuelve 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

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

Después del Estudio

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

6. Casos de Uso

6.1 Investigación UX en E-commerce

Incorpora un listado de productos o una página de pago. Rastrea qué imágenes de productos fijan la atención de los participantes, qué botones de "Añadir al carrito" hacen clic y cuán lejos se desplazan antes de tomar una decisión.

6.2 Estudios de Atención en Noticias y Medios

Incorpora un artículo de noticias o una página principal. 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.

6.3 Pruebas de Navegación y Arquitectura de 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 del ratón para evaluar la claridad de las etiquetas del menú y la facilidad de localización.

6.4 Estudios de Comparación (A/B)

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

7. Datos y Privacidad

¿Qué datos recopila la extensión?

La extensión recopila los siguientes solo cuando estás dentro de una sesión de investigación activa de Labvanced:

• Posiciones de cuadros delimitadores (x, y, ancho, altura) de los elementos de la página seleccionados por el investigador
• Coordenadas del mouse, posiciones de clic, eventos de desplazamiento y trayectorias de movimiento del mouse
• La posición de desplazamiento de la página actual y la URL de la página
• Fragmentos de texto visibles de los elementos sobre los que se pasa el ratón/hace clic (recortados a 50 caracteres)

Los campos de contraseña y las entradas de formulario 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 que incrusta 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 ningún dato 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 no se puede conocer de antemano el dominio del sitio web objetivo), pero salen inmediatamente a menos que location.ancestorOrigins confirme que labvanced.com es un marco ancestral. En cualquier sitio web no incrustado por Labvanced, no se instalan oyentes, no se lee el DOM y no fluye ningún dato.

¿La extensión modifica algo fuera de Labvanced?

No. La extensión elimina las restricciones de incrustació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. Estas reglas se almacenan solo en memoria y se eliminan cuando la pestaña se cierra o navega fuera.

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

Causas y soluciones posibles:

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

• Haz clic en el icono para abrir el popup y lee el mensaje de estado.
• Asegúrate de que estás en una página de labvanced.com o que tienes un estudio de Labvanced abierto.
• Intenta desactivar y volver a activar la extensión desde chrome://extensions.

El selector de elementos no resalta elementos

• Asegúrate de que la extensión esté habilitada y de que estés en el editor (no en el modo de vista previa).
• Algunos sitios web utilizan Shadow DOM o estructuras de 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 y vuelve a intentarlo.

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 está oficialmente soportado ni probado.

P: ¿Necesito dejar la extensión instalada después del estudio? R: No. Los participantes pueden des-instalarla inmediatamente después de completar el estudio. Haz clic derecho en el icono 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 agrega sobrecarga 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 de formularios.

P: Como investigador, ¿puedo usar esto para rastrear un sitio web que el participante está visitando por su cuenta? R: No. La extensión solo se activa dentro de iframes incrustados por labvanced.com. No puede rastrear sitios web que los participantes visitan independientemente 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

Email: [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