Eye Tracking auf einer eingebetteten Website: Eine Web Bridge Anleitung

Diese Anleitung behandelt den gesamten Weg, um blickbasiertes Verhalten, Klicks und Scrollverhalten auf einer realen externen Website innerhalb einer Labvanced-Studie zu verfolgen, vom Installieren der erforderlichen Erweiterung bis zum Auslesen Ihrer exportierten Daten. Sie verwendet dasselbe peer-reviewed Webcam Eye Tracking Pipeline, das in Kaduk et al., 2024 validiert wurde, angewendet auf eine live Website anstelle von Stimuli, die direkt in Labvanced erstellt wurden.

Sehen Sie sich die vollständige Anleitung in diesem Video an:

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 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 die Webcam Eye Tracking Anleitung. Für das Gesamtbild beider Wege siehe Eye Tracking in Labvanced.

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

Labvanced Web Bridge ist eine live, allgemein verfügbare Chrome-Erweiterung und muss von Ihnen und jedem Teilnehmer installiert werden, nicht nur von demjenigen, der die Studie erstellt. Wenn Sie dies überspringen, wird Ihr erstes Zeichen, dass etwas nicht stimmt, eine fehlgeschlagene Pilot-Session sein, nicht eine Warnung während des Erstellens. Testen Sie immer mit der installierten Erweiterung, bevor Sie einen Studienlink verbreiten.

Installieren Sie sie über den 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 Rahmen-Typ in Labvanced, neben Canvas Frame und Page Frame, die auf die gleiche Weise hinzugefügt werden.

1. Öffnen Sie Ihr Experiment im Editor.
2. Klicken Sie unter Trial Timeline auf + Website.
3. Benennen Sie den Rahmen und geben Sie die URL der Ziel-Website ein, und bestätigen Sie dann, dass die Erweiterung ihre grüne Bestätigungsnachricht anzeigt. Wenn sie nicht angezeigt wird, wiederholen 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 automatische Erkennung. Labvanced liest niemals das eigene Markup einer Website, um zu erraten, welche Container für Ihre Studie von Bedeutung sind. Jeder Bereich von Interesse (AOI) ist ein Container, den Sie von Hand anklicken und verankern.

1. Mit dem geöffneten Website Frame und der interaktiven eingebetteten Website klicken Sie auf das AOI-Symbol, das oberste Symbol in der Werkzeugleiste, die erscheint, wenn ein Website Frame ausgewählt ist (Tooltip: Add Website AOI).
2. Das AOI erscheint in 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-Bereich, um die Auswahl nach oben, unten oder seitlich durch den Elementebaum der Seite zu verschieben, wenn der verankerte Bereich zu breit, zu schmal oder um ein Element versetzt ist. Siehe Auswählen und Anpassen von Website AOIs für die vollständige Mechanik dieser Steuerungen sowie Text Filter, Scrollable container und wie Sie überprüfen können, ob ein AOI tatsächlich verankert ist, bevor Sie veröffentlichen.
   • Resolution (Desktop vs. Mobile) befindet sich in den Eigenschaften des Website Frames selbst, nicht im AOI, verwenden Sie es, um eine Vorschau zu sehen, ob Ihre verankerten AOIs auf einer anderen Bildschirmgröße noch korrekt landen.
4. Wiederholen Sie dies für jedes Element, das Sie verfolgen möchten.

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

Ein Website Frame hat nur eine Start-URL. Wenn sich das Element, das Sie benötigen, auf einer anderen Seite der Website befindet, zum Beispiel einer "In den Warenkorb"-Schaltfläche, die nur auf einer Produktseite vorhanden ist, navigieren Sie zuerst die eingebettete Website zu dieser Seite (oder weisen Sie die URL-Einstellung des Frames direkt darauf hin), und verankern Sie das AOI dort auf die gleiche Weise. Alle AOIs, die Sie dem Frame hinzugefügt haben, sind im Seitenpanel aufgelistet.

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

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

1. Fügen Sie ein neues Ereignis im Ereignis-Editor hinzu.
2. Wählen Sie als Auslöser Physiological Signal Triggers → Eyetracking Gaze.
3. Wählen Sie die Option, die nur bei spezifischen Elementen auslöst, und fügen Sie Ihr AOI als Ziel hinzu.
4. Benennen Sie das Ereignis. Ein Eyetracking Gaze Event Setup-Dialogfeld erscheint automatisch zu diesem Zeitpunkt 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 die Set / Record Variable-Aktion unten für Sie, die auf Ihr AOI abzielt.
5. Wenn Sie dieses Dialogfeld überspringen oder schließen, erstellen Sie es stattdessen manuell: Aktion Variable Actions → Set / Record Variable, wobei eine Variable auf Format Array und Aufzeichnungstyp All changes / time series gesetzt wird, und wählen Sie dann im Werteauswahlmenü Coord. + Time + Confidence [X,Y,T,C] Array aus den Trigger (Eyetracking Gaze)-Optionen.

Dies ist dasselbe Muster aus Auslöser und Aktion, das auch für Eye Tracking auf Labvanced-gebauten Stimuli verwendet wird, angewendet auf ein Website-AOI-Ziel. Siehe Aufzeichnen und Exportieren von Blickdaten und das Eyetracking Gaze Trigger Referenzdokument für die vollständigen Details zu diesem Ereignis, dem automatisierten Setup-Dialog und der Aufzeichnung von Kalibrierungsfehlern.

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

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

Die Werkzeugleiste, 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 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 auf die aktuellen Blickkoordinaten aktualisiert.

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

7. Wenn Sie Teilnehmer auch vor der Kameraaufforderung aufteilen müssen

Wenn Ihre Studie nur einige Teilnehmer in einen Webcam-Blickverfolgungsablauf senden muss, bevor eine Kamerazugriffaufforderung angezeigt wird, sei es durch Teilnehmerwahl, Aufgabenerfüllung, automatische Gruppenzuweisung oder Aufteilen Ihrer Rekrutierungslinks, ist das ein separates, allgemeines Verzweigungsstudienmuster, das nicht spezifisch für den Website Frame ist. Siehe Bedingtes Webcam Eye Tracking für weitere Informationen zur Einrichtung.

8. Testen und Lesen Sie Ihren Export

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

Ihre Blickdaten werden auf die gleiche Weise exportiert wie alle anderen Webcam-Eye-Tracking-Daten: als Zeitreihenreihen in der Dataview & Export-Registerkarte. Siehe Exportieren von Blickdaten für Hinweise zum Lesen der X, Y, T, und C Spalten.

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

Häufig gestellte Fragen

Weiterführende Literatur