Eye Tracking auf einer eingebetteten Website: Eine Web Bridge Anleitung

Diese Anleitung deckt den kompletten Prozess zur Verfolgung von webcam-basierter Blickrichtung, Klicks und Scrollverhalten auf einer realen externen Website innerhalb einer Labvanced-Studie ab, vom Installieren der erforderlichen Erweiterung bis zum Auslesen deiner exportierten Daten. Sie verwendet dasselbe peer-reviewed webcam eye tracking pipeline, das in Kaduk et al., 2024 validiert wurde, und wird auf eine Live-Website angewandt, anstatt auf Stimuli, die direkt in Labvanced erstellt wurden.

1. Ist dies der richtige Ansatz?

Verwende diese Anleitung, wenn deine Studie eine reale, live externe Website (eine Produktseite, einen Nachrichtenartikel, die eigene Schnittstelle eines Kunden) einbettet und du messen musst, wie die Teilnehmer darauf schauen, klicken und scrollen. Wenn du stattdessen den Blick auf Stimuli verfolgst, die direkt in Labvanced erstellt wurden (Bilder, Texte, Formen), schaue dir stattdessen den Webcam Eye Tracking Leitfaden an. Für das vollständige Bild beider Wege sieh dir Eye Tracking in Labvanced an.

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

Labvanced Web Bridge ist eine live, allgemein verfügbare Chrome-Erweiterung, und sie muss von dir und jedem Teilnehmer installiert werden, nicht nur von dem, der die Studie erstellt. Wenn du dies überspringst, wird dein erstes Zeichen, dass etwas nicht stimmt, eine fehlgeschlagene Pilot-Sitzung sein, nicht eine Warnung zur Bauzeit. Teste immer mit der installierten Erweiterung, bevor du einen Studienlink verbreitest.

Installiere sie aus dem Chrome Web Store, indem du Installation in dem vollständigen Web Bridge Leitfaden folgst. Ein Teilnehmer, der sie noch nicht installiert hat, sieht eine Aufforderung wie diese anstelle der Studie:

3. Erstelle die Studie und füge den Website Frame hinzu

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

1. Öffne dein Experiment im Editor.
2. Klicke unter Trial Timeline auf + Website.
3. Benenne den Frame und gebe die URL der Zielwebsite ein, und bestätige dann, dass die Erweiterung ihre grüne Bestätigungsnachricht anzeigt. Wenn sie nicht erscheint, gehe zu Schritt 2 zurück, bevor du fortfährst.
4. Die eingebettete Website wird jetzt live im Frame im Editor angezeigt.

4. Wähle deine 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 deine Studie wichtig sind; jeder Bereich von Interesse (AOI) ist ein Container, den du manuell anklicken und anheuern musst.

1. Mit dem geöffneten Website-Frame und der interaktiven eingebetteten Seite klicke 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 rot. Klicke auf dein Zielfeature auf der eingebetteten Website (ein Produktbild, eine Überschrift, einen Button). Die Auswahl wird grün, sobald sie angestellt ist.

3. Verwende Parent, Child, Prev und Next im Object Properties-Panel, um die Auswahl nach oben, unten oder zur Seite durch den Elementbaum der Seite zu bewegen, wenn der angestellte Bereich zu breit, zu schmal oder um ein Element versetzt ist.
   • Resolution (Desktop vs. Mobil) befindet sich in den Eigenschaften des Website-Frames, nicht in den AOIs, benutze es, um eine Vorschau anzuzeigen, ob deine angestellten AOIs bei einer anderen Bildschirmgröße noch korrekt platziert sind.
4. Wiederhole dies für jedes Element, das du verfolgen möchtest.

Wenn das AOI auf einer anderen Seite als der von dir geladenen ist

Ein Website-Frame hat nur eine Start-URL. Wenn das benötigte Element auf einer anderen Seite der Website ist, z. B. auf einer Produktseite, auf der nur der "In den Warenkorb"-Button existiert, navigiere zunächst zur eingebetteten Seite, bevor du das AOI dort auf die gleiche Weise anheuern. Alle AOIs, die du zum Frame hinzugefügt hast, werden im Seitenpanel aufgelistet.

5. Zeichne die Blickdaten auf: Füge Ereignisse hinzu

Ein AOI allein zeichnet nichts auf. Der Blick darauf wird nur zu Daten, wenn du ein Ereignis erstellst, das es in eine Variable aufnimmt:

1. Füge ein neues Ereignis aus dem Ereigniseditor hinzu.
2. Wähle für den Auslöser Physiological Signal Triggers → Eyetracking Gaze.
3. Wähle die Option, nur bei bestimmten Elementen auszulösen, und füge dann dein AOI als Ziel hinzu.
4. Benenne das Ereignis. Ein Eyetracking Gaze Event Setup-Dialog erscheint automatisch zu diesem Zeitpunkt, der anbietet, die Aufzeichnungsaktion für dich zu erstellen, akzeptiere Record gaze timeseries [X,Y,T,C] (standardmäßig aktiviert), und Labvanced erstellt die Set / Record Variable-Aktion für dich, die auf dein AOI abzielt.
5. Wenn du diesen Dialog überspringst oder schließt, baue es manuell anstelle dessen auf: Aktion Variable Actions → Set / Record Variable, mit einer Variablen, die auf Format Array und Aufzeichnungsart All changes / time series gesetzt ist, dann wähle im Wertauswahlmenü Coord. + Time + Confidence [X,Y,T,C] Array aus den Trigger (Eyetracking Gaze)-Optionen.

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

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

6. Optional: Füge 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, genannt Add Gaze Indicator. Klicke darauf und Labvanced fügt dem Frame einen kleinen roten runden 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 dir, zu beobachten, wo dein eigener Blick landet, während du die Studie testest. Es wird nicht als Daten aufgezeichnet und ist nichts, was die Teilnehmer benötigen.

7. Wenn du auch Teilnehmer vor der Kameraaufforderung aufteilen musst

Wenn deine Studie nur einige Teilnehmer in einen Webcam-Eye-Tracking-Fluss schicken muss, bevor irgend eine Kamera-Zugriffsaufforderung erscheint, sei es durch Teilnehmerwahl, Aufgabenleistung, automatische Gruppenaufteilung oder das Aufteilen deiner Rekrutierungslinks, ist das ein separates, allgemeines Muster für verzweigte Studien und nicht spezifisch für den Website Frame. Siehe Bedingtes Webcam-Eye-Tracking für die Einrichtung.

8. Teste und lese deinen Export aus

Vorschau deiner Aufgabe mit der installierten Erweiterung und bestätige, dass die Website lädt und deine AOIs wie erwartet angestellt werden. Veröffentliche, wenn du zufrieden bist, folge Veröffentlichen und Teilen im vollständigen Leitfaden.

Deine Blickdaten exportieren sich auf die gleiche Weise wie jede andere webcam-basierte Blickdaten: 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 Forscher und Teilnehmer, vollständige Anwendungsfälle, Daten- und Datenschutzspezifika und Fehlersuche, siehe den vollständigen Labvanced Web Bridge Leitfaden, der unten verlinkt ist.

Häufige Fragen

Weiterführende Literatur