Suivi de Regard 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 des comportements de défilement sur un véritable site web externe à l'intérieur d'une étude Labvanced, de l'installation de l'extension requise à la lecture de vos données exportées. Il utilise le même pipeline de suivi de regard webcam évalué par les pairs validé par Kaduk et al., 2024, appliqué à un site web en direct au lieu de 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 font défiler ce site. Si vous suivez le regard sur des stimuli construits directement dans Labvanced à la place (images, textes, formes), consultez plutôt le Guide de Suivi de Regard 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 et généralement disponible, qui doit être installée par vous et chaque participant, pas seulement par celui qui construit l'étude. Ignorez cela et votre premier signe que quelque chose ne va pas sera une session pilote échouée, et non un avertissement au moment de la construction. Testez toujours avec l'extension installée avant de circuler le lien de l'étude.

Installez-la depuis le Chrome Web Store, en suivant Installation dans le guide complet sur 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 Web

Website Frame est un véritable type de cadre tiers 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, revenez à 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 : Ceci est une Étape Manuelle

Il n'y a pas de détection automatique. Labvanced ne lit jamais la propre structure HTML 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 Web ouvert et le site intégré interactif, cliquez sur l'icône AOI, l'icône du haut dans la barre d'outils qui apparaît lorsqu'un Cadre 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 latéralement à travers l'arbre d'é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 propriétés du Cadre Web lui-même, pas celles de l'AOI, utilisez-le pour prévisualiser si vos AOIs ancrées se positionnent toujours correctement à une taille d'écran différente.
4. Répétez pour chaque élément que vous souhaitez suivre.

Si l'AOI se Trouve sur une Page Différente de Celle que Vous Avez Chargée

Un Cadre 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 vers cette page sur le site intégré (ou dirigez directement le paramètre d'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 listé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 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 pour ne se 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).

Ceci suit le même modèle de déclencheur et d'action utilisé pour le suivi du regard sur les stimuli construits dans Labvanced, appliqué à une cible AOI Web à la place. Consultez Enregistrement et Exportation des Données de Regard et la référence Déclencheur de Regard Eyetracking pour le détail complet sur cet événement, la boîte de dialogue de configuration automatisée et l'enregistrement d'erreurs de calibration.

Web Bridge rapporte également les données comportementales hors regard pour la même AOI : position de l'élément, clics, survol, mouvement de 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 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 automatiquement créé qui garde la position du marqueur mise à jour aux coordonnées de regard actuelles pendant la lecture.

Ceci est une aide au pilotage : cela vous permet de voir où votre propre regard se pose pendant que vous testez l'étude. Cela n'est pas enregistré en tant que 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 a besoin d'envoyer seulement certains participants dans un flux de suivi de regard webcam, avant qu'une invitation d'accès à la caméra ne apparaisse, que ce soit par choix du participant, performance de tâche, attribution automatique de groupe, ou en divisant vos liens de recrutement, c'est un modèle d'étude de branchement général distinct, non spécifique au Cadre Web. Consultez Suivi de Regard Webcam Conditionnel pour savoir comment le configurer.

8. Testez et Lisez Votre Export

Aperçuez 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 d'autres données de suivi de regard 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 vie privée, et le dépannage, consultez le guide complet sur Labvanced Web Bridge lié ci-dessous.

Questions Fréquemment Posées

Lectures Complémentaires