Augenverfolgung auf einer eingebetteten Website: Eine Web Bridge-Anleitung

Diese Anleitung beschreibt den gesamten Weg zur Verfolgung von webcam-basierten Blick, Klick und Scrollverhalten auf einer echten externen Website innerhalb einer Labvanced-Studie, von der Installation der erforderlichen Erweiterung bis zum Lesen Ihrer exportierten Daten. Sie verwendet dasselbe peer-reviewed Webcam-Augenverfolgungs-Pipeline, das in Kaduk et al., 2024 validiert wurde, und wird auf einer Live-Website angewendet, anstatt auf Stimuli, die direkt in Labvanced erstellt wurden.

1. Ist dies der richtige Ansatz?

Verwenden Sie diese Anleitung, wenn Ihre Studie eine echte, live externe Website (eine Produktseite, einen Nachrichtenartikel, die eigene Schnittstelle eines Kunden) einbettet und Sie messen müssen, wie die Teilnehmer darauf schauen, klicken und scrollen. Wenn Sie stattdessen den Blick auf Stimuli verfolgen, die direkt in Labvanced erstellt wurden (Bilder, Text, Formen), siehe stattdessen die Webcam-Augenverfolgungsanleitung. Für das große Ganze beider Wege siehe Augenverfolgung in Labvanced.

2. Installieren Sie zuerst die Erweiterung: Jeder Teilnehmer benötigt sie

Labvanced Web Bridge ist eine live, allgemein verfügbare Chrome-Erweiterung, die von Ihnen und jedem Teilnehmer installiert werden muss, nicht nur von dem, der die Studie erstellt. Überspringen Sie dies, und Ihr erstes Zeichen, dass etwas falsch ist, wird eine gescheiterte Pilot-Sitzung sein, nicht eine Warnung zur Erstellungszeit. Testen Sie immer mit installierter Erweiterung, bevor Sie einen Studienlink verbreiten.

Installieren Sie sie aus dem Chrome Web Store, indem Sie Installation in der vollständigen Web Bridge-Anleitung folgen. Ein Teilnehmer, der sie noch nicht installiert hat, sieht eine Eingabeaufforderung wie diese anstelle der Studie:

3. Erstellen Sie die Studie und fügen Sie den Website-Frame hinzu

Website Frame ist ein echter, dritter Frame-Typ in Labvanced, neben Canvas Frame und Page Frame, der auf die gleiche Weise hinzugefügt wird.

1. Öffnen Sie Ihr Experiment im Editor.
2. Unter Trial Timeline klicken Sie auf + Website.
3. Benennen Sie den Frame und geben Sie die URL der Zielwebsite ein, und bestätigen Sie dann, dass die Erweiterung ihre grüne Bestätigungsnachricht anzeigt. Wenn sie nicht erscheint, wiederholen Sie Schritt 2, bevor Sie fortfahren.
4. Die eingebettete Website wird jetzt live im Frame im Editor angezeigt.

4. Wählen Sie Ihre AOIs: Dies ist ein manueller Schritt

Es gibt keine automatische Erkennung. Labvanced liest niemals das eigene Markup einer Website, um zu erraten, welche Container für Ihre Studie relevant sind; jedes Area of Interest (AOI) ist ein Container, den Sie manuell anklicken und verankern.

1. Mit dem offenen Website-Frame und der interaktiven eingebetteten Seite klicken Sie auf das AOI-Symbol, das oberste Symbol in der Symbolleiste, die erscheint, wenn ein Website-Frame ausgewählt ist (Tooltip: Add Website AOI).
2. Das AOI erscheint in Rot. Klicken Sie auf das Ziel-Element auf der eingebetteten Website (ein Produktbild, eine Überschrift, ein Button). Die Auswahl wird grün, sobald sie verankert ist.

3. Verwenden Sie Parent, Child, Prev und Next im Object Properties-Panel, um die Auswahl nach oben, unten oder seitwärts durch den Elementbaum der Seite zu bewegen, falls das verankerte Gebiet zu breit, zu schmal oder um ein Element versetzt ist.
   • Resolution (Desktop vs. Mobil) befindet sich im eigenen Eigenschaftenfenster des Website Frames und nicht im AOI, verwenden Sie es, um eine Vorschau zu erhalten, ob Ihre verankerten AOIs weiterhin korrekt bei einer anderen Bildschirmgröße landen.
4. Wiederholen Sie dies für jedes Element, das Sie verfolgen möchten.

Wenn das AOI sich auf einer anderen Seite befindet als der, die Sie geladen haben

Ein Website Frame hat nur eine Start-URL. Wenn sich das benötigte Element auf einer anderen Seite der Website befindet, z. B. einem "In den Warenkorb"-Button, der nur auf einer Produktseite existiert, navigieren Sie zuerst zur eingebetteten Seite auf diese Seite (oder richten Sie die URL-Einstellung des Frames direkt darauf aus), und verankern Sie das AOI dort auf die gleiche Weise. Alle AOIs, die Sie zum Frame hinzugefügt haben, sind im Seitenpanel aufgeführt.

