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

Esta guía cubre todo el proceso 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 los datos exportados. Utiliza el mismo pipeline de seguimiento ocular 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. ¿Es Este el Enfoque Correcto?

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

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

Labvanced Web Bridge es una extensión de Chrome disponible en vivo y generalmente, y debe ser instalada por tú y cada participante, no solo por quien construye el estudio. Ignora esto y tu primera señal de que algo está mal será una sesión piloto fallida, no una advertencia en el tiempo de 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. Crear el Estudio y Agregar el Marco del Sitio Web

Website Frame es un verdadero tipo de marco de tercer nivel en Labvanced, junto a Canvas Frame y Page Frame, agregados 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 muestre su mensaje de confirmación en 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. Seleccionar Tus AOIs: Este Es un Paso Manual

No hay detección automática. Labvanced nunca lee el marcado propio de un sitio web para adivinar qué contenedores son importantes para tu estudio, cada Área de Interés (AOI) es un contenedor que clicas y anclas 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, abajo o lateralmente a través del árbol de elementos de la página si el área anclada es demasiado amplia, demasiado estrecha o se ha desviado en un elemento.
   • Resolution (escritorio vs. móvil) vive en las propias propiedades del Marco de Sitio Web, no en las del AOI, utilízalo para previsualizar si tus AOIs anclados siguen aterrizando 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 de "Añadir al Carrito" que solo existe en una página de producto, navega primero en el sitio incrustado a esa página (o señala la configuración propia de URL del marco directamente hacia ella), luego ancla el AOI allí de la misma manera. Todos los AOIs que has agregado al marco están listados en el panel lateral.

5. Registrar los Datos de Mirada: Agregar 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 solo activarse 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 momento, ofreciendo construir la acción de grabación para ti, acepta Record gaze timeseries [X,Y,T,C] (marcado por defecto) y Labvanced crea la acción Set / Record Variable abajo 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 como 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 disparo y acción utilizado para el seguimiento ocular en estímulos construidos en Labvanced, aplicado a un objetivo AOI del sitio web en su lugar. Consulta Grabación y Exportación de Datos de Mirada y la referencia del Disparador de Mirada de Seguimiento Ocular para tener todos los detalles sobre este evento, el diálogo de configuración automatizada y grabación de errores de calibración.

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

6. Opcional: Agregar un Indicador de Mirada para el 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 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.

Esto es una ayuda para el pilotaje: te permite observar dónde cae 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 un Camino de Opt-In/Opt-Out para la Webcam

Si tu estudio necesita permitir que los participantes decidan si habilitar el seguimiento ocular con webcam en absoluto, antes de que aparezca cualquier aviso de acceso a la cámara, ese es un patrón de estudio de ramificación general separado, no específico para el Marco de Sitio Web. Se planea una guía dedicada para eso. Si la necesitas antes de que se publique, contacta a [email protected].

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 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 para investigadores y 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.

Lectura Adicional