Auswahl und Anpassung von Website-AOIs

Ein Website-AOI verfolgt keine feste Bildschirmposition. Es verfolgt ein spezifisches Element innerhalb der eingebetteten Seite, das als sein Anker bezeichnet wird und durch einen CSS-Selektor identifiziert wird. Den Anker so auszuwählen, dass ein AOI auf das richtige Element trifft, hängt hauptsächlich davon ab, diesen Anker auszuwählen und anzupassen, nicht davor, ihn zu verändern. Diese Seite behandelt das gesamte Set an Steuerungen im Website AOI Object Properties-Panel: ein Element auswählen, die Auswahl mit Parent, Child, Prev und Next korrigieren, Größe und Position feinabstimmen, ein AOI für deine exportierten Daten benennen, nach Text filtern, Scrollen innerhalb eines Elements verfolgen und überprüfen, ob ein AOI tatsächlich funktioniert, bevor du publizierst.

Für die Grundlagen zum Hinzufügen eines Website-Frames und deines ersten AOIs sieh dir Auswahl von Interessensgebieten (AOIs) in der vollständigen Web Bridge-Anleitung an, oder das Website Frame-Tutorial für einen durchgängigen Aufgabenablauf.

Hinweis: Die Auswahl eines Website-AOIs zeigt zwei separate Panels: ein allgemeines Object Properties-Block (Name, Visibility, Active, Position & Size und einen Anchor-Rastersteuerung), die für jeden Objekttyp in Labvanced gemeinsam genutzt werden, sowie die spezifischen Steuerungen für Website-AOIs, die auf dieser Seite behandelt werden. Das Anchor-Raster des allgemeinen Panels ist ein Positions-/Skalierungsreferenzpunkt, der nicht mit dem nachfolgend beschriebenen CSS-Selektor-Anker in Zusammenhang steht, und seine Position & Size-Felder bestimmen nicht, was ein Website-AOI verfolgt. Verwende stattdessen die CSS-Selektorensteuerungen unten.

Der Anker: Warum ein AOI das Scrollen überlebt

Jedes Website-AOI speichert einen CSS-Selektor, der im CSS Selector-Feld seines Object Properties-Panels angezeigt wird. Dieser Selektor ist der Anker des AOIs: das eine Element im DOM der eingebetteten Seite, an das das AOI gebunden ist. Solange das Ankerelement auf der Seite existiert, hält die Labvanced Web Bridge-Erweiterung fortlaufend seine aktuelle Position an Labvanced zurück und berichtet darüber, einschließlich während die Teilnehmenden scrollen, da sich das Ankerelement selbst mit der Seite bewegt. Das ist der Grund, warum ein korrekt verankertes AOI beim Scrollen weiterhin korrekt verfolgt, ohne dass du zusätzliche Maßnahmen ergreifen musst: Der Anker und nicht eine Bildschirmkoordinate ist das, was verfolgt wird.

Die praktische Implikation: Wenn ein AOI anscheinend die Spur seines Ziels verliert, ist in der Regel das Ankerelement das Problem (es zeigt auf das falsche Element oder dieses Element existiert nicht mehr auf der Seite), nicht seine Größe oder Position.

Ein Selektor verfolgt immer nur ein Element. Wenn er mehr als ein Element auf der Seite übereinstimmt, z. B. einen Klassennamen, der über eine Reihe von wiederholten Karten geteilt wird, verfolgt das AOI dasjenige, das zuerst in der Struktur der Seite kommt, nicht alle. Dies tritt überwiegend auf, wenn ein handgeschriebener Selektor auf einer gemeinsamen Klasse basiert; ein Selektor, der durch Pick Element oder die Steuerungen zur Navigation unten erzeugt wird, ist an das genaue Element angeheftet, auf dem du gelandet bist, und hat dieses Problem nicht.

Warum "Element auswählen" nicht immer auf das genaue Element landet

Bevor du einen Selektor ausgewählt oder eingegeben hast, zeigt das Panel nur CSS Selector, Pick Element, Stimulus Info, Text Filter, Scrollable container und Show AOI overlay in player. Adjust selection (Parent/Child/Prev/Next) und die Versatzfelder für Größe/Position erscheinen erst, wenn ein Selektor tatsächlich existiert.

