Suivi des yeux sur un site Web intégré : Un guide Web Bridge

Ce guide couvre le chemin complet pour suivre le regard basé sur la webcam, les clics et le comportement de défilement sur un vrai site Web externe à l'intérieur d'une étude Labvanced, de l'installation de l'extension requise jusqu'à la lecture de vos données exportées. Il utilise le même pipeline de suivi des yeux par webcam revu par des pairs validé dans Kaduk et al., 2024, appliqué à un site Web en direct plutôt qu'à des stimuli construits directement dans Labvanced.

1. Est-ce la bonne approche ?

Utilisez ce guide si votre étude intègre un vrai site Web externe en direct (une page produit, un article d'actualité, l'interface d'un client) et que vous devez mesurer comment les participants le regardent, cliquent et scrollent. Si vous suivez le regard sur des stimuli construits directement dans Labvanced à la place (images, texte, formes), voyez le Guide de suivi des yeux par webcam à la place. Pour avoir l'image complète des deux chemins, consultez Suivi des yeux dans Labvanced.

2. Installez l'extension d'abord : chaque participant en a besoin

Labvanced Web Bridge est une extension Chrome en direct, généralement disponible, et elle doit être installée par vous et chaque participant, pas seulement par celui qui construit l'étude. Ignorez ceci et votre premier signe que quelque chose ne va pas sera une session pilote échouée, pas un avertissement au moment de la construction. Testez toujours avec l'extension installée avant de faire circuler un lien d'étude.

Installez-la depuis le Chrome Web Store, en suivant Installation dans le guide complet de Web Bridge. Un participant qui ne l'a pas encore installée voit une invite comme celle-ci au lieu de l'étude :

3. Créez l'étude et ajoutez le cadre du site Web

Website Frame est un vrai type de cadre supplémentaire dans Labvanced, aux côtés de Canvas Frame et Page Frame, ajouté de la même manière.

1. Ouvrez votre expérience dans l'éditeur.
2. Sous Trial Timeline, cliquez sur + Website.
3. Nommez le cadre et entrez l'URL du site Web cible, puis confirmez que l'extension affiche son message de confirmation vert. S'il n'apparaît pas, revisitez l'étape 2 avant de continuer.
4. Le site Web intégré s'affiche maintenant en direct à l'intérieur du cadre dans l'éditeur.

4. Sélectionnez vos AOIs : c'est une étape manuelle

Il n'y a pas de détection automatique. Labvanced ne lit jamais le balisage propre du site Web pour deviner quels conteneurs importent pour votre étude, chaque Zone d'Intérêt (AOI) est un conteneur que vous cliquez et ancrez manuellement.

1. Avec le cadre du site Web ouvert et le site intégré interactif, cliquez sur l'icône AOI, l'icône supérieure dans la barre d'outils qui apparaît lorsqu'un cadre de site Web est sélectionné (info-bulle : Add Website AOI).
2. L'AOI apparaît en rouge. Cliquez sur votre élément cible sur le site Web intégré (une image de produit, un titre, un bouton). La sélection devient verte une fois ancrée.

3. Utilisez Parent, Child, Prev et Next dans le panneau Object Properties pour déplacer la sélection vers le haut, vers le bas ou sur les côtés à travers l'arbre des éléments de la page si la zone ancrée est trop large, trop étroite ou décalée d'un élément.
   • Resolution (bureau vs. mobile) se trouve dans les propres propriétés du cadre du site Web, pas celles de l'AOI, utilisez-le pour prévisualiser si vos AOIs ancrées se trouvent toujours correctement à une taille d'écran différente.
4. Répétez pour chaque élément que vous souhaitez suivre.

Si l'AOI est sur une page différente de celle que vous avez chargée

Un cadre de site Web n'a qu'un seul URL de départ. Si l'élément dont vous avez besoin se trouve sur une page différente du site, par exemple un bouton "Ajouter au panier" qui n'existe que sur une page produit, naviguez d'abord sur le site intégré vers cette page (ou pointez le paramètre URL propre du cadre directement vers celle-ci), puis ancrez l'AOI là de la même manière. Toutes les AOIs que vous avez ajoutées au cadre sont répertoriées dans le panneau latéral.

5. Enregistrez les données de regard : Ajoutez des événements

Une AOI par elle-même n'enregistre rien. Le regard sur elle ne devient des données qu'une fois que vous construisez un événement qui le capture dans une variable :

1. Ajoutez un nouvel événement depuis l'éditeur d'événements.
2. Pour le déclencheur, sélectionnez Physiological Signal Triggers → Eyetracking Gaze.
3. Sélectionnez l'option de ne déclencher que sur des éléments spécifiques, puis ajoutez votre AOI comme cible.
4. Nommez l'événement. Un dialogue Eyetracking Gaze Event Setup apparaît automatiquement à ce stade, offrant de construire l'action d'enregistrement pour vous, acceptez Record gaze timeseries [X,Y,T,C] (coché par défaut) et Labvanced crée l'action Set / Record Variable ci-dessous pour vous, ciblée sur votre AOI.
5. Si vous passez ou fermez ce dialogue, construisez-le manuellement à la place : action Variable Actions → Set / Record Variable, avec une variable définie sur Format Array et Type d'Enregistrement All changes / time series, puis dans le menu de sélection des valeurs, choisissez Coord. + Time + Confidence [X,Y,T,C] Array parmi les options Trigger (Eyetracking Gaze).

C'est le même modèle de déclencheur et d'action utilisé pour le suivi des yeux sur les stimuli construits dans Labvanced, appliqué à une cible AOI de site Web à la place. Consultez Enregistrement et Exportation des Données de Regard et la référence Déclencheur de Regard de Suivi des Yeux pour les détails complets sur cet événement, le dialogue de configuration automatisé et l'enregistrement des erreurs de calibration.

Web Bridge rapporte également des données comportementales non liées au regard pour la même AOI : position de l'élément, clics, survol, mouvement de la souris et position de défilement. Consultez Qu'est-ce qui est suivi dans le guide complet pour savoir comment enregistrer chacun.

6. Optionnel : Ajoutez un Indicateur de Regard pour le Pilotage

La barre d'outils qui apparaît lorsqu'un cadre de site Web est sélectionné a une deuxième icône juste à côté de Add Website AOI, appelée Add Gaze Indicator. Cliquez dessus et Labvanced ajoute un petit marqueur circulaire rouge au cadre, avec un événement update gaze position créé automatiquement qui maintient la position du marqueur mise à jour par rapport aux coordonnées de regard actuelles pendant la lecture.

C'est une aide au pilotage : elle vous permet de voir où votre propre regard se pose pendant que vous testez l'étude. Cela ne sera pas enregistré comme des données et n'est pas quelque chose dont les participants ont besoin.

7. Si vous avez également besoin d'un chemin d'opt-in/opt-out pour la webcam

Si votre étude doit permettre aux participants de décider s'ils souhaitent activer le suivi des yeux par webcam, avant qu'une invite d'accès à la caméra n'apparaisse, c'est un modèle de branchement d'étude générale distinct, pas spécifique au cadre de site Web. Un guide dédié pour cela est prévu. Si vous en avez besoin avant sa publication, contactez [email protected].

8. Testez et lisez votre export

Prévisualisez votre tâche avec l'extension installée et confirmez que le site Web se charge et que vos AOIs s'ancrent comme prévu. Publiez une fois que vous êtes satisfait, en suivant Publication et Partage dans le guide complet.

Vos données de regard s'exportent de la même manière que n'importe quelles autres données de suivi des yeux par webcam : en tant que lignes de séries temporelles dans l'onglet Dataview & Export. Consultez Exportation des Données de Regard pour savoir comment lire les colonnes X, Y, T et C.

Pour tout le reste, les détails d'installation pour les chercheurs et les participants, les cas d'utilisation complets, les spécificités des données et de la confidentialité, ainsi que le dépannage, consultez le guide complet de Labvanced Web Bridge lié ci-dessous.

Lectures Complémentaires