Ajustando el anclaje de un AOI de sitio web en un sitio web embebido real en Labvanced Web Bridge

Selección y Ajuste de AOIs de Sitio Web

Un AOI de Sitio Web no rastrea una posición de pantalla fija. Rastrea un elemento específico dentro de la página embebida, llamado su ancla, identificado por un selector CSS. Hacer que un AOI aterrice en el elemento correcto se trata principalmente de elegir y ajustar ese ancla, no de redimensionarlo. 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, ajustar el tamaño y la posición, nombrar un AOI para tus datos exportados, filtrar por texto, rastrear desplazamientos dentro de un elemento y verificar que un AOI realmente funcione antes de publicar.

Para los conceptos básicos 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 el tutorial de Marco de Sitio Web para un flujo de tareas 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 para 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 qué rastrea un AOI de Sitio Web. 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 embebida al que el AOI está vinculado. Mientras el elemento ancla exista en la página, la extensión de Labvanced Web Bridge sigue reportando su posición en vivo a Labvanced, incluso mientras el participante se desplaza, ya que el elemento ancla en sí se mueve con la página. Esta es la razón por la cual un AOI correctamente anclado sigue rastreando correctamente durante el desplazamiento sin hacer nada adicional: el ancla, no una coordenada de pantalla, es lo que se rastrea.

La implicación práctica: si un AOI parece perder el seguimiento de su objetivo, el problema suele ser el propio ancla (apunta al 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 en un conjunto de tarjetas repetidas, el AOI rastrea el que aparece primero en la estructura de la página, no todos ellos. Esto ocurre 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 en el 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, retrocede a un contenedor cercano en su lugar. En la práctica, esto significa que hacer clic en un encabezado o en un fragmento de texto dentro de una tarjeta a menudo selecciona toda la tarjeta, no solo ese encabezado. Cuando eso sucede, utiliza los controles de navegación a continuación para desplazarte al elemento exacto que deseabas.

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 no lo encuentra.

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

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

Botón	Se desplaza 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 hermano siguiente en el nivel actual

Estos son la forma primaria 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 interior 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 estando demasiado alto, haz clic en Child nuevamente para descender otro nivel y 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 lo que desplazarse (Prev sin hermano anterior, Child en un elemento sin hijos, o Parent cuando el único elemento arriba es el html/body externo de la página), nada sucede: la selección se queda 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.

Ajustando Tamaño y Posición

Una vez que un elemento está anclado, aparecen dos controles adicionales para pequeñas correcciones 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 fijo de píxeles en los ejes X e Y, aplicándose simétricamente a cada lado.
Position shift (px): mueve el área rastreada en un número fijo de píxeles sin cambiar su tamaño.

Utiliza estos solo después de haber corregido el ancla misma. Ellos ajustan el límite de un elemento ya correctamente anclado; no cambian qué elemento está siendo rastreado.

Un AOI de Sitio Web es siempre un rectángulo, la caja delimitadora 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 en sí mismo rectangular, ancla al elemento rectangular más pequeño que lo contiene, luego usa Size offset para recortar la caja.

Nombrando un AOI para Tus Datos Exportados

El campo Stimulus Info es una etiqueta de texto breve para el AOI. Se completa automáticamente a partir del 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 disparadores de eventos y los datos exportados, así que es cómo puedes identificar a qué AOI pertenece realmente una fila de mirada, clic o desplazamiento una vez que un fotograma 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 confuso 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 plausiblemente coincidir con un elemento cuyo texto cambia, por ejemplo, una etiqueta de estado que cicla a través de varios estados, y solo deseas que el AOI se cuente como activo para un estado específico.

Rastreo de 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 dice a Labvanced que también rastree la posición de desplazamiento de ese elemento y las dimensiones del contenido, por separado del desplazamiento general de la página.

Estos datos solo se exponen a través del disparador Eyetracking Gaze/Eyetracking Fixation, no Mouse Trigger. Cuando la mirada se coloca dentro de un AOI de contenedor de desplazamiento, 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 actualmente es visible) junto con Container Scroll X/Container Scroll Y (qué tan lejos se ha desplazado el contenedor en sí). Consulta Rastreo del Comportamiento del Ratón en un AOI de Sitio Web para qué registros 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 aún no se ha cargado, o la extensión de 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 desplazamiento en su contra, y nada en el estudio indica visiblemente eso.

Mientras estás construyendo un estudio, cada AOI ya se representa como una superposición de color directamente en el editor, verde significa que su selector actualmente coincide con un elemento en la página, rojo significa que no, sin necesidad de un interruptor para ver esto mientras trabajas. Show AOI overlay in player extiende esa misma superposición a Preview y al estudio en vivo en sí, que es lo que realmente confirma un AOI de principio a fin en lugar de solo mientras se edita. Siempre previsualiza tu estudio con esto al menos una vez, confirma que cada AOI sea verde, 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 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 puntos, 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

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

Por lo general, 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 Padre, Hijo, Anterior o Siguiente, no reducir o expandir el existente. Reserva Desplazamiento de Tamaño y Cambio de Posición para correcciones pequeñas una vez que el ancla ya esté correcta.

¿Por qué Pick Element seleccionó un contenedor más grande que el 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 aterrizar en una tarjeta, enlace o botón circundante en lugar de un fragmento específico de texto o imagen dentro de él. Utiliza Hijo y luego Siguiente/Anteriores para profundizar hasta el elemento exacto.

Hice clic en Siguiente o Hijo y no pasó nada. ¿Es eso un error?

No. Si no hay un 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 error mostrado. Intenta en una dirección diferente.

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

Activa Mostrar superposición de AOI en el reproductor en su panel de Propiedades del Objeto y previsualiza el estudio. Verde significa que el selector actualmente coincide con un elemento en la página; 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 una ventana emergente 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, por lo que un ancla dentro de un diálogo o modal que solo se abre en ciertos puntos funciona de la misma manera que cualquier otro AOI, sin necesidad de configuración adicional.