Selección y Ajuste de AOIs del Sitio Web

Un AOI del sitio web no rastrea una posición de pantalla fija. Rastrear un elemento específico dentro de la página incrustada, llamado su ancla, identificado por un selector CSS. Conseguir que un AOI aterrice en el elemento correcto se trata principalmente de elegir y ajustar ese ancla, no de redimensionarla. Esta página cubre el conjunto completo de controles en el panel Website AOI Object Properties: seleccionar un elemento, corregir la selección con Parent, Child, Prev, y Next, afinar el tamaño y la posición, nombrar un AOI para tus datos exportados, filtrar por texto, rastrear el desplazamiento dentro de un elemento y verificar que un AOI realmente funciona antes de publicarlo.

Para lo básico de agregar un Marco de Sitio Web y tu primer AOI, consulta Seleccionando Áreas de Interés (AOIs) en la guía completa de Web Bridge, o el tutorial de Marco de Sitio Web para un flujo de tarea de principio a fin.

Nota: seleccionar un AOI del sitio web muestra dos paneles separados: un bloque genérico de Object Properties (Name, Visibility, Active, Position & Size, y un control de cuadrícula Anchor) compartido por cada tipo de objeto en Labvanced, y los controles específicos de AOI del sitio web que cubre esta página. La cuadrícula Anchor del panel genérico es un punto de referencia de posición/escala, no relacionado con el ancla de selector CSS descrito a continuación, y sus campos Position & Size no son lo que determina qué rastrea un AOI del sitio web. Utiliza los controles de selector CSS a continuación en su lugar.

El Ancla: Por Qué un AOI Sobrevive al Desplazamiento

Cada AOI del sitio web almacena un selector CSS, mostrado en el campo CSS Selector de su panel Object Properties. Ese selector es el ancla del AOI: el único elemento en el DOM de la página incrustada al que está vinculado el AOI. Siempre que el elemento ancla exista en la página, la extensión Labvanced Web Bridge sigue informando su posición en tiempo real a Labvanced, incluso mientras el participante desplaza, ya que el elemento ancla se mueve con la página. Esta es la razón por la que un AOI correctamente anclado sigue rastreando correctamente durante el desplazamiento sin que tengas que hacer nada extra: el ancla, no una coordenada en pantalla, es lo que se está rastreando.

La implicación práctica: si un AOI parece perder el rastro de su objetivo, el problema normalmente es el propio ancla (indica el elemento incorrecto, o ese elemento ya no existe en la página), no su tamaño o posición.

Un selector solo rastrea un elemento. Si coincide con más de un elemento en la página, por ejemplo, un nombre de clase compartido entre un conjunto de cartas repetidas, el AOI rastrea el que aparece primero en la estructura de la página, no todos ellos. Esto aparece principalmente con un selector escrito a mano basado en una clase compartida; un selector producido por Pick Element o los controles de navegación a continuación está anclado al elemento exacto en el que aterrizaste y no tiene este problema.

Por Qué Pick Element No Siempre Aterriza en el Elemento Exacto

Antes de que hayas seleccionado o escrito un selector, el panel solo muestra CSS Selector, Pick Element, Stimulus Info, Text Filter, Scrollable container, y Show AOI overlay in player. Adjust selection (Parent/Child/Prev/Next) y los campos de desplazamiento de tamaño/posición solo aparecen una vez que realmente existe un selector.

Pick Element no siempre ancla al elemento exacto que haces clic. Busca un buen contenedor para seleccionar, favoreciendo un elemento con su propio ID o un elemento naturalmente interactivo como un enlace, botón o entrada, y si no encuentra uno cercano, recurre a un contenedor cercano. En la práctica, esto significa que hacer clic en un encabezado o un texto dentro de una carta a menudo selecciona toda la carta, no solo ese encabezado. Cuando eso sucede, utiliza los controles de navegación a continuación para moverte al elemento exacto que querías.

Presiona Esc en cualquier momento mientras seleccionas para cancelar sin cambiar el selector actual del AOI. También puedes omitir completamente el selector y escribir o pegar un selector CSS directamente en el campo CSS Selector, útil si ya conoces el selector que deseas o si el selector sigue fallando.

Corrigiendo la Selección: Padre, Hijo, Anterior, Siguiente

Una vez que se establece un selector CSS, aparecen cuatro botones debajo de Adjust selection: en el panel Object Properties:

Estos son la forma principal de corregir una selección, más que redimensionarla. El flujo de trabajo típico cuando Pick Element aterriza en el elemento incorrecto: haz clic en Child para moverte al primer elemento interno del contenedor, luego Next (o Prev) para desplazarte lateralmente a través de los hermanos de ese elemento hasta llegar al que realmente deseas. Si eso sigue siendo demasiado alto, haz clic en Child nuevamente para descender otro nivel, luego desplázate lateralmente nuevamente. Cada clic regenera el selector para donde aterrices, por lo que el AOI siempre se ancla a ese elemento exacto, no a un camino compuesto de vuelta a través de sus ancestros.

Si un botón no tiene nada a qué moverse (Prev sin hermano anterior, Child en un elemento sin hijos, o Parent cuando el único elemento por encima es el html/body exterior de la página), no sucede nada: la selección permanece donde estaba, sin mensaje de error. Si un botón de navegación parece no responder, probablemente has alcanzado el borde de la estructura de la página en esa dirección, intenta un botón diferente en su lugar.

