Eine echte externe Website, die in einem Labvanced Website Frame eingebettet ist, mit einem grün verankerten Bereich von Interesse über einem Produktbild

Blickverfolgung auf einer eingebetteten Website: Eine Web Bridge Anleitung

Diese Anleitung beschreibt den gesamten Weg zur Verfolgung des webcam-basierten Blicks, von Klicks und Scrollverhalten auf einer echten externen Website innerhalb einer Labvanced-Studie, vom Installieren der erforderlichen Erweiterung bis zum Lesen Ihrer exportierten Daten. Sie verwendet dasselbe peer-reviewed Webcam-Blickverfolgungssystem, das in Kaduk et al., 2024 validiert wurde, und wird auf einer Live-Website angewendet, anstatt auf Reize, die direkt in Labvanced erstellt sind.

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) integriert und Sie messen müssen, wie die Teilnehmer darauf schauen, klicken und scrollen. Wenn Sie den Blick auf Reize verfolgen, die direkt in Labvanced erstellt wurden (Bilder, Texte, Formen), sehen Sie sich stattdessen den Webcam Eye Tracking Guide an. Für das Gesamtkonzept beider Ansätze siehe Blickverfolgung in Labvanced.

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

Labvanced Web Bridge ist eine Live-Chrome-Erweiterung, die allgemein verfügbar ist und von Ihnen und jedem Teilnehmer installiert werden muss, 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 beim Erstellen. Testen Sie immer mit der installierten Erweiterung, bevor Sie einen Studienlink verteilen.

Installieren Sie sie aus dem Chrome Web Store, indem Sie Installation im vollständigen Web Bridge Guide befolgen. Ein Teilnehmer, der sie noch nicht installiert hat, sieht einen Hinweis wie diesen anstelle der Studie:

Teilnehmerorientierte Aufforderung zur Installation der Labvanced Web Bridge Browsererweiterung, bevor die Studie fortgesetzt werden kann

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

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

Öffnen Sie Ihr Experiment im Editor.
Klicken Sie unter Trial Timeline auf + Website.
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 erscheint, besuchen Sie Schritt 2, bevor Sie fortfahren.
Die eingebettete Website wird jetzt live im Rahmen im Editor angezeigt.

Versuchszeitlinie, die die + Website-Rahmentypoption neben Canvas und Seite anzeigt

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

Es gibt keine automatische Erkennung. Labvanced liest nie das eigene Markup einer Website, um zu erraten, welche Container für Ihre Studie relevant sind; jeder Bereich von Interesse (AOI) ist ein Container, den Sie manuell anklicken und verankern.

Mit dem geöffneten Website Frame und der interaktiven eingebetteten Website klicken Sie auf das AOI-Symbol, das obere Symbol in der Werkzeugleiste, die erscheint, wenn ein Website Frame ausgewählt ist (Tooltip: Add Website AOI).
Das AOI wird rot angezeigt. 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.

Arbeitsplatzeditor-Werkzeugleiste mit dem hinzugefügten Website AOI-Symbol über einer live eingebetteten Website hervorgehoben

Verwenden Sie Parent, Child, Prev und Next im Object Properties-Panel, um die Auswahl nach oben, unten oder seitlich durch den Elementbaum der Seite zu bewegen, 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 Funktionsweise dieser Steuerelemente 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. Mobil) findet sich in den eigenen Eigenschaften des Website Frames, nicht in denen des AOIs; verwenden Sie es, um eine Vorschau darauf anzuzeigen, ob Ihre verankerten AOIs bei einer anderen Bildschirmgröße noch korrekt platziert sind.
Wiederholen Sie dies für jedes Element, das Sie verfolgen möchten.

Verankertes Website AOI mit seinem Eigenschaften-Bereich, der den CSS-Selektor, die Steuerungen für Eltern/Kinder/Vorher/Nachher-Anpassungen und die AOI-Liste im Seitenbereich zeigt

Wenn sich das AOI 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, beispielsweise eine Schaltfläche "In den Warenkorb", die nur auf einer Produktseite existiert, navigieren Sie zuerst die eingebettete Website zu dieser Seite (oder verweisen Sie direkt auf die URL-Einstellung des Frames), und verankern Sie das AOI dort auf die gleiche Weise. Alle AOIs, die Sie dem Frame hinzugefügt haben, werden im Seitenbereich aufgelistet.

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

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

