Auswahl und Anpassung von Website-AOIs

Eine Website-AOI verfolgt keine fixe Bildschirmposition. Sie verfolgt ein bestimmtes Element innerhalb der eingebetteten Seite, das als ihr Anker bezeichnet wird und durch einen CSS-Selektor identifiziert wird. Damit eine AOI auf das richtige Element landet, geht es hauptsächlich darum, diesen Anker auszuwählen und anzupassen, nicht darum, ihn zu vergrößern oder zu verkleinern. Diese Seite behandelt die vollständige Reihe von Steuerelementen im Website AOI Object Properties-Panel: ein Element auswählen, die Auswahl mit Parent, Child, Prev und Next korrigieren, Größe und Position feinjustieren, eine AOI für Ihre exportierten Daten benennen, nach Text filtern, das Scrollen innerhalb eines Elements verfolgen und überprüfen, ob eine AOI tatsächlich funktioniert, bevor Sie veröffentlichen.

Für die Grundlagen zum Hinzufügen eines Website-Frames und Ihrer ersten AOI siehe Auswahl von Interessensgebieten (AOIs) im vollständigen Web-Bridge-Leitfaden oder das Website-Frame-Walkthrough für einen vollständigen Arbeitsablauf.

Hinweis: Die Auswahl einer Website-AOI zeigt zwei separate Panels: ein generisches Object Properties-Block (Name, Visibility, Active, Position & Size, und ein Anchor-Rastersteuerelement), das von jedem Objekttyp in Labvanced geteilt wird, und die Website-AOI-spezifischen Steuerelemente, die auf dieser Seite behandelt werden. Das generische Panel Anchor-Raster ist ein Position-/Skalierungsreferenzpunkt, der nicht mit dem unten beschriebenen CSS-Selektor-Anker zusammenhängt, und seine Position & Size-Felder bestimmen nicht, was eine Website-AOI verfolgt. Verwenden Sie stattdessen die CSS-Selektor-Steuerelemente unten.

Der Anker: Warum eine AOI beim Scrollen überlebt

Jede Website-AOI speichert einen CSS-Selektor, der im CSS Selector-Feld ihres Object Properties-Panels angezeigt wird. Dieser Selektor ist der Anker der AOI: das eine Element im DOM der eingebetteten Seite, an das die AOI gebunden ist. Solange das Ankerelement auf der Seite existiert, meldet die Labvanced Web Bridge-Erweiterung seine aktuelle Position kontinuierlich an Labvanced zurück, auch während der Teilnehmer scrollt, da sich das Ankerelement selbst mit der Seite bewegt. Deshalb verfolgt eine korrekt verankerte AOI beim Scrollen korrekt, ohne dass Sie etwas zusätzlich tun müssen: Der Anker, nicht eine Bildschirmkoordinate, wird verfolgt.

Die praktische Auswirkung: Wenn es aussieht, als würde eine AOI ihr Ziel verlieren, ist in der Regel das Ankerelement das Problem (es zeigt auf das falsche Element oder dieses Element existiert nicht mehr auf der Seite), nicht ihre Größe oder Position.

Ein Selektor verfolgt immer nur ein Element. Wenn er mit mehr als einem Element auf der Seite übereinstimmt, zum Beispiel mit einem Klassennamen, der über eine Gruppe von wiederholten Karten geteilt wird, verfolgt die AOI dasjenige, das zuerst in der Struktur der Seite erscheint, nicht alle von ihnen. Dies tritt hauptsächlich bei einem handgeschriebenen Selektor auf, der auf einer gemeinsamen Klasse basiert; ein von Pick Element oder den Navigationssteuerelementen unten erzeugter Selektor ist an das genaue Element verankert, auf dem Sie gelandet sind, und hat dieses Problem nicht.

Warum "Element auswählen" nicht immer auf dem genauen Element landet

Bevor Sie einen Selektor ausgewählt oder eingegeben haben, 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 Felder für Offset der Größe/Position erscheinen erst, wenn tatsächlich ein Selektor existiert.

