Augenverfolgung auf einer eingebetteten Website: Eine Web Bridge-Anleitung

Diese Anleitung behandelt den vollständigen Prozess zur Verfolgung des auf der Webcam basierenden Blicks, von Klicks und Scrollverhalten auf einer echten externen Website innerhalb einer Labvanced-Studie, von der Installation der erforderlichen Erweiterung bis hin zum Lesen Ihrer exportierten Daten. Sie verwendet dasselbe peer-reviewed Webcam-Augenverfolgungs-Pipeline, das in Kaduk et al., 2024 validiert wurde, angewendet auf eine Live-Website anstelle von direkt in Labvanced erstellten Stimuli.

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 den Blick auf Stimuli verfolgen, die direkt in Labvanced erstellt wurden (Bilder, Text, Formen), sehen Sie stattdessen den Leitfaden zur Webcam-Augenverfolgung. Für das vollständige Bild beider Wege siehe Augenverfolgung in Labvanced.

2. Zuerst die Erweiterung installieren: Jeder Teilnehmer benötigt sie

Labvanced Web Bridge ist eine live, allgemein verfügbare Chrome-Erweiterung, und sie muss von Ihnen und jedem Teilnehmer installiert werden, nicht nur von demjenigen, der die Studie erstellt. Wenn Sie dies überspringen, wird Ihr erstes Zeichen dafür, dass etwas nicht stimmt, eine fehlgeschlagene Pilot-Sitzung sein, nicht eine Warnung zur Bauzeit. Testen Sie immer, nachdem die Erweiterung installiert wurde, bevor Sie einen Studienlink verbreiten.

Installieren Sie sie aus dem Chrome Web Store, indem Sie Installation im vollständigen Web Bridge-Leitfaden folgen. Ein Teilnehmer, der sie noch nicht installiert hat, sieht eine Eingabeaufforderung wie diese, bevor die Studie fortgesetzt werden kann:

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

Website Frame ist ein echtes, drittes Rahmentyp in Labvanced, neben Canvas Frame und Page Frame, das 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 Rahmen 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 angezeigt wird, besuchen Sie Schritt 2, bevor Sie fortfahren.
4. Die eingebettete Website wird jetzt live im Rahmen im Editor angezeigt.

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

Es gibt keine Autoerkennung. Labvanced liest niemals das eigene Markup einer Website, um zu erraten, welche Container für Ihre Studie wichtig sind. Jeder Bereich von Interesse (AOI) ist ein Container, den Sie manuell anklicken und verankern.

1. Mit dem geöffneten Website-Rahmen und der interaktiven eingebetteten Seite klicken Sie auf das AOI-Symbol, das obere Symbol in der Symbolleiste, die erscheint, wenn ein Website-Rahmen ausgewählt ist (Tooltip: Add Website AOI).
2. Das AOI erscheint rot. Klicken Sie auf Ihr Zielelement auf der eingebetteten Website (ein Produktbild, eine Überschrift, eine Schaltfläche). Die Auswahl wird grün, sobald sie verankert ist.

3. Verwenden Sie Parent, Child, Prev und Next im Object Properties-Panel, um die Auswahl durch den Elementbaum der Seite nach oben, unten oder seitlich zu bewegen, wenn der verankerte Bereich zu breit, zu schmal oder um ein Element verschoben ist.
   • Resolution (Desktop vs. Mobil) ist auf den eigenen Eigenschaften des Website-Rahmens gespeichert, nicht auf den AOIs. Verwenden Sie es, um eine Vorschau darauf zu erhalten, ob Ihre verankerten AOIs bei einer anderen Bildschirmgröße immer noch korrekt platziert sind.
4. Wiederholen Sie dies für jedes Element, das Sie verfolgen möchten.

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