Fügen Sie ein neues Ereignis im Ereigniseditor hinzu.
Wählen Sie für den Auslöser Physiological Signal Triggers → Eyetracking Gaze.
Wählen Sie die Option, nur bei bestimmten Elementen auszulösen, und fügen Sie Ihr AOI als Ziel hinzu.
Benennen Sie das Ereignis. Ein Eyetracking Gaze Event Setup Dialog erscheint automatisch an dieser Stelle und bietet an, die Aufzeichnungsaktion 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.
Wenn Sie diesen Dialog überspringen oder schließen, erstellen Sie es stattdessen manuell: Aktion Variable Actions → Set / Record Variable, mit einer Variable eingestellt auf Format Array und Aufzeichnungsart All changes / time series, und wählen Sie dann im Wert-Auswahlmenü 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 die Blickverfolgung auf Labvanced-erstellten Reizen verwendet wird, das stattdessen auf ein Website-AOI-Ziel angewendet wird. Siehe Aufzeichnen und Exportieren von Blickdaten und das Eyetracking Gaze Trigger Referenz für die vollständigen Details zu diesem Ereignis, dem automatisierten Einrichtung-Dialog und der Kalibrierungsfehleraufzeichnung.

Die Web Bridge berichtet auch über nicht-blickbezogene Verhaltensdaten für dasselbe AOI: Elementposition, Klicks, Hover, Mausbewegung und Scrollposition. Siehe Was wird verfolgt im vollständigen Leitfaden, um zu erfahren, wie man jede Aufzeichnung.

Ereigniseditor, der einen Eyetracking Gaze Trigger zeigt, der zwei Website AOI-Ziele anvisiert und mit Set/Record Variable-Aktionen verbunden ist

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

Die Werkzeugleiste, die erscheint, wenn ein Website Frame ausgewählt ist, hat ein zweites Symbol direkt neben Add Website AOI, genannt Add Gaze Indicator. 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 eine Hilfe für die Pilotierung: Sie ermöglicht es Ihnen zu beobachten, wo Ihr eigener Blick landet, während Sie die Studie testen. Es wird nicht als Daten erfasst und ist nichts, was die Teilnehmer benötigen.

7. Wenn Sie auch die Teilnehmer vor dem Kamera-Hinweis aufteilen müssen

Wenn Ihre Studie nur einige Teilnehmer in einen Webcam-Blickverfolgungsfluss senden muss, bevor der Kamera-Zugriffs-Hinweis erscheint, sei es durch Teilnehmerauswahl, Aufgabenerfüllung, automatische Gruppenzuweisung oder Aufteilung Ihrer Rekrutierungslinks, ist das ein separates, allgemeines Verzweigungsstudienmuster, das nicht spezifisch für den Website Frame ist. Siehe Bedingte Webcam-Blickverfolgung für Informationen, wie es eingerichtet wird.

8. Testen und Lesen Sie Ihren Export

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, gemäß Veröffentlichen und Teilen im vollständigen Leitfaden.

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

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

Häufig gestellte Fragen

Müssen alle Teilnehmer die Web Bridge-Erweiterung installieren oder nur ich als Forscher?

Jeder Teilnehmer, nicht nur Sie. Wenn ein Teilnehmer sie nicht installiert hat, wird er an einem Installationsprompt gestoppt, bevor die Studie beginnen kann; es ist eine Voraussetzung, um zu beginnen, nicht etwas, das währenddessen fehlschlägt. Siehe Installieren Sie zuerst die Erweiterung oben.

Was passiert, wenn ein Teilnehmer auf die Installationsaufforderung klickt?

Es leitet Sie zum Chrome Web Store weiter, wo Sie auf Zu Chrome hinzufügen klicken, dann auf Erweiterung hinzufügen im Bestätigungsdialog und dann zur Studie zurückkehren und die Seite aktualisieren, um mit der Studie zu beginnen. Siehe Installation im vollständigen Web Bridge Leitfaden für die vollständigen Schritte des Teilnehmers.

Kann ich ein AOI auf einer anderen Seite der Website verankern als der, mit der ich begonnen habe?

Ja. Ein Website Frame hat nur eine Start-URL, also navigieren Sie zuerst die eingebettete Website zu der Seite, die Sie benötigen (oder verweisen Sie direkt auf die URL-Einstellung des Frames), und verankern Sie das AOI dort auf die gleiche Weise. Siehe Wenn das AOI auf einer anderen Seite als der, die Sie geladen haben, ist oben.

Kann ich andere Frames zu einer auf einem Website Frame basierenden Aufgabe hinzufügen?

Es wird empfohlen, die Aufgabe nur auf einen einzelnen Website Frame zu beschränken und nicht mit anderen Funktionen wie dem Versuchssystem oder zusätzlichen Frames zu kombinieren. Wenn Sie danach etwas benötigen, wie einen Fragebogen, erstellen Sie ihn stattdessen als separate Aufgabe. Kontaktieren Sie uns, wenn Sie einen Anwendungsfall haben, der nicht in dieses Muster passt.