Seguimiento de Ojos en un Sitio Web Embebido: Una Guía de Web Bridge

Esta guía cubre el camino completo para rastrear la mirada, clics y comportamiento de desplazamiento basado en webcam en un sitio web externo real dentro de un estudio de Labvanced, desde la instalación de la extensión requerida hasta la lectura de tus datos exportados. Utiliza la misma tubería de seguimiento de ojos con webcam revisada por pares validada en Kaduk et al., 2024, aplicada a un sitio web en vivo en lugar de estímulos construidos directamente en Labvanced.

Mira la guía completa en este video:

1. ¿Es Este el Enfoque Correcto?

Usa esta guía si tu estudio embebe un sitio web externo real y vivo (una página de producto, un artículo de noticias, la propia interfaz de un cliente) y necesitas medir cómo los participantes miran, hacen clic y se desplazan por él. Si estás rastreando la mirada en estímulos construidos directamente en Labvanced (imágenes, texto, formas), consulta la Guía de Seguimiento de Ojos con Webcam en su lugar. Para ver la imagen completa de ambos caminos, consulta Seguimiento de Ojos en Labvanced.

2. Instala la Extensión Primero: Cada Participante la Necesita

Labvanced Web Bridge es una extensión de Chrome en vivo, generalmente disponible, y debe ser instalada por ti y cada participante, no solo por quien construye el estudio. Ignora esto y tu primer signo de que algo está mal será una sesión piloto fallida, no una advertencia durante la construcción. Siempre prueba con la extensión instalada antes de distribuir un enlace de estudio.

Instálala desde la Chrome Web Store, siguiendo Instalación en la guía completa de Web Bridge. Un participante que aún no la ha instalado verá un aviso como este en lugar del estudio:

3. Crea el Estudio y Agrega el Marco del Sitio Web

Website Frame es un tipo de marco real y tercero en Labvanced, junto a Canvas Frame y Page Frame, añadido de la misma manera.

1. Abre tu experimento en el editor.
2. En Trial Timeline, haz clic en + Website.
3. Nombra el marco e ingresa la URL del sitio web objetivo, luego confirma que la extensión muestra su mensaje de confirmación en verde. Si no aparece, vuelve a visitar el paso 2 antes de continuar.
4. El sitio web embebido ahora se muestra en vivo dentro del marco en el editor.

4. Selecciona Tus AOIs: Este Es un Paso Manual

No hay detección automática. Labvanced nunca lee el propio marcado de un sitio web para adivinar qué contenedores importan a tu estudio, cada Área de Interés (AOI) es un contenedor que debes hacer clic y anclar manualmente.

1. Con el Marco del Sitio Web abierto y el sitio embebido interactivo, haz clic en el ícono de AOI, el ícono superior en la barra de herramientas que aparece cuando se selecciona un Marco de Sitio Web (tooltip: Add Website AOI).
2. El AOI aparece en rojo. Haz clic en tu elemento objetivo en el sitio web embebido (una imagen de producto, un titular, un botón). La selección se vuelve verde una vez anclada.

3. Usa Parent, Child, Prev, y Next en el panel Object Properties para mover la selección hacia arriba, abajo o lateralmente a través del árbol de elementos de la página si el área anclada es demasiado amplia, demasiado estrecha o está desfasada en un elemento. Consulta Seleccionando y Ajustando AOIs de Sitios Web para los detalles completos sobre estos controles, además de Text Filter, Scrollable container, y cómo verificar que un AOI está realmente anclado antes de publicar.
   • Resolution (escritorio vs. móvil) reside en las propiedades del propio Marco de Sitio Web, no en las del AOI, utilízalo para previsualizar si tus AOIs anclados aún se colocan correctamente en un tamaño de pantalla diferente.
4. Repite para cada elemento que desees rastrear.

Si el AOI Está en una Página Diferente de la Que Cargaste

