labvanced logoLabVanced
  • Research
    • Publications
    • Researcher Interviews
    • Use Cases
      • Developmental Psychology
      • Linguistics
      • Clinical & Digital Health
      • Educational Psychology
      • Cognitive & Neuro
      • Social & Personality
      • Arts Research
      • Sports & Movement
      • Marketing & Consumer Behavior
      • Economics
      • HCI / UX
      • Commercial / Industry Use
    • Labvanced Blog
    • Services
  • Technology
    • Feature Overview
    • Code-Free Study Building
    • Eye Tracking
    • Mouse Tracking
    • Generative AI Integration
    • Multi User Studies
    • More ...
      • Reaction Time/Precise Timing
      • Text Transcription
      • Heart Rate Detection (rPPG)
      • Emotion Detection
      • Questionnaires/Surveys
      • Experimental Control
      • Data Privacy & Security
      • Desktop App
      • Mobile App
  • Learn
    • Guide
    • Videos
    • Walkthroughs
    • FAQ
    • Release Notes
    • Documents
    • Classroom
  • Experiments
    • Cognitive Tests
    • Sample Studies
    • Public Experiment Library
  • Pricing
    • Licenses
    • Top-Up Recordings
    • Subject Recruitment
    • Study Building
    • Dedicated Support
    • Checkout
  • About
    • About Us
    • Contact
    • Downloads
    • Careers
    • Impressum
    • Disclaimer
    • Privacy & Security
    • Terms & Conditions
    • Third-Party Licenses
  • Appgo to app icon
  • Logingo to app icon
Learn
Guide
Vidéos
Guides étape par étape
FAQ
Archives des newsletters
Documents
Salle de classe
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
Guide
Vidéos
Guides étape par étape
FAQ
Archives des newsletters
Documents
Salle de classe
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
  • Guide
    • DÉBUTER

      • Éditeur de tâches
      • Cadres
        • Cadre Canvas
        • Cadre de Page
        • Cadre de Site Web
      • Chronologie des essais
      • Présentation des stimuli
      • Exactitude de la réponse
      • Objets
      • Événements
      • Variables
      • Assistant de tâche
      • Système d'essai
      • Conception de l'expérience
        • Création d'une étude
        • Modèles de cadre de données
        • Conception d'expérimentations multi-utilisateurs
        • Conception d'expérimentations longitudinales
    • Sujets en vedette

      • Randomisation & Équilibre
      • Suivi oculaire
        • Présentation des Stimuli dans une Tâche de Suivi oculaire
        • Comment Choisir les Paramètres de Calibration de Suivi Oculaire
        • Configuration du suivi oculaire dans une tâche
        • Enregistrement et exportation des données de regard
        • Utiliser des formes comme zones d'intérêt (AOI) pour le suivi oculaire
        • L'expérience de calibration du participant
      • Pont Web
        • Sélectionner les AOI de site Web | Ancrer, ajuster et vérifier le suivi des AOI
        • Suivi du comportement de la souris sur une AOI de site Web | Guide Web Bridge
      • Questionnaires
      • Application de bureau
      • Études échantillons
      • Recrutement de participants
      • Accès API
        • API REST
        • API Webhook
        • API WebSocket
      • Autres sujets

        • Temps de stimuli précis
        • Études multi-utilisateurs
        • Suivi de la Tête dans Labvanced | Guide
    • ONGLETS PRINCIPAUX DE L'APPLICATION

      • Aperçu : Onglets principaux
      • Tableau de bord
      • Mes études
      • Études partagées
      • Mes fichiers
      • Bibliothèque d'expériences
      • Mon compte
      • Licence & Services
    • ONGLETS D'ÉTUDE

      • Aperçu : Onglets spécifiques à l'étude
      • Conception de l'étude
        • Tâches
        • Blocs
        • Sessions
        • Groupes
      • Éditeur de tâches
        • Contrôles de tâche
        • Le Système des Essais
        • Types de cadres
        • Objets
        • Tables de Propriétés des Objets
        • Variables
        • Tableau des Variables Système
        • Le système d'événements
        • Fonctions de l'Éditeur de Texte
        • Options de suivi oculaire dans l'éditeur de tâches
        • Suivi de la tête dans une tâche
        • Études Multi-Utilisateurs
      • Paramètres
      • Variables
      • Média
      • Textes & Traduire
      • Lancer & Participer
      • Gestion des sujets
      • Vue de données et Exportation
        • Vue des données et sélection des variables & des tâches (ancienne version)
        • Accéder aux Enregistrements (Version ANCIENNE)
  • Vidéos
    • Aperçu des Vidéos
    • Premiers Pas dans Labvanced
    • Création de Tâches
    • Vidéos d'Éléments
    • Événements & Variables
    • Sujets Avancés
  • Tutoriaux
    • Introduction
    • Tâche Stroop
    • Tâche de Décision Lexicale
    • Tâche de Cues Visuels de Posner
    • Paradygme de Flicker de Cécité au Changement
    • Étude d'Œil-Tracking
    • Étude d'Œil-Tracking des Nourrissons
    • Étude de Capture d'Attention avec Suivi au Souris
    • Présentation Visuelle Sérielle Rapide
    • Étude ChatGPT
    • Démo de Suivi Occulaire : SVG en tant qu'AOI
    • Démo Multi-Utilisateur : Montrer les Curseurs des Sujets
    • Contrôleur de Gamepad / Joystick - Configuration de Base
    • Étude d'App Desktop avec Intégration EEG
    • Équilibrage de Groupes entre Sujets et Configuration des Variables
    • Construction d'une Étude Multi-Utilisateur
    • Tutoriel de Suivi Occulaire dans un Cadre de Site Web
    • Suivi Occulaire Conditionnel avec Webcam
    • Construction d'une Étude de Segmentation de Texte
  • FAQ
    • Fonctionnalités
    • Politique de Support & Directives
    • Sécurité & Confidentialité des Données
    • Licences
    • Précision de Labvanced
    • Utilisation Programmatique & API
    • Utiliser Labvanced Hors Ligne
    • Dépannage
    • Questions sur la Création d'Études
  • Archive de Newsletter
  • Documents
  • Salle de Classe
