Suivi de Regard sur un Site Web Intégré : Un Guide Web Bridge

Ce guide couvre l'ensemble du processus pour suivre le regard, les clics et le comportement de défilement par webcam sur un véritable site web externe à l'intérieur d'une étude Labvanced, depuis l'installation de l'extension requise jusqu'à la lecture de vos données exportées. Il utilise le même pipeline de suivi de regard par webcam évalué par des pairs validé dans Kaduk et al., 2024, appliqué à un site web en direct au lieu des stimuli construits directement dans Labvanced.

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 regardent, cliquent et défilent à travers celui-ci. Si vous suivez le regard sur des stimuli construits directement dans Labvanced à la place (images, texte, formes), consultez plutôt le Guide de Suivi de Regard par Webcam. Pour avoir une vue d'ensemble des deux chemins, consultez Suivi de Regard 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 celui qui construit l'étude. Évitez cela 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 diffuser 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 tiers 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 saisissez l'URL du site cible, puis confirmez que l'extension affiche son message de confirmation en vert. Si elle n'apparaît pas, revenez à l'étape 2 avant de continuer.
4. Le site web intégré s'affiche désormais 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, vers le bas ou sur les côtés à travers l'arborescence 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 de Site Web, pas celles de l'AOI, utilisez-le pour prévisualiser si vos AOIs ancrées se placent encore correctement à une autre taille d'écran.
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é jusqu'à cette page (ou pointez directement le paramètre URL du cadre vers elle), 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 seule ne capture rien. Le regard sur elle ne devient des données qu'une fois que vous avez construit 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 pour 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 moment, 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 sautez 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 de valeur 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 de regard sur des 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 pour tous les détails 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 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 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, accompagné d'un événement update gaze position créé automatiquement qui maintient la position du marqueur à jour avec les coordonnées de regard actuelles pendant la lecture.

C'est une aide au pilotage : elle vous permet de voir où se pose votre propre regard 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 Séparer les Participants Avant l'Invite de Caméra

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

8. Testez et Lisez Votre Exportation

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 de regard par webcam : en 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 Labvanced Web Bridge lié ci-dessous.

Questions Fréquemment Posées

Lecture Supplémentaire