Suivi des Yeux sur un Site Web Intégré : Un Guide Web Bridge

Ce guide couvre le chemin complet pour le suivi du regard basé sur webcam, des clics et du comportement de défilement sur un véritable 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 évalué par les pairs validé dans Kaduk et al., 2024, appliqué à un site web en direct plutôt qu'à des stimuli construits directement dans Labvanced.

Regardez le guide complet dans cette vidéo :

1. Est-ce la Bonne Approche ?

Utilisez ce guide si votre étude intègre un véritable site web externe en direct (une page produit, un article de presse, l'interface d'un client) et que vous devez mesurer comment les participants le regardent, cliquent et font défiler. Si vous suivez le regard sur des stimuli construits directement dans Labvanced à la place (images, texte, formes), consultez le Guide de Suivi des Yeux par Webcam à la place. Pour une vue d'ensemble des deux chemins, consultez Suivi des Yeux dans Labvanced.

2. Installez D'abord l'Extension : 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 la personne qui construit l'étude. Sauter cela et votre premier signe que quelque chose ne va pas sera une session pilote échouée, pas un avertissement durant 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 ceci au lieu de l'étude :

3. Créez l'Étude et Ajoutez le Cadre de Site Web

Website Frame est un véritable type de cadre, le troisième dans Labvanced, aux côtés de Canvas Frame et Page Frame, ajoutés 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. Si cela 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 d'un site web pour deviner quels conteneurs sont importants pour votre étude, chaque Zone d'Intérêt (AOI) est un conteneur que vous cliquez et ancrez manuellement.

1. Avec le Cadre de Site Web ouvert et le site intégré interactif, cliquez sur l'icône AOI, la première icône 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, le bas, ou sur les côtés dans 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. Consultez Sélectionner et Ajuster les AOIs de Site Web pour le fonctionnement complet de ces contrôles, plus Text Filter, Scrollable container, et comment vérifier qu'une AOI est effectivement ancrée avant la publication.
   • Resolution (bureau vs. mobile) se trouve dans les propres propriétés du Cadre de Site Web, pas celles de l'AOI, utilisez-le pour prévisualiser si vos AOIs ancrées se positionnent 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'une seule 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 orientez le paramètre d'URL propre du cadre directement vers celle-ci), puis ancrez l'AOI là-bas de la même manière. Toutes les AOIs que vous avez ajoutées au cadre sont listées dans le panneau latéral.

5. Enregistrez les Données de Regard : Ajoutez des Événements

Une AOI à elle seule n'enregistre rien. Le regard sur celle-ci ne devient des données que lorsque 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. Une boîte de dialogue Eyetracking Gaze Event Setup apparaît automatiquement à ce stade, proposant 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 ignorez ou fermez cette boîte de dialogue, construisez-la 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 de valeur choisissez Coord. + Time + Confidence [X,Y,T,C] Array parmi les options Trigger (Eyetracking Gaze).

C'est le même motif de déclencheur et d'action utilisé pour le suivi des yeux sur des stimuli construits dans Labvanced, appliqué plutôt à une cible AOI de Site Web. Voir Enregistrement et Exportation des Données de Regard et la référence Déclencheur de Regard pour le Suivi des Yeux pour le détail complet sur cet événement, la boîte de dialogue de configuration automatisée, et l'enregistrement des erreurs de calibration.

Web Bridge signale également des données comportementales non liées au regard pour la même AOI : position de l'élément, clics, survol, mouvement de souris, et position de défilement. Consultez Ce Qui Est Suivi dans le guide complet pour savoir comment enregistrer chacun.

6. Optionnel : Ajoutez un Indicateur de Regard pour l'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, ainsi qu'un événement update gaze position créé automatiquement qui maintient la position du marqueur mise à jour avec les coordonnées de regard actuelles durant la lecture.

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

7. Si Vous Devez Également Diviser les Participants Avant l'Invite de Caméra

Si votre étude doit envoyer seulement certains participants dans un flux de suivi des yeux par webcam avant qu'une invite d'accès à la caméra n'apparaisse, que ce soit par choix du participant, par performance de tâche, par assignation automatique de groupe, ou en divisant vos liens de recrutement, c'est un schéma de branchement général séparé d'une étude, pas spécifique au Cadre de Site Web. Consultez Suivi des Yeux par Webcam Conditionnel pour savoir comment le configurer.

8. Testez et Lisez Votre Export

Aperçu de 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, détails d'installation pour les chercheurs et les participants, cas d'utilisation complets, spécificités de données et de confidentialité, et dépannage, consultez le guide complet de Labvanced Web Bridge lié ci-dessous.

Questions Fréquemment Posées

Lectures Supplémentaires