Illustration d'en-tête de l'extension Labvanced Web Bridge

Labvanced Web Bridge — Support et Guide de l'Extension

Nouveau sur Web Bridge ? Suivez le Guide étape par étape de suivi oculaire avec cadre de site Web pour un flux de tâches de A à Z, puis revenez ici pour des détails de référence complets.

Besoin d'aide ? Contactez-nous à [email protected]

Table des matières

  • Qu'est-ce que Labvanced Web Bridge ?
  • Installation
  • Qui devrait installer ceci ?
  • Comment l'utiliser — Guide du chercheur
  • Comment l'utiliser — Guide du participant
  • Cas d'utilisation
  • Données et confidentialité
  • Dépannage
  • Questions fréquemment posées
  • Contact et support

1. Qu'est-ce que Labvanced Web Bridge ?

Labvanced Web Bridge est une extension de navigateur pour Google Chrome qui connecte la plateforme d'expérimentation Labvanced (labvanced.com) à de vrais sites Web. Elle permet aux chercheurs de réaliser des études UX contrôlées et des recherches comportementales où les participants interagissent avec des sites Web en direct tiers, tandis que Labvanced enregistre les mouvements oculaires (via webcam), les clics de souris, les événements de survol et le comportement de défilement.

Sans cette extension, les navigateurs empêchent l'intégration de sites Web dans les études de recherche en raison de restrictions de sécurité standard. L'extension lève ces restrictions uniquement dans les sessions de recherche Labvanced contrôlées et ajoute les capacités de suivi comportemental nécessaires pour mesurer les interactions des participants sur le site intégré.