Ein Website-Rahmen hat nur eine Start-URL. Wenn sich das benötigte Element auf einer anderen Seite der Website befindet, zum Beispiel eine Schaltfläche "In den Warenkorb", die nur auf einer Produktseite existiert, navigieren Sie zuerst zur eingebetteten Seite auf diese Seite (oder verweisen Sie direkt auf die URL-Einstellung des Rahmens), und verankern Sie das AOI dort auf die gleiche Weise. Alle AOIs, die Sie zum Rahmen hinzugefügt haben, sind im Seitenbereich aufgelistet.

5. Erfassen Sie die Blickdaten: Fügen Sie Ereignisse hinzu

Ein AOI selbst erfasst nichts. Der Blick darauf wird nur zu Daten, sobald Sie ein Ereignis erstellen, das es in eine Variable erfasst:

1. Fügen Sie ein neues Ereignis im Ereigniseditor hinzu.
2. Wählen Sie für den Auslöser Physiological Signal Triggers → Eyetracking Gaze.
3. Wählen Sie die Option, nur bei bestimmten Elementen auszulösen, und fügen Sie dann Ihr AOI als Ziel hinzu.
4. Benennen Sie das Ereignis. Ein Eyetracking Gaze Event Setup-Dialogfeld erscheint automatisch an dieser Stelle, das bietet an, die Aufzeichnungsaktion für Sie zu erstellen. Akzeptieren Sie Record gaze timeseries [X,Y,T,C] (standardmäßig ausgewählt), und Labvanced erstellt die Set / Record Variable-Aktion für Sie, 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 Variable, die auf Format Array und Aufzeichnungsart All changes / time series gesetzt ist, wählen Sie dann im Wertauswahlmenü Coord. + Time + Confidence [X,Y,T,C] Array aus den Trigger (Eyetracking Gaze)-Optionen aus.

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

Web Bridge meldet außerdem nicht-blickbezogene Verhaltensdaten für dasselbe AOI: Elementposition, Klicks, Hover, Mausbewegung und Scrollposition. Siehe Was verfolgt wird im vollständigen Leitfaden, wie man jedes aufzeichnet.

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

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

Dies ist ein Hilfsmittel für die Pilotierung: Es ermöglicht Ihnen zu sehen, wo Ihr eigener Blick landet, während Sie die Studie testen. Es wird nicht als Daten aufgezeichnet und wird nicht von den Teilnehmern benötigt.

7. Wenn Sie auch Teilnehmer aufteilen müssen, bevor die Kameraaufforderung erscheint

Wenn Ihre Studie nur einige Teilnehmer in einen Webcam-Augenverfolgungsfluss einführen muss, bevor eine Kamera-Zugriffsaufforderung erscheint, sei es durch die Wahl des Teilnehmers, die Aufgabenleistung, automatische Gruppenverteilung oder durch das Aufteilen Ihrer Rekrutierungslinks, handelt es sich um ein separates, allgemeines Muster für Studien mit Verzweigung, das nicht spezifisch für den Website-Rahmen ist. Siehe Bedingte Webcam-Augenverfolgung für die Einrichtung.

8. Testen und Lesen Sie Ihren Export

Vorschau Ihrer Aufgabe mit der installierten Erweiterung und bestätigen, dass die Website lädt und Ihre AOIs wie erwartet verankert sind. Veröffentlichen Sie, sobald Sie zufrieden sind, indem Sie Veröffentlichen und Teilen im vollständigen Leitfaden befolgen.

Ihre Blickdaten exportieren Sie auf die gleiche Weise wie alle anderen Webcam-Augenverfolgungsdaten: als Zeitreihenzeilen im Dataview & Export-Tab. Siehe Exportieren von Blickdaten für Informationen zum Lesen der X, Y, T und C-Spalten.

Für alles andere, Installationsdetails für sowohl Forscher als auch Teilnehmer, vollständige Anwendungsfälle, Daten- und Datenschutzspezifika sowie Problembehandlung siehe den vollständigen Labvanced Web Bridge-Leitfaden, der unten verlinkt ist.

Häufig gestellte Fragen

Weitere Lektüre