Ajuster l'ancre d'un AOI de site Web sur un site Web intégré réel dans Labvanced Web Bridge

Sélectionner et ajuster les AOI de site Web

Un AOI de site Web ne suit pas une position fixe à l'écran. Il suit un élément spécifique à l'intérieur de la page intégrée, appelé son ancre, identifiée par un sélecteur CSS. Faire en sorte qu'un AOI atterrisse sur le bon élément dépend principalement du choix et de l'ajustement de cette ancre, et non de son redimensionnement. Cette page couvre l'ensemble des contrôles dans le panneau Website AOI Object Properties : choisir un élément, corriger la sélection avec Parent, Child, Prev, et Next, peaufiner la taille et la position, nommer un AOI pour vos données exportées, filtrer par texte, suivre le défilement à l'intérieur d'un élément et vérifier qu'un AOI fonctionne réellement avant de publier.

Pour les bases de l'ajout d'un cadre de site Web et de votre premier AOI, consultez Sélectionner les zones d'intérêt (AOIs) dans le guide complet de Web Bridge, ou le tutoriel sur le cadre de site Web pour une tâche de bout en bout.

Note : sélectionner un AOI de site Web affiche deux panneaux distincts : un bloc générique Object Properties (Name, Visibility, Active, Position & Size, et un contrôle de grille Anchor) partagé par tous les types d'objets dans Labvanced, et les contrôles spécifiques à l'AOI de site Web que cette page couvre. La grille Anchor du panneau générique est un point de référence de position/échelle, sans rapport avec l'ancre sélecteur CSS décrite ci-dessous, et ses champs Position & Size ne déterminent pas ce que suit un AOI de site Web. Utilisez plutôt les contrôles de sélecteur CSS ci-dessous.

L'ancre : pourquoi un AOI survit au défilement

Chaque AOI de site Web stocke un sélecteur CSS, affiché dans le champ CSS Selector de son panneau Object Properties. Ce sélecteur est l'ancre de l'AOI : l'élément unique dans le DOM de la page intégrée auquel l'AOI est lié. Tant que l'élément d'ancre existe sur la page, l'extension Labvanced Web Bridge continue de rapporter sa position en direct à Labvanced, y compris pendant que le participant défile, puisque l'élément d'ancre lui-même se déplace avec la page. C'est pourquoi un AOI correctement ancré continue de suivre correctement pendant le défilement sans que vous ayez à faire quoi que ce soit de plus : l'ancre, et non une coordonnée d'écran, est ce qui est suivi.