Pour comprendre pourquoi cette distinction est importante, des clics enregistrés réels et le regard versus une estimation prédite par l'IA de l'endroit où l'attention pourrait se porter, voir L'IA peut prédire où vous regarderez. Elle ne sait toujours pas ce que vous ferez.

Dans l'éditeur Labvanced, l'intégration se fait en utilisant le Website Frame, un troisième type de cadre aux côtés de Canvas Frame et Page Frame, conçu spécifiquement pour cela plutôt que d'être une variante des deux autres. Voir Cadre de site Web pour comprendre comment cela s'inscrit avec les autres types de cadres.

Un site Web intégré dans Labvanced à l'aide de l'extension Chrome

2. Installation

Étape par étape

Chercheurs

  1. Accédez à Google Chrome.
  2. Allez sur la page de l'extension Chrome pour Labvanced Web Bridge.
  3. Cliquez sur "Ajouter à Chrome".
  4. Dans la boîte de dialogue de confirmation, cliquez sur "Ajouter l'extension".
  5. Vous verrez l'icône Labvanced Web Bridge apparaître dans votre barre d'outils Chrome.

L'extension Labvanced Web Bridge installée dans Chrome

Participants

  1. Cliquez sur Installer
  2. Cliquez sur "Ajouter à Chrome".
  3. Dans la boîte de dialogue de confirmation, cliquez sur "Ajouter l'extension".
  4. Retournez à l'expérience et actualisez la page pour commencer l'étude.

Confirmer que l'extension est active

Chercheurs Après l'installation, naviguez vers l'onglet Dashboard et créez un New Study. Faites défiler vers le bas et activez Track External Website: en cochant la case et entrez l'URL du site Web cible. Si l'extension est correctement installée, l'éditeur Labvanced affichera une coche verte et un message de confirmation.

Message de confirmation vert lors de la création d'une nouvelle étude dans Labvanced confirmant que l'extension Web Bridge est installée et fonctionne.

Participants

Lors de l'actualisation de la page d'expérience, l'expérience se poursuivra.

Invite pour les participants à installer l'extension Chrome

3. Qui devrait installer ceci ?

Chercheurs

Installez l'extension si vous :

  • Concevez une étude qui inclut un site Web réel comme stimulus (par exemple, tester une page produit, un article de presse, une interface de kiosque).
  • Utilisez l'élément Website Frame dans l'éditeur Labvanced.
  • Prévisualisez ou pilotez une étude qui inclut des sites Web externes.

Vous n'avez pas besoin de cette extension pour des études qui n'utilisent que des stimuli Labvanced standard (images, vidéos, texte, formulaires, etc.) ou êtes le propriétaire du site Web qui peut directement éditer et contrôler vos propres en-têtes HTTP pour votre site Web.

Participants à l'étude

Installez l'extension si :

  • Vous avez reçu un lien d'étude et on vous a demandé de l'installer avant de commencer.
  • La page d'accueil de l'étude vous demande de confirmer que l'extension est installée.

Si vous n'êtes pas sûr de votre besoin, votre page de lien d'étude vous informera avant le début de l'étude.

4. Comment l'utiliser — Guide du chercheur

4.1 Ajouter un cadre de site Web à votre étude

  1. Ouvrez votre expérience dans l'éditeur Labvanced.
  2. Sous le Trial Timeline, cliquez sur l'option de cadre + Website.
  3. Sélectionnez "Cadre de site Web" parmi les types d'éléments, puis l'option External Website. Si l'extension est active, le message de confirmation vert apparaîtra. Sinon, veuillez vous référer à la section ci-dessus concernant la procédure d'installation.
  4. Le site Web que vous avez indiqué lors de la création de la tâche à l'étape précédente apparaîtra maintenant automatiquement.

4.2 Sélectionner des zones d'intérêt (AOIs)

Les zones d'intérêt (AOIs) sont les éléments spécifiques sur le site Web intégré que vous souhaitez suivre. Par exemple, une image de produit, un titre ou un bouton "Ajouter au panier".