Un Marco de Sitio Web solo tiene una URL inicial. Si el elemento que necesitas está en una página diferente del sitio, por ejemplo, un botón "Agregar al Carrito" que solo existe en una página de producto, navega el sitio embebido a esa página primero (o apunta la configuración de URL del propio marco hacia ella directamente), luego ancla el AOI allí de la misma manera. Todos los AOIs que has añadido al marco están listados en el panel lateral.

5. Registra los Datos de la Mirada: Agrega Eventos

Un AOI por sí solo no registra nada. La mirada sobre él solo se convierte en datos una vez que construyes un evento que la captura en una variable:

1. Agrega un nuevo evento desde el editor de eventos.
2. Para el disparador, selecciona Physiological Signal Triggers → Eyetracking Gaze.
3. Selecciona la opción para activar solo en elementos específicos, y luego agrega tu AOI como objetivo.
4. Nombra el evento. Un diálogo de Eyetracking Gaze Event Setup aparece automáticamente en este punto, ofreciendo construir la acción de grabación por ti, acepta Record gaze timeseries [X,Y,T,C] (marcado por defecto) y Labvanced crea la acción Set / Record Variable a continuación para ti, dirigida a tu AOI.
5. Si omites o cierras ese diálogo, construyelo manualmente en su lugar: acción Variable Actions → Set / Record Variable, con una variable configurada en Formato Array y Tipo de Registro All changes / time series, luego en el menú de selección de valores elige Coord. + Time + Confidence [X,Y,T,C] Array de las opciones Trigger (Eyetracking Gaze).

Este es el mismo patrón de disparador y acción utilizado para el seguimiento de ojos en estímulos construidos en Labvanced, aplicado a un objetivo de AOI de Sitio Web en su lugar. Consulta Grabación y Exportación de Datos de Mirada y la referencia Disparador de Mirada del Seguimiento de Ojos para conocer todos los detalles sobre este evento, el diálogo de configuración automatizada y el registro de errores de calibración.

Web Bridge también informa datos de comportamiento no relacionados con la mirada para el mismo AOI: posición del elemento, clics, hover, movimiento del mouse y posición de desplazamiento. Consulta Qué se Rastreará en la guía completa para ver cómo registrar cada uno.

6. Opcional: Agrega un Indicador de Mirada para la Piloto

La barra de herramientas que aparece cuando se selecciona un Marco de Sitio Web tiene un segundo ícono justo al lado de Add Website AOI, llamado Add Gaze Indicator. Haz clic en él y Labvanced agrega un pequeño marcador circular rojo al marco, junto con un evento update gaze position creado automáticamente que mantiene la posición del marcador actualizada a las coordenadas de mirada durante la reproducción.

Este es un auxilio para la pilotaje: te permite ver dónde aterriza tu propia mirada mientras pruebas el estudio. No se registra como datos y no es algo que los participantes necesiten.

7. Si También Necesitas Dividir Participantes Antes del Aviso de Cámara

Si tu estudio necesita enviar solo a algunos participantes a un flujo de seguimiento de ojos con webcam antes de que aparezca cualquier aviso de acceso a la cámara, ya sea por elección del participante, rendimiento de la tarea, asignación automática de grupo o dividiendo tus enlaces de reclutamiento, ese es un patrón general de estudio de ramificación separado, no específico del Marco de Sitio Web. Consulta Seguimiento de Ojos con Webcam Condicional para saber cómo configurarlo.

8. Prueba y Lee Tu Exportación

Previsualiza tu tarea con la extensión instalada y confirma que el sitio web se carga y tus AOIs se anclan como se esperaba. Publica una vez que estés satisfecho, siguiendo Publicar y Compartir en la guía completa.

Tus datos de mirada se exportan de la misma manera que cualquier otro dato de seguimiento de ojos con webcam: como filas de series temporales en la pestaña Dataview & Export. Consulta Exportando Datos de Mirada para saber cómo leer las columnas X, Y, T, y C.

Para todo lo demás, detalles de instalación tanto para investigadores como para participantes, casos de uso completos, especificaciones de datos y privacidad, y resolución de problemas, consulta la guía completa de Labvanced Web Bridge enlazada a continuación.

Preguntas Frecuentes

Lectura Adicional