Un véritable site externe intégré dans un cadre de site Labvanced avec une zone d'intérêt ancrée en vert sur une image de produit

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

Ce guide couvre le chemin complet pour suivre le regard basé sur webcam, les clics et le comportement de défilement 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 oculaire webcam évalué par des 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 nouvelles, 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 Oculaire Webcam. Pour avoir une vue d'ensemble des deux voies, consultez Suivi Oculaire 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, et non 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 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 un message comme celui-ci au lieu de l'étude :

Message à l'attention du participant demandant d'installer l'extension de navigateur Labvanced Web Bridge avant que l'étude puisse continuer

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

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

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

Timeline d'essai montrant l'option + Cadre de site web aux côtés de Canvas et Page

4. Sélectionnez Vos AOI : C'est une Étape Manuelle

Il n'y a pas de détection automatique. Labvanced ne lit jamais le balisage d'un 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.

Avec le Cadre de Site 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 de Site Web est sélectionné (info-bulle : Add Website AOI).
L'AOI apparaît en rouge. Cliquez sur l'é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.

Barre d'outils de l'éditeur de tâches avec l'icône Ajouter AOI de Site Web en surbrillance au-dessus d'un site web intégré en direct

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 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 AOI de Site Web pour découvrir le fonctionnement complet de ces contrôles, ainsi que Text Filter, Scrollable container, et comment vérifier qu'une AOI est effectivement ancrée avant 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 AOI ancrées se positionnent toujours correctement à une taille d'écran différente.
Répétez pour chaque élément que vous souhaitez suivre.

AOI de Site Web ancrée avec son panneau Propriétés d'Objet affichant le Sélecteur CSS, les contrôles d'ajustement Parent/Enfant/Précédent/Suivant, et la liste des AOI dans le panneau latéral

Si l'AOI se Trouve 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 autre page 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 réglage de l'URL propre du cadre directement vers elle), puis ancrez l'AOI là-bas de la même manière. Toutes les AOI 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 elle ne devient des données que lorsque vous construisez un événement qui le capture dans une variable :

Ajoutez un nouvel événement depuis l'éditeur d'événements.
Pour le déclencheur, sélectionnez Physiological Signal Triggers → Eyetracking Gaze.
Sélectionnez l'option pour ne déclencher que sur des éléments spécifiques, puis ajoutez votre AOI comme cible.
Nommez l'événement. Un 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.
Si vous ignorez 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 dans les options Trigger (Eyetracking Gaze).

C'est le même modèle déclencheur-et-action utilisé pour le suivi oculaire 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 en Suivi Oculaire pour les détails complets sur cet événement, le dialogue de configuration automatisée, 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 d'élément, clics, survol, mouvement de la souris et position de défilement. Consultez Ce Qui Est Suivi dans le guide complet pour savoir comment enregistrer chacun.

Éditeur d'événements montrant un déclencheur de Regard en Suivi Oculaire visant deux cibles AOI de Site Web, connectées aux actions Définir/Enregistrer Variable

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 automatiquement créé qui maintient la position du marqueur mise à jour selon les coordonnées de regard actuelles pendant la lecture.

C'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 que les participants doivent avoir.

7. Si Vous Devez Également Diviser les Participants Avant le Message de Caméra

Si votre étude a besoin d'envoyer seulement certains participants dans un flux de suivi oculaire webcam, avant que n'apparaisse le prompt d'accès à la caméra, que ce soit par choix du participant, performance de tâche, affectation de groupe automatique, ou en divisant vos liens de recrutement, c'est un schéma de branchement d'étude générale distinct, pas spécifique aux Cadres de Site Web. Consultez Suivi Oculaire Webcam Conditionnel pour savoir comment le configurer.

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 AOI s'ancrent comme prévu. Publiez une fois que vous êtes satisfait, en suivant Publier et Partager 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 oculaire webcam : sous forme de 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 sur les données et la confidentialité, et dépannage, consultez le guide complet Labvanced Web Bridge lié ci-dessous.

Questions Fréquemment Posées

Tous les participants doivent-ils installer l'extension Web Bridge, ou juste moi en tant que chercheur ?

Chaque participant, pas seulement vous. Si un participant ne l'a pas installée, il se voit bloqué par un message d'installation avant que l'étude puisse commencer, c'est une exigence pour commencer, pas quelque chose qui échoue en cours de route. Consultez Installer l'Extension d'Abord ci-dessus.

Que se passe-t-il lorsque un participant clique sur le message d'installation ?

Cela les redirige vers le Chrome Web Store, où ils cliquent sur Ajouter à Chrome, puis Ajouter l'extension dans le dialogue de confirmation, puis retournent à l'expérience et actualisent la page pour commencer l'étude. Consultez Installation dans le guide complet de Web Bridge pour voir toutes les étapes pour le participant.

Puis-je ancrer une AOI sur une page différente du site web que celle d'où j'ai commencé ?

Oui. Un Cadre de Site Web n'a qu'une seule URL de départ, alors naviguez d'abord vers la page dont vous avez besoin sur le site intégré (ou pointez le réglage de l'URL propre du cadre directement vers elle), puis ancrez l'AOI là-bas de la même manière. Consultez Si l'AOI est sur une Page Différente de Celle Que Vous Avez Chargée ci-dessus.

Puis-je ajouter d'autres cadres à une tâche basée sur le Cadre de Site Web ?

Il est recommandé de garder la tâche à un seul Cadre de Site Web seulement, et de ne pas le combiner avec d'autres fonctionnalités comme le système d'essai ou d'autres cadres. Si vous avez besoin de quelque chose par la suite, comme un questionnaire, construisez-le plutôt comme une tâche distincte. Contactez-nous si vous avez un cas d'utilisation qui ne correspond pas à ce modèle.