Aucune détection automatique : Labvanced ne lit jamais le HTML ou le balisage du conteneur du site Web intégré pour deviner quels éléments comptent pour votre étude. Chaque AOI est une action manuelle de clic et d'ancrage dans l'éditeur. Une AOI, à elle seule, n'enregistre pas de données; la capture de regard nécessite un Eyetracking Gaze événement explicite construit dessus, voir Enregistrer les données de regard : Ajouter des événements dans le guide du cadre de site Web pour savoir comment le configurer.

  1. Avec le cadre de site Web actif dans l'éditeur et le site Web affiché de manière interactive, cliquez sur l'objet Add Website AOI dans le menu latéral.
  2. L'objet AOI sera ajouté et apparaîtra en rouge. Cliquez sur votre AOI cible. La sélection deviendra alors verte.
  • Si Pick Element ne s'ancre pas exactement à l'élément que vous vouliez, ou si vous souhaitez ajuster la cible, la taille ou la position d'une AOI existante, consultez Sélection et ajustement des AOIs de site Web pour une référence complète sur les contrôles de navigation Parent/Child/Prev/Next, les décalages de taille et de position, Text Filter, Scrollable container, et vérification qu'une AOI est effectivement ancrée avant de publier.
  • Vous pouvez également utiliser l'option Resolution pour indiquer si l'étude doit être pour ordinateur de bureau ou mobile. Dans l'image ci-dessous, mobile a été sélectionné et les AOIs se sont automatiquement mises à jour.
  1. Répétez pour d'autres éléments.
  2. Chaque AOI apparaîtra dans la liste des AOIs. À elle seule, elle ne pourra pas enregistrer de données, ajoutez un Eyetracking Gaze événement comme décrit ci-dessus pour commencer à capturer les données.

Intégration de site Web sur mobile et aperçu des AOIs

4.3 Ce qui est suivi

Pour chaque AOI pendant une session d'étude, Labvanced offre au chercheur les possibilités suivantes pour enregistrer des données comportementales :

