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 basados 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 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. ¿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, clican y desplazan. 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 el panorama completo 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 tú 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 en el momento de construir. 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 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, agregado de la misma forma.

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, vuelve al 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 detección automática. Labvanced nunca lee el propio marcado de un sitio web para adivinar qué contenedores son relevantes para tu estudio, cada Área de Interés (AOI) es un contenedor que debes clicar y anclar manualmente.

1. Con el Marco del 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 del 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 está desalineada. Consulta Seleccionar y Ajustar AOIs de Sitio Web para conocer la mecánica completa de estos controles, así como Text Filter, Scrollable container, y cómo verificar que un AOI está realmente anclado antes de publicar.
   • 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 todavía se colocan correctamente a un tamaño de pantalla diferente.
4. Repite para cada elemento que quieras rastrear.

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

Un Marco de Sitio Web solo tiene una URL de inicio. 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 incrustado a esa página primero (o apunta la configuración de URL del propio marco directamente a 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. Registra los Datos de la Mirada: Agrega Eventos

Un AOI por sí mismo 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, 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 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, 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 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 del Disparador de Mirada de Seguimiento de Ojos para los detalles completos sobre este evento, el diálogo de configuración automática y la grabación 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 ratón y posición de desplazamiento. Consulta Qué Se Rastrea en la guía completa sobre cómo grabar cada uno.

6. Opcional: Agrega un Indicador de Mirada para la 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 que actualiza la posición del marcador a las coordenadas de mirada actuales durante la reproducción.

Este es un ayuda para el pilotaje: te permite ver 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 Dividir a los 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 grupos o división de 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 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 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 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 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 vinculada a continuación.

Preguntas Frecuentes

Lectura Adicional