Pick Element verankert nicht immer auf das genaue Element, auf das du klickst. Es sucht nach einem guten Container zur Auswahl und bevorzugt ein Element mit eigener ID oder ein von Natur aus interaktives Element wie einen Link, Button oder Eingabefeld, und wenn nichts in der Nähe gefunden wird, fällt es auf einen nahegelegenen Container zurück. In der Praxis bedeutet das, dass das Klicken auf eine Überschrift oder einen Text innerhalb einer Karte oft die gesamte Karte auswählt, nicht nur diese Überschrift. Wenn das passiert, benutze die Steuerungen zur Navigation unten, um zum genauen Element zu gelangen, das du gemeint hast.

Drücke Esc zu jedem Zeitpunkt während der Auswahl, um abzubrechen, ohne den aktuellen Selektor des AOIs zu ändern. Du kannst auch den Picker ganz überspringen und einen CSS-Selektor direkt in das CSS Selector-Feld eingeben oder einfügen, was nützlich ist, wenn du bereits weißt, welchen Selektor du möchtest oder der Picker ihn ständig verpasst.

Korrigieren der Auswahl: Eltern, Kind, Vorhergehender, Nächster

Sobald ein CSS-Selektor festgelegt ist, erscheinen vier Schaltflächen unter Adjust selection: im Object Properties-Panel:

Dies sind die primären Möglichkeiten, eine Auswahl zu korrigieren, mehr als sie zu vergrößern oder zu verkleinern. Der typische Arbeitsablauf, wenn Pick Element auf dem falschen Element landet: Klicke auf Child, um in das erste innere Element des Containers zu wechseln, dann Next (oder Prev), um seitwärts durch die Geschwister dieses Elements zu schreiten, bis du das Element erreichst, das du tatsächlich haben möchtest. Wenn das immer noch zu hoch ist, klicke Child erneut, um eine weitere Ebene abzusteigen, dann erneut seitwärts gehen. Jeder Klick regeneriert den Selektor für das Element, auf dem du landest, sodass das AOI immer an diesem genauen Element und nicht an einem zusammengesetzten Pfad von seinen Vorfahren verankert wird.

Wenn eine Schaltfläche nichts zu bewegen hat (Prev ohne früheres Geschwister, Child bei einem Element ohne Kinder oder Parent wenn das einzige Element darüber das äußere html/body der Seite ist), passiert nichts: die Auswahl bleibt dort, wo sie war, ohne Fehlermeldung. Wenn eine Navigationsschaltfläche unresponsiv erscheint, hast du wahrscheinlich den Rand der Struktur der Seite in dieser Richtung erreicht, versuche stattdessen eine andere Schaltfläche.

Feinjustierung von Größe und Position

Sobald ein Element verankert ist, erscheinen zwei zusätzliche Steuerungen für kleine Korrekturen auf Pixel-Ebene, die sich von der Navigation oben unterscheiden:

• Size offset (px, ± per side): erweitert oder verkleinert den verfolgten Bereich um eine festgelegte Anzahl von Pixeln auf den X- und Y-Achsen, symmetrisch auf jede Seite angewendet.
• Position shift (px): bewegt den verfolgten Bereich um eine festgelegte Anzahl von Pixeln, ohne seine Größe zu verändern.

Verwende diese nur, nachdem der Anker selbst korrekt ist. Sie schieben die Grenze eines bereits korrekt verankerten Elements; sie ändern nicht, welches Element verfolgt wird.

Ein Website-AOI ist immer ein Rechteck, die Begrenzungsbox des Elements, an das es verankert ist. Es gibt hier keine Polygon- oder benutzerdefinierte Formoption, im Gegensatz zu AOIs auf Stimuli, die direkt in Labvanced erstellt werden. Wenn das Element, das du verfolgen musst, nicht rechteckig ist, verankere an dem kleinsten rechteckigen Element, das es enthält, und verwende dann Size offset, um das Feld zu kürzen.

Benennung eines AOIs für deine exportierten Daten

Das Stimulus Info-Feld ist ein kurzer Textlabel für das AOI. Es wird automatisch mit dem Text des Elements gefüllt, das du auswählst oder zu dem du navigierst (oder dem Tag-Namen des Elements, wenn es keinen Text hat), und du kannst es auf etwas Klareres bearbeiten. Dieses Label erscheint als Stimulus Info-Wert in Ereignisauslösern und exportierten Daten, sodass du erkennst, zu welchem AOI eine gegebene Fixation, Klick oder Hover-Zeile tatsächlich gehört, sobald ein Frame mehr als ein AOI enthält.

