Selección y Ajuste de AOIs de Sitio Web

Un AOI de sitio web no rastrea una posición fija en la pantalla. Rastrea un elemento específico dentro de la página incrustada, llamado su ancla, identificado por un selector CSS. Hacer que un AOI se ubique en el elemento correcto se trata principalmente de elegir y ajustar ese ancla, no de cambiar su tamaño. 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 funcione antes de publicar.

Para lo básico de agregar un marco de sitio web y tu primer AOI, consulta Seleccionar Áreas de Interés (AOIs) en la guía completa de Web Bridge, o la guía paso a paso del marco de sitio web para un flujo de tarea de principio a fin.

Nota: seleccionar un AOI de sitio web muestra dos paneles separados: un bloque genérico 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 de 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 determinan lo que un AOI de sitio web rastrea. Usa los controles de selector CSS a continuación en su lugar.

El Ancla: Por Qué un AOI Sobrevive al Desplazamiento

Cada AOI de 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. Mientras el elemento ancla exista en la página, la extensión Labvanced Web Bridge sigue reportando su posición en vivo de nuevo a Labvanced, incluso mientras el participante se desplaza, ya que el elemento ancla se mueve con la página. Esta es la razón por la cual un AOI correctamente anclado sigue rastreando correctamente a través del desplazamiento sin que hagas nada extra: el ancla, no una coordenada de pantalla, es lo que se está rastreando.

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

Un selector rastrea solo un elemento. Si coincide con más de un elemento en la página, por ejemplo un nombre de clase compartido a través de un conjunto de tarjetas repetidas, el AOI rastrea el que aparece primero en la estructura de la página, no todos ellos. Esto surge principalmente con un selector escrito manualmente 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 Se Ubica en el Elemento Exacto

Antes de que hayas elegido 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 un selector existe realmente.

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 campo de entrada, y si no encuentra uno cercano, utiliza un contenedor cercano en su lugar. En la práctica, esto significa que hacer clic en un encabezado o un texto dentro de una tarjeta a menudo selecciona toda la tarjeta, no solo ese encabezado. Cuando eso sucede, usa los controles de navegación a continuación para bajar 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 pasándolo por alto.

Corrigiendo la Selección: Parent, Child, Prev, Next

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

Botón	Se mueve a
`↑ Parent`	El elemento contenedor del elemento actual
`↓ Child`	El primer elemento hijo del elemento actual
`← Prev`	El hermano anterior en el nivel actual
`→ Next`	El siguiente hermano en el nivel actual

Estas son la forma principal de corregir una selección, más que redimensionarla. El flujo de trabajo típico cuando Pick Element se ubica en el elemento incorrecto: haz clic en Child para moverte al primer elemento interno del contenedor, luego Next (o Prev) para avanzar a lo largo de los hermanos de ese elemento hasta que llegues al que realmente deseas. Si eso sigue siendo demasiado alto, haz clic en Child nuevamente para descender otro nivel, luego avanza nuevamente. Cada clic regenera el selector para donde aterrice, por lo que el AOI siempre se ancla a ese elemento exacto, no a un camino compuesto 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 superior es el html/body externo de la página), nada sucede: la selección permanece donde estaba, sin mensaje de error. Si un botón de navegación parece no responder, es probable que hayas alcanzado el borde de la estructura de la página en esa dirección, intenta con un botón diferente en su lugar.

Ajuste Fino del Tamaño y la Posición

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

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

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

Un AOI de sitio web es siempre 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, luego utiliza Size offset para recortar la caja.

Nombrando un AOI para Tus Datos Exportados

El campo Stimulus Info es una etiqueta de texto corta para el AOI. Se completa automáticamente con el texto de cualquier elemento que elijas 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 desencadenadores de eventos y datos exportados, por lo que es cómo sabes a qué AOI pertenece una fila de mirada, clic o hover dado 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 autocompletada 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 para que solo esté activo cuando el texto visible del elemento anclado contenga una cadena específica (la coincidencia no distingue entre mayúsculas y minúsculas). Esto es útil cuando tu selector ancla podría plausiblemente coincidir con un elemento cuyo texto cambia, por ejemplo, una etiqueta de estado que circula a través de varios estados, y solo deseas que el AOI se cuente como activo para un estado específico.

Rastreando una 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 indica 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 desencadenador Eyetracking Gaze/Eyetracking Fixation, no Mouse Trigger. Cuando la mirada cae dentro de un AOI de contenedor desplazable, su menú de selección de valor ofrece Container Relative X/Container Relative Y (posición dentro del contenido desplazable completo del contenedor, no solo lo que es actualmente visible) junto con Container Scroll X/Container Scroll Y (cuánto se ha desplazado el contenedor en sí). Consulta Rastreo del Comportamiento del Ratón en un AOI de Sitio Web para ver lo que registra el Disparador de Ratón en su lugar en el mismo AOI.

Verificando que un AOI Realmente Funciona

Un AOI que no logra anclarse, porque su selector no coincide con nada en la página actual, el elemento objetivo no se ha cargado aún, o la extensión Web Bridge 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 hover contra él, y nada en el estudio indica visiblemente eso.

Mientras construyes un estudio, cada AOI ya se renderiza como una superposición de color directamente en el editor, el verde significa que su selector coincide actualmente con un elemento en la página, el rojo significa que no lo hace, 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 esté en verde, luego desactívalo de nuevo 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 de 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 necesidad de 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

¿Debo usar el desplazamiento de tamaño para hacer un AOI más pequeño, o es esa la herramienta incorrecta?

Usualmente es la herramienta incorrecta. Si un AOI cubre demasiado o muy poco de la página, la solución casi siempre es elegir un ancla diferente con Parent, Child, Prev, o Next, no reducir o expandir el existente. Reserva Size offset y Position shift para correcciones pequeñas una vez que el ancla ya esté correcta.

¿Por qué Pick Element seleccionó un contenedor más grande que lo que hice clic?

El selector busca un buen contenedor seleccionable cerca de donde hiciste clic en lugar del píxel exacto, por lo que puede caer sobre una tarjeta, enlace o botón circundante en lugar de una pieza específica de texto o imagen dentro de él. Usa Child y luego Next/Prev para profundizar hasta el elemento exacto.

Hice clic en Next o Child y no pasó nada. ¿Es un error?

No. Si no hay hermano en esa dirección, o ningún elemento hijo al que moverse, el botón no hace nada y la selección permanece como estaba, sin mostrar un error. Intenta una dirección diferente.

¿Cómo sé si un AOI está realmente rastreando algo?

Activa Mostrar superposición de AOI en el reproductor en su panel de Propiedades del Objeto y previsualiza el estudio. El verde significa que el selector coincide actualmente con un elemento en la página; el rojo significa que no. No hay un error visible para el participante si un AOI no logra anclarse, así que verifica esto antes de publicar.

¿Puede un AOI de sitio web rastrear un elemento dentro de un popup o diálogo que no está siempre en la página?

Sí. El AOI se activa cada vez que su elemento anclado existe en la página y se desactiva cuando no lo está, por lo que un ancla dentro de un diálogo o modal que solo se abre en ciertos momentos funciona de la misma manera que cualquier otro AOI, sin necesidad de configuración adicional.