Un sitio web externo real integrado en un Marco de Sitio Web de Labvanced con un Área de Interés anclada en verde sobre una imagen de producto

Seguimiento ocular en un sitio web integrado: una guía de Web Bridge

Esta guía cubre el camino completo para rastrear la mirada, clics y comportamiento de desplazamiento basados en cámara web 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 ocular con cámara web 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.

Mira la guía completa en este video:

1. ¿Es Este el Enfoque Correcto?

Usa esta guía si tu estudio incorpora un sitio web externo real y en vivo (una página de producto, un artículo de noticias, la interfaz propia 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 en su lugar (imágenes, texto, formas), consulta la Guía de Seguimiento Ocular con Cámara Web en su lugar. Para tener el panorama completo de ambos caminos, consulta Seguimiento Ocular en Labvanced.

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

Labvanced Web Bridge es una extensión de Chrome en vivo y generalmente disponible, y debe ser instalada por tú y cada participante, no solo por quien construye el estudio. Omite esto y tu primera señal de que algo está mal será una sesión piloto fallida, no una advertencia de tiempo de construcción. Siempre prueba con la extensión instalada antes de circular un enlace del 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:

Aviso dirigido a los participantes solicitando instalar la extensión del navegador Labvanced Web Bridge antes de que el estudio pueda continuar

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

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

Abre tu experimento en el editor.
Bajo Trial Timeline, haz clic en + Website.
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.
El sitio web integrado ahora se muestra en vivo dentro del marco en el editor.

Línea de tiempo del ensayo mostrando la opción de tipo de marco + Sitio Web junto a Canvas y Página

4. Selecciona 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 haces clic y anclas manualmente.

Con el Marco de Sitio Web abierto y el sitio integrado 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).
El AOI aparece en rojo. Haz clic en tu elemento objetivo en el sitio web integrado (una imagen de producto, un titular, un botón). La selección se vuelve verde una vez anclada.

Barra de herramientas del editor de tareas con el ícono Agregar AOI de Sitio Web destacado sobre un sitio web integrado en vivo

Utiliza 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á fuera por un elemento. Consulta Seleccionar y Ajustar AOIs de Sitio Web para la mecánica completa de estos controles, más Text Filter, Scrollable container, y cómo verificar que un AOI está realmente anclado antes de publicar.
- Resolution (de 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 anclados aún se colocan correctamente en un tamaño de pantalla diferente.
Repite para cada elemento que desees rastrear.

AOI de sitio web anclado con su panel de propiedades de objeto que muestra el Selector CSS, controles de ajuste Padre/Hijo/Anterior/Siguiente y la lista de AOIs en el panel lateral

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 de "Agregar al Carrito" que solo existe en una página de producto, navega el sitio integrado hacia esa página primero (o apunta la configuración de URL propia del 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í solo no registra nada. La mirada sobre él solo se convierte en datos una vez que creas un evento que lo captura en una variable:

Agrega un nuevo evento desde el editor de eventos.
Para el disparador, selecciona Physiological Signal Triggers → Eyetracking Gaze.
Selecciona la opción de activar solo en elementos específicos, luego agrega tu AOI como objetivo.
Nombra el evento. Un diálogo Eyetracking Gaze Event Setup aparece automáticamente en este punto, 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 a continuación para ti, dirigida a tu AOI.
Si omites o cierras ese diálogo, construyelo manualmente: 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 ocular en estímulos construidos en Labvanced, aplicado a un objetivo AOI de Sitio Web en su lugar. Consulta Registro y Exportación de Datos de Mirada y la referencia Disparador de Mirada de Seguimiento Ocular para el detalle completo 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 visualizados para el mismo AOI: posición del elemento, clics, desplazamiento del mouse y posición de desplazamiento. Consulta Qué se Rastreará en la guía completa sobre cómo registrar cada uno.

Editor de eventos mostrando un disparador de Mirada de Seguimiento Ocular que apunta a dos objetivos de AOI de Sitio Web, conectado a acciones de Establecer/Registrar Variable

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

Esto es una ayuda para la prueba piloto: 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 Dividir Participantes Antes del Aviso de Cámara

Si tu estudio necesita enviar solo a algunos participantes a un flujo de seguimiento ocular con cámara web 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 Ocular con Cámara Web 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 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 cámara web: como filas de series de tiempo en la pestaña Dataview & Export. Consulta Exportación de 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, datos y especificaciones de privacidad, y solución de problemas, consulta la guía completa de Labvanced Web Bridge enlazada a continuación.

Preguntas Frecuentes

¿Todos los participantes deben instalar la extensión Web Bridge, o solo yo como investigador?

Cada participante, no solo tú. Si un participante no la ha instalado, se detiene en un aviso de instalación antes de que el estudio pueda comenzar, es un requisito para comenzar, no algo que falle a mitad de camino. Consulta Instala la Extensión Primero arriba.

¿Qué sucede cuando un participante hace clic en el aviso de instalación?

Los redirige a la Chrome Web Store, donde hacen clic en Agregar a Chrome, luego en Agregar extensión en el cuadro de diálogo de confirmación, luego regresan al experimento y actualizan la página para comenzar el estudio. Consulta Instalación en la guía completa de Web Bridge para conocer los pasos completos del participante.

¿Puedo anclar un AOI en una página diferente del sitio web que la que empecé?

Sí. Un Marco de Sitio Web solo tiene una URL de inicio, así que navega el sitio integrado a la página que necesitas primero (o apunta la configuración de URL propia del marco directamente a ella), luego ancla el AOI allí de la misma manera. Consulta Si el AOI Está en una Página Diferente a la Que Cargaste arriba.

¿Puedo agregar otros marcos a una tarea basada en el Marco de Sitio Web?

Se recomienda mantener la tarea a un solo Marco de Sitio Web y no combinarla con otras funcionalidades como el sistema de ensayos o marcos adicionales. Si necesitas algo después, como un cuestionario, constrúyelo como una tarea separada. Contáctanos si tienes un caso de uso que no encaja en este patrón.