5. Erfassen Sie die Blickdaten: Ereignisse hinzufügen

Ein AOI selbst erfasst nichts. Der Blick darauf wird erst zu Daten, wenn Sie ein Ereignis erstellen, das es in einer Variable festhält:

1. Fügen Sie ein neues Ereignis im Ereigniseditor hinzu.
2. Wählen Sie für den Trigger Physiological Signal Triggers → Eyetracking Gaze.
3. Wählen Sie die Option, um nur bei bestimmten Elementen auszulösen, und fügen Sie Ihre AOI als Ziel hinzu.
4. Benennen Sie das Ereignis. Ein Eyetracking Gaze Event Setup-Dialogfeld erscheint automatisch an diesem Punkt und bietet an, die Aufnahmeaktion für Sie zu erstellen; akzeptieren Sie Record gaze timeseries [X,Y,T,C] (standardmäßig aktiviert) und Labvanced erstellt unter Ihnen die Set / Record Variable-Aktion, die auf Ihr AOI ausgerichtet ist.
5. Wenn Sie dieses Dialogfeld überspringen oder schließen, erstellen Sie es stattdessen manuell: Aktion Variable Actions → Set / Record Variable, mit einer Variablen, die auf Format Array und Aufzeichnungstyp All changes / time series gesetzt ist, dann wählen Sie im Wertauswahlmenü Coord. + Time + Confidence [X,Y,T,C] Array aus den Trigger (Eyetracking Gaze)-Optionen.

Dies ist dasselbe Trigger-und-Aktion-Muster, das für die Augenverfolgung bei Labvanced-erstellten Stimuli verwendet wird, das stattdessen auf ein Website-AOI-Ziel angewendet wird. Siehe Aufzeichnen und Exportieren von Blickdaten und die Eyetracking-Gaze-Trigger-Referenz für die vollständigen Details zu diesem Ereignis, dem automatisierten Setup-Dialog und der Aufzeichnung von Kalibrierungsfehlern.

Web Bridge berichtet auch über nicht-blickbezogene Verhaltensdaten für dasselbe AOI: Elementposition, Klicks, Hover, Mausbewegung und Scrollposition. Siehe Was wird verfolgt in der vollständigen Anleitung, wie man jedes aufzeichnet.

6. Optional: Fügen Sie einen Blickindikator für die Pilotierung hinzu

Die Symbolleiste, die erscheint, wenn ein Website Frame ausgewählt ist, hat ein zweites Symbol direkt neben Add Website AOI, das Add Gaze Indicator genannt wird. Klicken Sie darauf, und Labvanced fügt dem Frame einen kleinen roten kreisförmigen Marker hinzu, zusammen mit einem automatisch erstellten update gaze position-Ereignis, das die Position des Markers während der Wiedergabe auf die aktuellen Blickkoordinaten aktualisiert.

Dies ist ein Hilfsmittel für die Pilotierung: Es ermöglicht Ihnen zu beobachten, wo Ihr eigener Blick landet, während Sie die Studie testen. Es wird nicht als Daten erfasst und ist nichts, was Teilnehmer benötigen.

7. Wenn Sie auch einen Webcam-Zustimmungs-/Ablehnungspfad benötigen

Wenn Ihre Studie es den Teilnehmern ermöglichen muss, zu entscheiden, ob sie die Webcam-Augenverfolgung überhaupt aktivieren möchten, bevor irgendwelche Kamera-Zugriffseingabeaufforderungen erscheinen, ist das ein separates, allgemeines Zweigstudienmuster, nicht spezifisch für Website Frame. Eine spezielle Anleitung dafür ist geplant. Wenn Sie sie vor ihrer Veröffentlichung benötigen, kontaktieren Sie [email protected].

8. Testen und Lesen Ihres Exports

Vorschau Ihrer Aufgabe mit der installierten Erweiterung und bestätigen Sie, dass die Website geladen wird und Ihre AOIs wie erwartet verankert sind. Veröffentlichen Sie, sobald Sie zufrieden sind, indem Sie Veröffentlichen und Teilen in der vollständigen Anleitung folgen.

Ihre Blickdaten exportieren sich auf die gleiche Weise wie andere Webcam-Augenverfolgungsdaten: als Zeitreihenzeilen im Dataview & Export-Tab. Siehe Exportieren von Blickdaten für Informationen darüber, wie Sie die X, Y, T und C-Spalten lesen.

Für alles andere, Installationsdetails sowohl für Forscher als auch für Teilnehmer, vollständige Anwendungsfälle, Daten- und Datenschutzdetails und Fehlerbehebung, siehe die vollständige Labvanced Web Bridge-Anleitung, die unten verlinkt ist.

Weiterführende Links