Type de donnéesDescription
Position de l'élémentLa boîte englobante (x, y, largeur, hauteur) de l'élément à l'écran, mise à jour en temps réel alors que le participant défile
Données de regardSuivi oculaire basé sur webcam mappé aux positions des éléments (nécessite que le suivi oculaire soit activé dans les paramètres de l'étude)
Événements de clicSi et où le participant a cliqué sur l'élément
Événements de survolQuand la souris du participant est entrée et sortie de l'élément
Mouvement de sourisCoordonnées de la souris alors que le participant se déplace sur la page
Position de défilementLe décalage de défilement de la page à chaque instant

4.4 Prévisualiser votre étude

Avant de publier, prévisualisez toujours votre étude avec l'extension installée pour confirmer :

  • Le site Web se charge correctement dans le cadre.
  • Les AOIs fonctionnent comme prévu.

D'abord, enregistrez la tâche, puis cliquez sur le bouton de lecture "Aperçu" dans la barre d'outils de l'éditeur sous Task Controls pour ouvrir un aperçu de la tâche dans la vue participant.

4.5 Publication et Partage

Une fois votre étude prête :

  1. Allez dans l'onglet Launch & Participate.
  2. Cliquez sur le bouton Activate pour activer les enregistrements de données pour votre étude.
  3. Sous Online Participation / Study Published, cliquez sur Publish.
  4. Copiez le Online Participation Link et partagez-le avec vos participants.

5. Comment l'utiliser — Guide pour Participants

Avant l'Étude

  1. Vous recevrez un lien direct vers une étude de recherche Labvanced de la part du chercheur.
  2. Si l'extension n'est pas encore installée, la page d'étude affichera une invite d'installation avec un lien direct vers le Chrome Web Store.
  3. Installez l'extension, puis revenez au lien d'étude et actualisez la page.
  4. Une fois l'étude confirmée comme avec l'extension installée, cliquez sur Start pour commencer.

Pendant l'Étude

  • Utilisez et interagissez avec le site Web qui vous est montré comme vous le feriez normalement : parcourez, cliquez et faites défiler selon les instructions.
  • L'extension fonctionne silencieusement en arrière-plan. Vous n'avez pas besoin d'interagir avec elle.
  • Ne cliquez pas sur l'icône de l'extension pendant l'étude. Ce n'est pas nécessaire.

Après l'Étude

  • Répondez aux questions post-étude si cela vous est demandé.
  • Une fois l'étude terminée, vous pouvez désinstaller l'extension si vous n'en avez plus besoin :
    • Cliquez avec le bouton droit sur l'icône de l'extension dans la barre d'outils → "Retirer de Chrome".

Suppression de l'extension Labvanced chrome.

6. Cas d'Utilisation

6.1 Recherche UX en E-commerce

Intégrez une page de produit ou de passage en caisse. Suivez les images de produit sur lesquelles les participants se concentrent, quels boutons "Ajouter au panier" ils cliquent et jusqu'où ils défilent avant de prendre une décision.

Exemple d'un site e-shop de librairie intégré dans Labvanced

6.2 Études d'Attention Médiatique et d'Informations

Intégrez un article d'actualité ou une page d'accueil. Mesurez quels titres attirent le plus d'attention, comment les modèles de lecture varient selon la longueur de l'article et quelles images attirent l'œil en premier.

Exemple d'un site d'actualités intégré dans Labvanced

6.3 Test de Navigation et d'Architecture de l'Information

Intégrez le menu de navigation d'un site Web ou un flux multi-pages. Enregistrez les clics et le temps de survol pour évaluer la clarté des libellés de menu et la facilité de recherche.

6.4 Études Comparatives (A/B)

Créez deux essais avec des versions différentes de site Web intégrées. Randomisez les participants à travers les conditions en utilisant le contrebalancement intégré de Labvanced. Comparez les métriques AOI entre les groupes.

7. Données & Confidentialité

Quelles données l'extension collecte-t-elle ?

L'extension collecte les éléments suivants uniquement lorsque vous êtes dans une session de recherche Labvanced active :

  • Positions des boîtes de délimitation (x, y, largeur, hauteur) des éléments de page sélectionnés par le chercheur
  • Coordonnées de la souris, positions de clic, événements de survol et chemins de mouvement de la souris
  • La position de défilement de la page actuelle et l'URL de la page
  • Extraits de texte visibles des éléments survolés/cliqués (troncés à 50 caractères)

Les champs de mot de passe et les saisies de formulaires sensibles ne sont jamais lus. L'extension exclut explicitement <input type="password"> et les saisies avec des attributs d'auto-complétion sensibles (autocomplete="password", cc-*). Ceux-ci renvoient des valeurs vides dans tous les cas.

Où vont les données ?

Toutes les données sont transmises exclusivement à la page labvanced.com intégrante via l'API postMessage du navigateur. L'extension n'envoie aucune donnée à des serveurs externes, ne stocke rien localement et ne collecte aucune donnée lors de la navigation normale en dehors d'une étude Labvanced.

L'extension me suit-elle sur d'autres sites Web ?

Non. Les scripts de contenu de l'extension sont injectés dans tous les iframes (car le domaine du site Web cible ne peut pas être connu à l'avance), mais ils quittent immédiatement à moins que location.ancestorOrigins confirme que labvanced.com est un cadre ancêtre. Sur tout site Web non intégré par Labvanced, aucun écouteur n'est installé, aucun DOM n'est lu et aucune donnée ne circule.

L'extension modifie-t-elle quelque chose en dehors de Labvanced ?