Pick Element verankert nicht immer auf genau dem Element, auf das Sie klicken. Es sucht nach einem guten Container, den es auswählen kann, vorzugsweise ein Element mit einer eigenen ID oder einem von Natur aus interaktiven Element wie einem Link, Button oder Eingabefeld, und wenn es in der Nähe kein solches findet, fällt es stattdessen auf einen nahegelegenen Container zurück. In der Praxis bedeutet dies, dass das Klicken auf eine Überschrift oder ein Stück Text innerhalb einer Karte oft die gesamte Karte auswählt, nicht nur diese Überschrift. Wenn das passiert, verwenden Sie die Navigationssteuerelemente unten, um zu dem genauen Element zu gelangen, das Sie gemeint haben.

Drücken Sie Esc zu jedem Zeitpunkt während der Auswahl, um ohne Änderungen am aktuellen Selektor der AOI abzubrechen. Sie können auch den Auswahlprozess ganz überspringen und einen CSS-Selektor direkt in das CSS Selector-Feld eingeben oder einfügen, was nützlich ist, wenn Sie bereits den gewünschten Selektor kennen oder der Auswahlprozess ihn ständig verpasst.

Korrektur der Auswahl: Eltern, Kind, Vorher, Nachher

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: Klicken Sie auf Child, um in das erste innere Element des Containers zu gelangen, und dann Next (oder Prev), um seitlich über die Geschwister dieses Elements zu gehen, bis Sie zu dem gelangen, den Sie tatsächlich wollen. Wenn das immer noch zu hoch ist, klicken Sie erneut auf Child, um eine weitere Ebene abzusteigen, und klicken Sie dann erneut seitlich. Jeder Klick regeneriert den Selektor für den Ort, an dem Sie landen, sodass die AOI immer an genau diesem Element verankert wird, nicht an einem zusammengesetzten Pfad durch seine Vorfahren.