Gib jedem AOI ein deutliches Stimulus Info-Label, bevor du beginnst, echte Daten zu sammeln. Ein automatisch ausgefülltes Label, das aus dem Text eines Elements kopiert wird, wie "In den Warenkorb legen", ist für sich genommen in Ordnung, wird jedoch verwirrend, sobald derselbe Text bei mehr als einem AOI erscheint.

Textfilter

Das Text Filter-Feld beschränkt das AOI darauf, nur aktiv zu sein, wenn der sichtbare Text des verankerten Elements eine bestimmte Zeichenfolge enthält (die Übereinstimmung ist groß-/kleinschreibungunabhängig). Dies ist nützlich, wenn dein Ankerselektor plausibel zu einem Element passen könnte, dessen Text sich ändert, z. B. einem Statuslabel, das mehrere Zustände durchläuft, und du möchtest, dass das AOI nur für einen bestimmten Zustand als aktiv gezählt wird.

Verfolgen eines scrollbaren Unterbereichs

Wenn das Element, an das du verankert bist, ein internes Scrollen hat, beispielsweise ein Chat-Panel oder eine scrollbare Produktliste, die innerhalb der Seite geschachtelt ist, aktiviere Scrollable container. Dies sagt Labvanced, dass auch die eigene Scrollposition und die Inhalte dieses Elements getrennt vom allgemeinen Scrollen der Seite verfolgt werden.

Diese Daten sind nur über den Eyetracking Gaze/Eyetracking Fixation-Auslöser sichtbar, nicht über Mouse Trigger. Wenn die Fixation innerhalb eines scrollbaren AOIs landet, bietet das Werteauswahlmenü Container Relative X/Container Relative Y (Position innerhalb des gesamten scrollbaren Inhalts des Containers, nicht nur das, was derzeit sichtbar ist) zusammen mit Container Scroll X/Container Scroll Y (wie weit der Container selbst gescrollt ist). Siehe Verfolgung des Mausverhaltens auf einem Website-AOI dafür, was der Mausauslöser stattdessen auf demselben AOI aufzeichnet.

Überprüfen, ob ein AOI tatsächlich funktioniert

Ein AOI, der nicht verankert werden kann, weil sein Selektor auf der aktuellen Seite nicht übereinstimmt, das Ziel-Element noch nicht geladen ist oder die Web Bridge-Erweiterung nicht aktiv ist, zeigt standardmäßig keine Fehler an den Teilnehmenden oder den Forschenden an. Es bleibt einfach inaktiv: keine Fixations-, Klick- oder Hover-Daten werden dagegen aufgezeichnet, und nichts in der Studie zeigt dies sichtbar an.

Während du eine Studie erstellst, wird jedes AOI bereits direkt im Editor als farbige Überlagerung angezeigt, grün bedeutet, dass sein Selektor derzeit mit einem Element auf der Seite übereinstimmt, rot bedeutet, dass dies nicht der Fall ist, ohne dass du etwas umschalten musst, um dies während der Arbeit zu sehen. Show AOI overlay in player erweitert dieselbe Überlagerung auf Preview und die Live-Studie selbst, was tatsächlich bestätigt, dass ein AOI von Anfang bis Ende funktioniert, anstatt nur beim Bearbeiten. Vorschau immer deine Studie einmal mit diesem aktiviert, um sicherzustellen, dass jedes AOI grün ist, und schalte es dann wieder aus, bevor du veröffentlichst, wenn du nicht möchtest, dass Teilnehmende die Überlagerung sehen.

Elemente, die erscheinen oder verschwinden (Dialoge, Modale)

Ein Website-AOIs Anker muss nicht die ganze Zeit auf der Seite vorhanden sein. Da die Erweiterung fortlaufend überprüft, ob der CSS-Selektor derzeit mit etwas übereinstimmt, wird ein AOI, das an einem Element innerhalb eines Dialogs, Modals oder anderen Inhalten verankert ist, die nur zu bestimmten Zeitpunkten erscheinen, aktiviert, wenn dieses Element erscheint und deaktiviert, wenn es entfernt wird, ohne zusätzliche Einrichtung. Dies ermöglicht dir, Interaktionen mit Elementen zu verfolgen, die nur vorübergehend existieren, zum Beispiel ein Bestätigungsdialog, der nach einer bestimmten Aktion geöffnet wird, und das gleiche Ankermechanismus, das oben beschrieben wurde, verwenden.

Häufig gestellte Fragen

Weiterführende Informationen