Afinando Tamaño y Posición

Una vez que un elemento está anclado, aparecen dos controles adicionales para correcciones pequeñas a nivel de píxeles, distintos de la navegación anterior:

• Size offset (px, ± per side): expande o reduce el área rastreada por un número determinado de píxeles en los ejes X e Y, aplicado simétricamente a cada lado.
• Position shift (px): mueve el área rastreada por un número determinado de píxeles sin cambiar su tamaño.

Utiliza estos solo después de que el ancla en sí sea correcta. Ajustan el límite de un elemento ya correctamente anclado; no cambian qué elemento se está rastreando.

Un AOI del sitio web siempre es un rectángulo, el cuadro delimitador de cualquier elemento al que esté anclado. No hay opción de polígono o forma personalizada aquí, a diferencia de los AOIs en estímulos construidos directamente en Labvanced. Si el elemento que necesitas rastrear no es rectangular, ancla al elemento rectangular más pequeño que lo contenga y luego utiliza Size offset para recortar el cuadro.

Nombrando un AOI para Tus Datos Exportados

El campo Stimulus Info es un campo de texto corto para el AOI. Se completa automáticamente con el texto de cualquier elemento que selecciones o navegues (o el nombre de la etiqueta del elemento si no tiene texto), y puedes editarlo a algo más claro. Esta etiqueta es lo que aparece como el valor Stimulus Info en los desencadenantes de eventos y los datos exportados, así que es cómo puedes identificar qué AOI pertenece a una fila de mirada, clic o desplazamiento dada una vez que un marco tiene más de un AOI en él.

Dale a cada AOI una etiqueta Stimulus Info distinta antes de comenzar a recopilar datos reales. Una etiqueta auto-completada copiada del texto de un elemento, como "Agregar al Carrito", está bien por sí sola, pero se vuelve confusa una vez que el mismo texto aparece en más de un AOI.

Filtro de Texto

El campo Text Filter restringe el AOI a estar activo solo cuando el texto visible del elemento anclado contiene una cadena específica (la coincidencia no distingue entre mayúsculas y minúsculas). Esto es útil cuando tu selector ancla podría coincidir con un elemento cuyo texto cambia, por ejemplo, una etiqueta de estado que pasa por varios estados, y solo quieres que el AOI se cuente como activo para un estado específico.

Rastreando un Subregión Desplazable

Si el elemento al que te has anclado tiene su propio desplazamiento interno, por ejemplo, un panel de chat o una lista de productos desplazable anidada dentro de la página, marca Scrollable container. Esto le dice a Labvanced que también rastree la posición de desplazamiento y las dimensiones del contenido de ese elemento, por separado del desplazamiento general de la página.

Estos datos solo se exponen a través del desencadenante Eyetracking Gaze/Eyetracking Fixation, no de Mouse Trigger. Cuando la mirada aterriza dentro de un AOI de contenedor desplazable, su menú de selección de valores ofrece Container Relative X/Container Relative Y (posición dentro del contenido desplazable completo del contenedor, no solo lo que actualmente es visible) junto con Container Scroll X/Container Scroll Y (qué tan lejos ha desplazado el contenedor en sí). Consulta Rastreando el Comportamiento del Ratón en un AOI del Sitio Web para saber qué registra el Desencadenante de Ratón en cambio en el mismo AOI.

Verificando que un AOI Realmente Funciona

Un AOI que no puede anclarse, porque su selector no coincide con nada en la página actual, el elemento objetivo no se ha cargado todavía, o la extensión del Puente Web no está activa, no muestra ningún error al participante o al investigador por defecto. Simplemente permanece inactivo: no se registra ningún dato de mirada, clic o desplazamiento en su contra, y nada en el estudio indica visiblemente eso.

Mientras estás construyendo un estudio, cada AOI ya se renderiza como una superposición coloreada directamente en el editor, el verde significa que su selector actualmente coincide con un elemento en la página, el rojo significa que no, sin necesidad de alternar para ver esto mientras trabajas. Show AOI overlay in player extiende esa misma superposición a Preview y al estudio en vivo, que es lo que realmente confirma un AOI de extremo a extremo en lugar de solo mientras editas. Siempre previsualiza tu estudio con esto activado al menos una vez, confirma que cada AOI es verde y luego desactívalo nuevamente antes de publicar si no deseas que los participantes vean la superposición.

Elementos que Aparecen o Desaparecen (Diálogos, Modales)

El ancla de un AOI del sitio web no tiene que estar presente en la página todo el tiempo. Debido a que la extensión verifica continuamente si el selector CSS coincide actualmente con algo, un AOI anclado a un elemento dentro de un diálogo, modal u otro contenido que solo aparece en ciertos momentos, se activa cuando ese elemento aparece y se desactiva cuando se elimina, sin configuración adicional. Esto te permite rastrear interacciones con elementos que solo existen temporalmente, por ejemplo, un diálogo de confirmación que se abre después de una acción específica, utilizando el mismo mecanismo de anclaje descrito anteriormente.

Preguntas Frecuentes

Lectura Adicional