Wenn eine Schaltfläche nichts hat, auf das sie sich bewegen kann (Prev ohne vorherigen Nachbarn, Child auf 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 unresponsive erscheint, haben Sie wahrscheinlich den Rand der Struktur der Seite in dieser Richtung erreicht; versuchen Sie stattdessen eine andere Schaltfläche.

Feinjustierung von Größe und Position

Sobald ein Element verankert ist, erscheinen zwei zusätzliche Steuerelemente für kleine Pixelanpassungen, die sich von der obigen Navigation 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.

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

Eine Website-AOI ist immer ein Rechteck, das Begrenzungsrahmen des Elements, an das sie verankert ist. Es gibt hier keine Polygon- oder benutzerdefinierte Formoption, im Gegensatz zu AOIs auf Stimuli, die direkt in Labvanced erstellt wurden. Wenn das Element, das Sie verfolgen müssen, nicht selbst rechteckig ist, verankern Sie an dem kleinsten rechteckigen Element, das es enthält, und verwenden Sie dann Size offset, um den Rahmen zu trimmen.

Benennen einer AOI für Ihre exportierten Daten

Das Stimulus Info-Feld ist ein kurzes Textlabel für die AOI. Es wird automatisch aus dem Text des Elements, das Sie auswählen oder zu dem Sie navigieren, ausgefüllt (oder aus dem Tag-Namen des Elements, wenn es keinen Text hat), und Sie können es in etwas Klareres ändern. Dieses Label erscheint als Stimulus Info-Wert in Ereignistriggern und exportierten Daten, sodass Sie damit erkennen können, zu welcher AOI eine gegebene Blick-, Klick- oder Hover-Reihe tatsächlich gehört, sobald ein Frame mehr als eine AOI enthält.

Geben Sie jeder AOI ein eindeutiges Stimulus Info-Label, bevor Sie beginnen, echte Daten zu sammeln. Ein automatisch ausgefülltes Label, das aus einem Text eines Elements kopiert wurde, wie "In den Warenkorb", ist an sich in Ordnung, wird aber verwirrend, sobald derselbe Text auf mehr als einer AOI angezeigt wird.

Textfilter

Das Text Filter-Feld beschränkt die AOI darauf, nur aktiv zu sein, wenn der sichtbare Text des verankerten Elements eine bestimmte Zeichenfolge enthält (die Übereinstimmung ist nicht groß-/kleinschreibungsempfindlich). Dies ist nützlich, wenn Ihr Anker-Selektor plausibel ein Element auswählen könnte, dessen Text sich ändert, zum Beispiel ein Statuslabel, das durch mehrere Zustände wechselt, und Sie möchten, dass die AOI nur für einen bestimmten Zustand als aktiv gezählt wird.

Verfolgen eines scrollbaren Unterbereichs

Wenn das Element, auf das Sie verankert haben, ein eigenes internes Scrollen hat, zum Beispiel ein Chatpanel oder eine scrollbare Produktliste, die in die Seite eingebettet ist, aktivieren Sie Scrollable container. Dies weist Labvanced an, auch die Scrollposition und die Inhaltselemente dieses Elements separat vom Gesamt-Scrollen der Seite zu verfolgen.

Diese Daten werden nur über den Eyetracking Gaze/Eyetracking Fixation-Trigger exponiert, nicht über Mouse Trigger. Wenn der Blick innerhalb einer Scroll-Container-AOI landet, bietet dessen Wertauswahlmenü Container Relative X/Container Relative Y (Position innerhalb der vollständigen scrollbaren Inhalte des Containers, nicht nur das, was derzeit sichtbar ist) neben Container Scroll X/Container Scroll Y (wie weit sich der Container selbst gescrollt hat). Siehe Verfolgen des Mausverhaltens auf einer Website-AOI für das, was der Maus-Trigger stattdessen auf derselben AOI aufzeichnet.

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

Eine AOI, die nicht verankert ist, weil ihr Selektor auf der aktuellen Seite nichts entspricht, das Ziel-Element noch nicht geladen ist oder die Web Bridge-Erweiterung nicht aktiv ist, zeigt standardmäßig keinen Fehler für den Teilnehmer oder den Forscher an. Sie bleibt einfach inaktiv: Es werden keine Blick-, Klick- oder Hover-Daten dagegen aufgezeichnet, und nichts in der Studie zeigt dies sichtbar an.

Während Sie eine Studie erstellen, wird jede AOI bereits als farbige Überlagerung direkt im Editor gerendert; grün bedeutet, dass ihr Selektor derzeit mit einem Element auf der Seite übereinstimmt, rot bedeutet, dass dies nicht der Fall ist, ohne dass ein Umschalter erforderlich ist, um dies während der Arbeit zu sehen. Show AOI overlay in player erweitert diese gleiche Überlagerung auf Preview und die Live-Studie selbst, was tatsächlich eine AOI end-to-end bestätigt, anstatt nur während des Bearbeitens. Überprüfen Sie immer Ihre Studie mit dieser Funktion mindestens einmal, um sicherzustellen, dass jede AOI grün ist, und schalten Sie sie dann wieder aus, bevor Sie veröffentlichen, wenn Sie nicht möchten, dass die Teilnehmer die Überlagerung sehen.

Elemente, die erscheinen oder verschwinden (Dialoge, Modale)

Der Anker einer Website-AOI muss nicht die ganze Zeit auf der Seite vorhanden sein. Da die Erweiterung kontinuierlich überprüft, ob der CSS-Selektor derzeit mit irgendetwas übereinstimmt, wird eine AOI, die an ein Element innerhalb eines Dialogs, Modals oder anderer Inhalte verankert ist, die nur zu bestimmten Zeitpunkten erscheint, aktiv, wenn dieses Element erscheint, und deaktiviert, wenn es entfernt wird, ohne dass eine zusätzliche Einrichtung erforderlich ist. Dies ermöglicht es Ihnen, Interaktionen mit Elementen zu verfolgen, die nur vorübergehend existieren, beispielsweise einem Bestätigungsdialog, der nach einer bestimmten Aktion geöffnet wird, und dabei den gleichen Anker-Mechanismus zu verwenden, der oben beschrieben wurde.

Häufig gestellte Fragen

Weiterführende Literatur