Non. L'extension supprime les restrictions d'intégration iframe (X-Frame-Options / en-têtes Content-Security-Policy) uniquement dans les onglets du navigateur dont l'URL principale est labvanced.com. Tous les autres onglets sont complètement non affectés. Ces règles sont stockées en mémoire uniquement et sont supprimées lorsque l'onglet est fermé ou navigue ailleurs.

Politique de Confidentialité Complète

Consultez la politique de confidentialité complète à : https://www.labvanced.com/extension-privacy-policy.html

8. Dépannage

Le site Web ne se charge pas dans mon étude

Causes et solutions possibles :

SymptomCause probableSolution
Cadre blanc videExtension non installée ou désactivéeVérifiez que l'extension est activée dans chrome://extensions
Le site Web n'est pas interactif ou réactifLe site détecte l'intégration iframe au niveau JSCertains sites ne peuvent pas être intégrés, contactez [email protected]

L'icône de l'extension montre un avertissement ou est grisée

  • Cliquez sur l'icône pour ouvrir la fenêtre contextuelle et lire le message d'état.
  • Assurez-vous que vous êtes sur une page labvanced.com ou que vous avez une étude Labvanced ouverte.
  • Essayez de désactiver et de réactiver l'extension depuis chrome://extensions.

Le sélecteur d'éléments ne met pas en surbrillance les éléments

  • Assurez-vous que l'extension est activée et que vous êtes dans l'éditeur (pas en mode aperçu).
  • Certains sites Web utilisent Shadow DOM ou des structures iframe-dans-iframe qui limitent le choix des éléments. Essayez de sélectionner un élément Parent via le panel Object Properties.
  • Actualisez l'éditeur et réessayez.

9. Questions Fréquemment Posées

Q : L'extension est-elle gratuite ? R : Oui. L'extension est gratuite à installer et à utiliser. Un compte Labvanced est requis pour concevoir des études.

Q : Fonctionne-t-elle dans d'autres navigateurs (Firefox, Safari, Edge) ? R : Actuellement, seul Google Chrome est pris en charge. Microsoft Edge (basé sur Chromium) peut fonctionner mais n'est pas officiellement pris en charge ou testé.

Q : Dois-je laisser l'extension installée après l'étude ? R : Non. Les participants peuvent la désinstaller immédiatement après avoir terminé l'étude. Cliquez avec le bouton droit sur l'icône de l'extension → "Retirer de Chrome".

Q : L'extension ralentira-t-elle mon navigateur ? R : L'extension est inactive en dehors des sessions Labvanced. Elle n'ajoute aucun surcoût à la navigation normale.

Q : Peut-elle voir mes mots de passe ou mes informations bancaires ? R : Non. Les champs de mot de passe (<input type="password">) et les saisies de carte de crédit sont explicitement exclus et renvoient des valeurs vides dans tous les cas. L'extension ne lit jamais ni ne transmet de données de formulaire sensibles.

Q : En tant que chercheur, puis-je l'utiliser pour suivre un site Web que le participant visite par ses propres moyens ? R : Non. L'extension s'active uniquement à l'intérieur des iframes intégrées par labvanced.com. Elle ne peut pas suivre des sites Web que les participants visitent indépendamment dans d'autres onglets.

Q : La politique informatique de mon institution exige une révision de l'extension avant que les employés puissent l'installer. Qui puis-je contacter ? R : Contactez-nous à [email protected] avec votre demande.

10. Contact & Support

Email : [email protected]

Documentation : https://www.labvanced.com/content/learn/fr/guide/

Forum communautaire sur Discord : https://discord.com/invite/SBpFJnVZah

Rapports de bogues : Veuillez inclure :

  • Votre version de Chrome (chrome://settings/help)
  • L'URL du site Web que vous essayez d'intégrer
  • Une capture d'écran de tout message d'erreur
  • Étapes pour reproduire le problème



Labvanced Web Bridge est développé et maintenu par Scicovery GmbH. Pour la politique de confidentialité complète, visitez https://www.labvanced.com/extension-privacy-policy.html

Prev
Suivi oculaire
Next
Questionnaires