Seguimiento de Ojos en un Sitio Web Incrustado: 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. Se utiliza el mismo pipeline de seguimiento de ojos con webcam revisado por pares validado en Kaduk et al., 2024, aplicado a un sitio web en vivo en lugar de estímulos construidos directamente en Labvanced.

1. ¿Este es el Enfoque Correcto?

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

2. Instala la Extensión Primero: Todos los Participantes la Necesitan

Web Bridge de Labvanced es una extensión de Chrome en vivo y generalmente disponible, y debe ser instalada por ti y cada participante, no solo por quien construye el estudio. Si omites esto, tu primera señal 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 circular 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 no la ha instalado aún verá un aviso como este en lugar del estudio:

3. Crea el Estudio y Añade el Marco del Sitio Web

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

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

4. Selecciona tus AOIs: Este es un Paso Manual

No hay autodetección. Labvanced nunca lee la propia estructura de un sitio web para adivinar qué contenedores importan para tu estudio, cada Área de Interés (AOI) es un contenedor que debes hacer clic y anclar manualmente.

1. Con el Marco de Sitio Web abierto y el sitio incrustado 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 incrustado (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, hacia 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á fuera por un elemento.
   • Resolution (escritorio vs. móvil) vive en las propias propiedades del Marco de Sitio Web, no en las del AOI, úsalo para previsualizar si tus AOIs ancladas todavía se ubican 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 a 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 primero al sitio incrustado a esa página (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 Mirada: Añade 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. Añade un nuevo evento desde el editor de eventos.
2. Para el disparador, selecciona Physiological Signal Triggers → Eyetracking Gaze.
3. Selecciona la opción de activar solo en elementos específicos, luego agrega tu AOI como objetivo.
4. Nombra el evento. Un diálogo Eyetracking Gaze Event Setup aparece automáticamente en este punto, ofreciendo construir la acción de registro 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, constrúyelo manualmente en su lugar: acción Variable Actions → Set / Record Variable, con una variable configurada a Formato Array y Tipo de Registro All changes / time series, luego en el menú de selección de valor elige Coord. + Time + Confidence [X,Y,T,C] Array de las opciones Trigger (Eyetracking Gaze).

Este es el mismo patrón de disparador-acción utilizado para el seguimiento ocular 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 de Disparador de Mirada de Seguimiento Ocular para obtener todos los detalles sobre este evento, el diálogo de configuración automática, y el registro de error de calibración.

Web Bridge también reporta datos conductuales 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 Rastrea en la guía completa para ver cómo registrar cada uno.

6. Opcional: Añadir un Indicador de Mirada para Pilotaje

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 añade un pequeño marcador circular rojo al marco, junto con un evento update gaze position creado automáticamente que mantiene actualizada la posición del marcador a las coordenadas de mirada actuales durante la reproducción.

Esta es una ayuda para el pilotaje: te permite observar dónde aterriza tu propia mirada mientras pruebas el estudio. No se registra como dato y no es algo que los participantes necesiten.

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

Si tu estudio necesita enviar solo a algunos participantes a un flujo de seguimiento ocular con webcam en absoluto, antes de que aparezca cualquier aviso de acceso a la cámara, ya sea por elección del participante, rendimiento de tareas, asignación automática de grupos, o dividiendo tus enlaces de reclutamiento, ese es un patrón de estudio de ramificación general separado, no específico para el Marco de Sitio Web. Consulta Seguimiento Ocular 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 carga y tus AOIs se anclan como se espera. Publica una vez que estés satisfecho, siguiendo Publicación y Compartición en la guía completa.

Tus datos de mirada se exportan de la misma manera que cualquier otro dato de seguimiento ocular 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, específicos de datos y privacidad, y solución de problemas, consulta la guía completa de Labvanced Web Bridge enlazada a continuación.

Preguntas Frecuentes

Lectura Adicional