L'implication pratique : si un AOI semble perdre la trace de sa cible, l'ancre elle-même est généralement le problème (elle pointe vers le mauvais élément, ou cet élément n'existe plus sur la page), et non sa taille ou sa position.

Un sélecteur ne suit jamais qu'un seul élément. S'il correspond à plus d'un élément sur la page, par exemple un nom de classe partagé entre un ensemble de cartes répétées, l'AOI suit celui qui arrive en premier dans la structure de la page, et non tous. Cela se produit principalement avec un sélecteur tapé à la main basé sur une classe partagée ; un sélecteur produit par Pick Element ou les contrôles de navigation ci-dessous est ancré à l'élément exact sur lequel vous avez atterri et n'a pas ce problème.

Pourquoi le choix de l'élément ne tombe pas toujours sur l'élément exact

Avant que vous n'ayez sélectionné ou tapé un sélecteur, le panneau affiche uniquement CSS Selector, Pick Element, Stimulus Info, Text Filter, Scrollable container, et Show AOI overlay in player. Adjust selection (Parent/Child/Prev/Next) et les champs de décalage de taille/position n'apparaissent qu'une fois qu'un sélecteur existe réellement.

Pick Element ne s'ancre pas toujours à l'élément exact sur lequel vous cliquez. Il recherche un bon conteneur à sélectionner, privilégiant un élément avec son propre ID ou un élément naturellement interactif comme un lien, un bouton ou un champ, et s'il ne trouve pas de conteneur à proximité, il revient à un conteneur voisin à la place. En pratique, cela signifie que cliquer sur un titre ou un extrait de texte à l'intérieur d'une carte sélectionne souvent la carte entière, et pas seulement ce titre. Dans ce cas, utilisez les contrôles de navigation ci-dessous pour descendre vers l'élément exact que vous vouliez.

Appuyez sur Esc à tout moment pendant la sélection pour annuler sans changer le sélecteur actuel de l'AOI. Vous pouvez également sauter complètement le sélecteur et taper ou coller un sélecteur CSS directement dans le champ CSS Selector, utile si vous connaissez déjà le sélecteur que vous voulez ou si le sélecteur continue de le manquer.

Corriger la sélection : Parent, Enfant, Précédent, Suivant

Une fois qu'un sélecteur CSS est défini, quatre boutons apparaissent sous Adjust selection: dans le panneau Object Properties :

Bouton	Déplace vers
`↑ Parent`	L'élément contenant de l'élément actuel
`↓ Child`	Le premier élément enfant de l'élément actuel
`← Prev`	Le frère précédent au niveau actuel
`→ Next`	Le frère suivant au niveau actuel

Ce sont les principales façons de corriger une sélection, plus que de la redimensionner. Le flux de travail typique lorsque Pick Element atterrit sur le mauvais élément : cliquez sur Child pour descendre dans le premier élément intérieur du conteneur, puis Next (ou Prev) pour se déplacer latéralement entre les frères de cet élément jusqu'à atteindre celui que vous souhaitez vraiment. Si c'est encore trop haut, cliquez à nouveau sur Child pour descendre d'un niveau supplémentaire, puis déplacez-vous latéralement à nouveau. Chaque clic régénère le sélecteur pour où que vous atterrissiez, donc l'AOI s'ancre toujours sur cet élément exact, et non sur un chemin composé à travers ses ancêtres.

Si un bouton n'a rien vers quoi se déplacer (Prev sans frère précédent, Child sur un élément sans enfants, ou Parent lorsque le seul élément au-dessus est le html extérieur de la page/body), rien ne se passe : la sélection reste où elle était, sans message d'erreur. Si un bouton de navigation semble non réactif, vous avez probablement atteint le bord de la structure de la page dans cette direction, essayez un autre bouton.

Peaufiner la taille et la position

Une fois qu'un élément est ancré, deux contrôles supplémentaires apparaissent pour de petites corrections de niveau pixel, distinctes de la navigation ci-dessus :

Size offset (px, ± per side) : agrandit ou réduit la zone suivie d'un nombre fixe de pixels sur les axes X et Y, appliqué de manière symétrique de chaque côté.
Position shift (px) : déplace la zone suivie d'un nombre fixe de pixels sans changer sa taille.

Utilisez-les uniquement après que l'ancre elle-même est correcte. Ils ajustent la limite d'un élément déjà correctement ancré ; ils ne changent pas quel élément est suivi.

Un AOI de site Web est toujours un rectangle, la boîte englobante de l'élément auquel il est ancré. Il n'y a pas d'option de polygone ou de forme personnalisée ici, contrairement aux AOI sur des stimuli créés directement dans Labvanced. Si l'élément que vous devez suivre n'est pas lui-même rectangulaire, ancrez-vous à l'élément rectangulaire le plus petit qui le contient, puis utilisez Size offset pour réduire la boîte.

Nommer un AOI pour vos données exportées

Le champ Stimulus Info est une courte étiquette textuelle pour l'AOI. Il est rempli automatiquement à partir du texte de l'élément que vous choisissez ou que vous naviguez (ou le nom de la balise de l'élément s'il n'a pas de texte), et vous pouvez le modifier pour quelque chose de plus clair. Cette étiquette est ce qui apparaît en tant que valeur Stimulus Info dans les déclencheurs d'événements et les données exportées, donc c'est ainsi que vous identifiez à quel AOI une ligne de regard, de clic ou de survol appartient réellement une fois qu'un cadre a plus d'un AOI dessus.

Donnez à chaque AOI une étiquette Stimulus Info distincte avant de commencer à collecter de vraies données. Une étiquette remplie automatiquement copiée à partir du texte d'un élément, comme "Ajouter au panier", est correcte en soi, mais devient confuse une fois que le même texte apparaît sur plus d'un AOI.

Filtre de texte

Le champ Text Filter limite l'AOI à n'être actif que lorsque le texte visible de l'élément ancré contient une chaîne spécifique (la correspondance est insensible à la casse). Cela est utile lorsque votre sélecteur d'ancrage pourrait plausiblement correspondre à un élément dont le texte change, par exemple une étiquette de statut qui passe par plusieurs états, et que vous ne voulez que l'AOI soit compté comme actif pour un état spécifique.

Suivi d'une sous-région défilable

Si l'élément auquel vous vous êtes ancré a son propre défilement interne, par exemple un panneau de chat ou une liste de produits défilable imbriquée dans la page, cochez Scrollable container. Cela indique à Labvanced de suivre également la position de défilement et les dimensions de contenu de cet élément, séparément du défilement global de la page.

Ces données ne sont exposées que par le déclencheur Eyetracking Gaze/Eyetracking Fixation, pas Mouse Trigger. Lorsque le regard se trouve à l'intérieur d'un AOI de conteneur défilable, son menu de sélection de valeur propose Container Relative X/Container Relative Y (position dans le contenu défilable complet du conteneur, et non uniquement ce qui est actuellement visible) ainsi que Container Scroll X/Container Scroll Y (combien loin le conteneur lui-même a défilé). Consultez Suivi du comportement de la souris sur un AOI de site Web pour savoir ce que le Déclencheur de souris enregistre à la place sur le même AOI.

Vérifier qu'un AOI fonctionne réellement

Un AOI qui échoue à s'ancrer, parce que son sélecteur ne correspond à rien sur la page actuelle, que l'élément cible n'est pas encore chargé ou que l'extension Web Bridge n'est pas active, ne montre par défaut aucune erreur au participant ou au chercheur. Il reste simplement inactif : aucune donnée de regard, de clic ou de survol n'est enregistrée contre lui, et rien dans l'étude n'indique cela de manière visible.

Pendant que vous construisez une étude, chaque AOI se rend déjà sous la forme d'une superposition colorée directement dans l'éditeur, le vert signifie que son sélecteur correspond actuellement à un élément sur la page, le rouge signifie qu'il ne correspond pas, sans besoin de bascule pour voir cela pendant que vous travaillez. Show AOI overlay in player étend cette même superposition à Preview et à l'étude en direct elle-même, ce qui confirme réellement un AOI de bout en bout plutôt que juste pendant l'édition. Prévoyez toujours votre étude avec cela activé au moins une fois, confirmez que chaque AOI est vert, puis désactivez-le avant de publier si vous ne souhaitez pas que les participants voient la superposition.

Éléments qui apparaissent ou disparaissent (dialogues, modales)

L'ancre d'un AOI de site Web n'a pas besoin d'être présente sur la page tout le temps. Parce que l'extension vérifie continuellement si le sélecteur CSS correspond actuellement à quelque chose, un AOI ancré à un élément à l'intérieur d'un dialogue, d'une modale ou d'un autre contenu qui n'apparaît qu'à certains moments s'active lorsque cet élément apparaît et se désactive lorsqu'il est supprimé, sans aucune configuration supplémentaire. Cela permet de suivre les interactions avec des éléments qui n'existent que temporairement, par exemple une boîte de dialogue de confirmation qui s'ouvre après une action spécifique, en utilisant le même mécanisme d'ancrage décrit ci-dessus.

Questions Fréquemment Posées

Dois-je utiliser le décalage de taille pour rendre un AOI plus petit, ou est-ce l'outil incorrect?

Habituellement l'outil incorrect. Si un AOI couvre trop ou pas assez de la page, la solution est presque toujours de choisir une autre ancre avec Parent, Child, Prev, ou Next, et non de rétrécir ou d'agrandir l'existant. Réservez Size offset et Position shift pour de petites corrections une fois que l'ancre elle-même est déjà correcte.

Pourquoi le choix de l'élément a-t-il sélectionné un conteneur plus grand que celui sur lequel j'ai cliqué?

Le sélecteur recherche un bon conteneur sélectionnable près de l'endroit où vous avez cliqué plutôt que le pixel exact, il peut donc atterrir sur une carte, un lien ou un bouton environnant plutôt que sur un extrait spécifique de texte ou d'image à l'intérieur. Utilisez Child puis Next/Prev pour approfondir vers l'élément exact.

J'ai cliqué sur Suivant ou Enfant et rien ne s'est passé. Est-ce un bug?

Non. S'il n'y a pas de frère dans cette direction, ou pas d'élément enfant dans lequel se déplacer, le bouton ne fait rien et la sélection reste telle qu'elle était, sans message d'erreur affiché. Essayez une autre direction.

Comment puis-je savoir si un AOI suit réellement quelque chose?

Activez Show AOI overlay in player dans son panneau Object Properties et prévisualisez l'étude. Le vert signifie que le sélecteur correspond actuellement à un élément sur la page ; le rouge signifie qu'il ne correspond pas. Il n'y a pas d'erreur visible pour le participant si un AOI échoue à s'ancrer, alors vérifiez cela avant de publier.

Un AOI de site Web peut-il suivre un élément à l'intérieur d'une fenêtre contextuelle ou d'un dialogue qui n'est pas toujours sur la page?

Oui. L'AOI s'active chaque fois que son élément ancré existe sur la page et se désactive lorsqu'il n'existe pas, donc une ancre à l'intérieur d'un dialogue ou d'une modale qui ne s'ouvre qu'à certains moments fonctionne de la même manière que tout autre AOI, sans configuration supplémentaire nécessaire.