Suivi oculaire de site Web & Suivi du comportement
Labvanced Web Bridge est une extension Chrome gratuite pour le suivi oculaire de site Web et le suivi du comportement. Elle intègre un site Web en direct dans une étude Labvanced et enregistre où les participants regardent, cliquent et défilent, en utilisant le suivi oculaire par webcam de Labvanced, qui a été validé contre un EyeLink 1000 dans une étude revue par des pairs (Kaduk et al., 2024).
Table des matières
- Qu'est-ce que Labvanced Web Bridge ?
- Ce que Labvanced Web Bridge peut faire
- Comment Web Bridge diffère
- Recherche que vous pouvez réaliser avec Labvanced Web Bridge
- Données collectées
- Évaluation de la précision
- Comment Labvanced Web Bridge suit un véritable site Web
- Comment les données de suivi de site Web se comportent
- Configuration de Labvanced Web Bridge
- Limitations
- Questions fréquentes
Qu'est-ce que Labvanced Web Bridge ?
Labvanced Web Bridge est une extension Chrome gratuite qui connecte Labvanced à des sites Web externes réels. Normalement, une plateforme de recherche ne peut montrer aux participants que des stimuli construits à l'intérieur d'elle, tels que des images, des vidéos, des formulaires et des pages personnalisées. Web Bridge change cela : elle permet à un chercheur d'intégrer un véritable site Web en direct, comme une page produit, un site d'actualités ou une application Web, directement dans une étude, puis de mesurer comment les participants se comportent dessus.
C'est particulièrement utile pour la recherche UX et comportementale contrôlée, où il est plus important de voir comment quelqu'un réagit à la réalité plutôt qu'à sa recreation. Cela n'est pas limité à cela.
Ce que Labvanced Web Bridge peut faire
Web Bridge fait partie de la plateforme d'expérimentation complète de Labvanced, donc la même étude peut randomiser quelle version d'une page un participant voit, combiner le suivi de site Web avec d'autres mesures de Labvanced, et exporter tout dans un format cohérent.
Sites Web réels, pas de maquettes
Les participants interagissent avec votre site Web réel, en direct, à l'intérieur de l'étude. Ce qui est suivi est la véritable page que vos utilisateurs verront réellement.
Tout en un seul endroit
Le regard, les clics, les survols et le défilement sont tous capturés sur le même élément suivi, donc chaque signal s’aligne sans travail supplémentaire.
Suit les éléments, pas les positions à l'écran
Marquez quelque chose une seule fois. Le suivi continue de le suivre correctement lors du défilement, du redimensionnement et même des pop-ups ou des menus qui n'apparaissent qu'après un clic.
Comment Web Bridge diffère
D'autres manières de tester un véritable site Web diffèrent par ce qu'elles nécessitent du site et ce qu'elles peuvent y enregistrer.
| La question | Autres approches | Web Bridge |
|---|---|---|
| Le site Web doit-il subir des modifications ? | RealEye, un service de suivi oculaire par webcam, nécessite son SDK JavaScript sur le site et un attribut data-re-aoi-name sur chaque élément suivi pour son test de site Web intégré. Microsoft Clarity, un outil de carte thermique et d'enregistrement de session, nécessite que son code de suivi soit installé sur le site. | Non. Vous collez l'URL du site que vous souhaitez tester et marquez les éléments en cliquant dessus dans l'éditeur Labvanced. |
| Peut-il enregistrer ce qui se passe à l'intérieur d'une page intégrée ? | Une simple intégration d'un autre site Web, tel que l'objet I-Frame de Labvanced, ne peut pas être lue par la page environnante, donc les clics et le défilement à l'intérieur ne sont pas capturés. Microsoft Clarity ne peut également pas capturer les iframes de tiers. | Oui. L'extension lit les clics, les survols, le mouvement de la souris et le défilement depuis l'intérieur de la page intégrée. |
| Est-ce qu'elle suit le défilement et le changement de pages ? | Le test de site Web intégré de RealEye analyse une capture d'écran du site et ne prend pas en charge le défilement horizontal. | Oui. Les éléments marqués sont suivis au travers du défilement, du redimensionnement, de l'animation et du contenu qui se charge après l'ouverture de la page. |
| Les données proviennent-elles de véritables participants ? | Des outils prédictifs tels que Attention Insight estiment l'attention avec un modèle IA au lieu d'enregistrer de vrais participants. | Oui. Cela enregistre où de vrais participants regardent et cliquent. |
| A-t-elle besoin de matériel spécial ? | Pupil Labs, un fabricant de traceurs oculaires, propose un outil Web AOI qui nécessite son traceur oculaire Neon. | Non. Elle utilise la webcam du participant. |
Pour ce qu'une carte thermique prédite par IA peut et ne peut pas vous dire par rapport à l'enregistrement de vrais participants, voir L'IA peut prédire où vous regarderez. Elle ne sait toujours pas ce que vous ferez.
Dernière révision : 2026-09-25. Les détails ont été vérifiés par rapport à la Base de connaissances de RealEye, à la documentation de configuration de Microsoft Clarity, à la base de connaissances d'Attention Insight et à la documentation Web AOI de Pupil Labs. La restriction du navigateur sur la lecture des pages intégrées est décrite dans la documentation sur la politique de même origine de MDN.
Recherche que vous pouvez réaliser avec Labvanced Web Bridge
E-Commerce
Intégrez une page produit réelle. Voyez quelles photos les gens regardent réellement, quels boutons sont cliqués, et jusqu'où ils défilent avant d'ajouter quelque chose à leur panier.
Actualités & Médias
Intégrez un article d'actualité en direct. Découvrez quels titres sont remarqués en premier, et comment l'attention change à mesure qu'un article devient plus long.
<div class="content-row" style="display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 24px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin-bottom: 16px; border-radius: 14px; border: 1px solid #eaeaea; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
<img src="/content_imgs/technology/website-eye-tracking/usecase_navigation_testing.webp" loading="lazy" alt="Barre de navigation de site Web fictif avec le menu déroulant Solutions ouvert et un chemin en pointillé traçant le mouvement du menu Solutions vers la tarification" style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; align-self: center;"/>
<div style="align-self: stretch; display: flex; flex-direction: column; justify-content: center;">
<h3 style="margin: 0 0 6px 0; padding-top: 0;">Test de navigation</h3>
<p style="margin: 0; line-height: 1.4;">Intégrez un véritable menu ou un flux multi-pages. Voyez si les gens peuvent réellement trouver ce qu'ils cherchent et où ils hésitent.</p>
</div>
</div>
<div class="content-row" style="display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 24px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin-bottom: 16px; border-radius: 14px; border: 1px solid #eaeaea; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
<img src="/content_imgs/technology/website-eye-tracking/usecase_ab_testing.webp" loading="lazy" alt="Deux pages de destination fictives avec les étiquettes A et B, avec des titres différents et des couleurs de bouton Acheter maintenant, chacune légendée avec la part de visiteurs ayant cliqué, 42 pour cent et 67 pour cent, et une barre de progression" style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; align-self: center;"/>
<div style="align-self: stretch; display: flex; flex-direction: column; justify-content: center;">
<h3 style="margin: 0 0 6px 0; padding-top: 0;">Test A/B</h3>
<p style="margin: 0; line-height: 1.4;">Intégrez deux versions de la même page, assignez aléatoirement des participants à chacune avec le contrebalancement intégré de Labvanced, et comparez les résultats directement.</p>
</div>
</div>
<div class="content-row" style="display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 24px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin-bottom: 16px; border-radius: 14px; border: 1px solid #eaeaea; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
<img src="/content_imgs/technology/website-eye-tracking/usecase_developmental_psychology.webp" loading="lazy" alt="Page de quiz éducatif pour enfants fictif demandant Quel animal est un lion, avec une illustration de lion et trois cartes de réponse (lion, éléphant, zèbre), et une carte thermique représentant les regards la plus forte sur l'illustration du lion et la carte de réponse lion" style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; align-self: center;"/>
<div style="align-self: stretch; display: flex; flex-direction: column; justify-content: center;">
<h3 style="margin: 0 0 6px 0; padding-top: 0;">Psychologie du développement</h3>
<p style="margin: 0; line-height: 1.4;">Intégrez un véritable site Web éducatif pour enfants et suivez comment de jeunes participants l'explorent. C'est utile pour la recherche sur la littératie numérique et la façon dont l'attention se développe en ligne.</p>
</div>
</div>
<div class="content-row" style="display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 24px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin-bottom: 16px; border-radius: 14px; border: 1px solid #eaeaea; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
<img src="/content_imgs/technology/website-eye-tracking/usecase_media_political_psychology.webp" loading="lazy" alt="Page d'article de nouvelles fictif avec le titre Pouvons-nous faire confiance aux nouvelles dans un monde polarisé, une photo de personnes à l'extérieur d'un bâtiment, et une carte thermique représentant les regards sur le titre, la photo et le nom de l'auteur" style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; align-self: center;"/>
<div style="align-self: stretch; display: flex; flex-direction: column; justify-content: center;">
<h3 style="margin: 0 0 6px 0; padding-top: 0;">Psychologie politique et des médias</h3>
<p style="margin: 0; line-height: 1.4;">Intégrez un véritable article de presse et suivez si les yeux des gens atteignent un jour la ligne d'attribution ou la source avant qu'ils ne décident s'ils y font confiance.</p>
</div>
</div>
<br>
## Données collectées
L'intégration d'un véritable site Web transforme la navigation ordinaire en données de recherche. Avec Web Bridge, vous pouvez découvrir :
- Où les visiteurs regardent en premier, et pendant combien de temps
- Quels éléments ne sont jamais regardés, ou sont complètement ignorés
- Comment l'attention se déplace d'une partie de la page à une autre avant qu'une personne clique
- Si ce que les gens cliquent correspond à ce qu'ils ont regardé en premier, ou si l'attention et l'action tirent dans des directions différentes
- Combien de temps les gens s'attardent sur une zone, ce qui peut signifier qu'ils lisent attentivement ou qu'ils sont bloqués à la recherche de quelque chose
Choisissez n'importe quoi sur la page, comme une photo de produit, un titre, ou un bouton. Voici les données enregistrées à cet effet :
| Vous obtenez | Ce que cela vous dit |
|-----------|-------------|
| **Regard** | Où les gens regardent réellement, et pendant combien de temps |
| **Position de l'élément** | L'emplacement exact et la taille de ce que vous suivez, mis à jour en direct au fur et à mesure que la page défile |
| **Clics** | Ce que les gens cliquent, et exactement où |
| **Survols** | Ce qui attire l'attention même sans clic |
| **Mouvement de la souris** | Comment le curseur se déplace sur la page |
| **Défilement** | Jusqu'où les gens défilent avant d'agir |
Chaque résultat s'exporte proprement au format CSV, XLSX, ou TSV, prêt à être analysé.
<!-- [SCREENSHOT: Un vrai site de commerce électronique ou de nouvelles intégré via Website Frame dans l'éditeur Labvanced, avec plusieurs AOIs de site Web visibles comme des superpositions colorées (vertes) sur des éléments spécifiques comme une image de produit et un bouton "Ajouter au panier"] -->
<!-- [SCREENSHOT: Un aperçu des vraies données exportées de Web Bridge, un tableau de données ou une vue d'exportation montrant des coordonnées de regard, des événements de clic, et des horodatages enregistrés contre un AOI de site Web nommé, correspondant au style de l'image "Aperçu des données collectées" sur la page de technologie de suivi des yeux de labvanced] -->
<br>
## Évaluation de la précision
Web Bridge combine deux des principaux moteurs de mesure de Labvanced. Les données de regard proviennent du suivi oculaire par webcam de Labvanced, testé contre un tracker oculaire professionnel (l'EyeLink 1000) dans une étude par les pairs : une précision globale de 1.4° et une précision de 1.1°, améliorant à 1.3° de précision et 0.9° de précision au centre de l'écran (Kaduk et al., 2024).
Les données de clic, de survol et de curseur proviennent du [suivi de souris](/content/technology/fr/mouse-tracking/) de Labvanced et sont enregistrées sur le même élément suivi que les données de regard.
<br>
## Comment Labvanced Web Bridge suit un véritable site Web
Web Bridge permet une recherche comportementale contrôlée sur des sites Web tiers en direct : les participants interagissent avec la vraie page pendant que Labvanced enregistre leurs mouvements oculaires, clics, survols, et défilements.
Rendre cela possible signifie contourner deux restrictions de navigateur distinctes. Tout d'abord, de nombreux sites Web définissent un en-tête de sécurité, `X-Frame-Options` ou `Content-Security-Policy`, spécifiquement pour arrêter eux-mêmes d'être intégrés à l'intérieur d'une autre page. Web Bridge lève cette restriction uniquement dans les onglets du navigateur où Labvanced est ouvert. D'autres onglets ne sont pas affectés, et le changement est supprimé lorsque l'onglet se ferme ou quitte Labvanced. Deuxièmement, même une fois un site intégré, les navigateurs ne laissent normalement pas l'activité de la souris à l'intérieur de cette page intégrée atteindre la page qui l'entoure. C'est une restriction distincte. L'extension de Web Bridge gère cela aussi, lisant les événements de clic, de survol, et de mouvement directement depuis la page intégrée et les renvoyant à l'étude en temps réel.
Pour l'utiliser, les chercheurs ajoutent un `Website Frame` à une étude et le dirigent vers une véritable URL. À partir de là, marquer ce qu'il faut suivre est une simple action de clic et de sélection : cliquez sur une photo de produit, un titre, ou un bouton, et Labvanced se fixe sur cet élément exact, pas sur sa position à l'écran. Labvanced surveille continuellement la page, donc le suivi s'ajuste automatiquement au défilement, aux éléments qui n'apparaissent qu'après un clic, comme un pop-up ou un menu déroulant, et même pour des animations ou des éléments qui se redimensionnent ou se déplacent d'eux-mêmes. Chaque zone suivie est un simple rectangle, et rien n'est suivi automatiquement : un chercheur choisit précisément ce qui compte avant le lancement d'une étude.
| Propriété | Spécifications |
|---|---|
| Navigateur | Google Chrome |
| Construit Sur | Suivi des yeux par webcam examiné par les pairs de Labvanced (Kaduk et al., 2024) et son suivi de la souris |
| Ce Qu'il Suit | Fixation, clics, survols et défilement sur tout élément de votre choix |
| Confidentialité | Fonctionne uniquement à l'intérieur des sites Web que Labvanced intègre. Le texte dans les champs de mot de passe et de paiement n'est jamais lu |
Comment les données de suivi des sites Web se comportent
Pour concevoir une étude autour de ces données, quelques comportements méritent d'être connus à l'avance.
Les espaces de coordonnées diffèrent selon le type d'interaction. Les événements de clic, de pression de la souris, de relâchement de la souris et de mouvement de la souris rapportent des coordonnées relatives à la page, qui représentent la position sur l'ensemble de l'aire défilable pleine de la page intégrée, y compris ce qui a déjà été défilé. Les événements de survol et de sortie rapportent en revanche des coordonnées relatives à l'élément, qui représentent la position à l'intérieur même de l'élément suivi. Les deux utilisent les mêmes étiquettes de coordonnées dans l'interface, donc déterminez à l'avance quel type d'interaction une étude nécessite. Combiner les deux dans une seule colonne exportée mélange deux systèmes de coordonnées différents sans avertissement. Les données de fixation enregistrées sur un élément suivi utilisent le même espace relatif à la page que les clics, de sorte que les données de fixation et de clic du même élément s'alignent directement sans conversion.
Le suivi se met à jour en continu, pas seulement lors du défilement. La position et la taille de chaque élément suivi sont mesurées à nouveau à chaque image, ce qui permet au suivi de suivre correctement les animations, les transitions CSS et les éléments qui se redimensionnent dynamiquement, et pas seulement le défilement ou le repositionnement.
Les régions défilables à l'intérieur d'un élément suivi obtiennent leur propre espace de coordonnées. Si un élément suivi a son propre défilement interne, comme un panneau de discussion ou une liste de produits défilable, le marquer comme un conteneur défilable expose la position de défilement de cette région et la taille du contenu séparément du défilement global de la page, donc le défilement imbriqué n'est pas confondu avec la page extérieure.
Les événements de souris offrent trois modes de ciblage. Un événement de souris peut se déclencher pour un élément suivi spécifique, pour tout élément suivi sans en choisir un individuellement, ou pour n'importe où sur la page intégrée, peu importe si c'est un élément suivi ou non. Cela est utile pour capturer des modèles d'interaction larges sans marquer chaque élément à l'avance.
Configuration de Labvanced Web Bridge
Web Bridge est une extension Chrome gratuite. Vous et vos participants devez l'avoir installée. Cela prend moins d'une minute, et Labvanced guide les participants à travers cela automatiquement s'ils ne l'ont pas déjà.
Pour des références plus approfondies lorsque vous construisez une étude, consultez Sélectionner et ajuster les AOI de site Web pour les contrôles d'ancrage AOI complets. Pour construire des événements de clic, de survol et de mouvement, consultez Suivi du comportement de la souris sur une AOI de site Web.
Limitations
Web Bridge fonctionne uniquement dans Google Chrome, et le chercheur ainsi que chaque participant doivent avoir l'extension gratuite installée. Utiliser un Website Frame dans une étude nécessite la licence Ultimate. Certains sites ne peuvent pas être intégrés : amazon.com et ebay.com sont bloqués dans l'éditeur en raison de leur protection contre les bots, et d'autres sites qui détectent l'intégration peuvent ne pas fonctionner. Web Bridge suit les éléments qu'un chercheur marque plutôt que tout ce qui est sur une page.
Questions Fréquemment Posées
Est-ce que Web Bridge suit les gens sur d'autres sites Web ?
Les participants doivent-ils installer quelque chose ?
Comment le suivi continue-t-il à fonctionner si la page change ?
Détecte-t-il automatiquement ce qu'il faut suivre ?
Puis-je suivre les clics et le mouvement de la souris sans suivi des yeux ?
Ces données sont-elles aussi précises que le suivi des yeux régulier de Labvanced ?
Lectures Complémentaires
Suivi des Yeux par Webcam
Le moteur validé derrière Web Bridge, et l'étude de précision complète.
Suivi de la Souris
Suivez le mouvement du curseur sur des stimuli construits à l'intérieur de Labvanced, pas seulement sur des sites externes.
Guide de Labvanced Web Bridge
Installez l'extension, intégrez un site Web, marquez des éléments et commencez à enregistrer.