Anpassen des Ankers eines Website-AOIs auf einer echten eingebetteten Website in Labvanced Web Bridge

Auswählen und Anpassen von Website-AOIs

Ein Website-AOI verfolgt keine feste Bildschirmposition. Es verfolgt ein bestimmtes Element innerhalb der eingebetteten Seite, das als Anker bezeichnet wird und durch einen CSS-Selektor identifiziert wird. Ein AOI so zu positionieren, dass es auf das richtige Element landet, hängt hauptsächlich damit zusammen, diesen Anker auszuwählen und anzupassen, nicht ihn zu ändern. Diese Seite behandelt das vollständige Set an 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, einem AOI einen Namen für Ihre exportierten Daten geben, nach Text filtern, das Scrollen innerhalb eines Elements verfolgen und überprüfen, dass ein AOI tatsächlich funktioniert, bevor Sie es veröffentlichen.

Für die Grundlagen zum Hinzufügen eines Website-Rahmens und Ihres ersten AOIs siehe Auswählen von Interessensgebieten (AOIs) im vollständigen Web Bridge-Leitfaden oder das Website-Rahmen-Tutorial für einen vollständigen Arbeitsablauf.

Hinweis: Das Auswählen eines Website-AOIs zeigt zwei separate Panels: ein generisches Object Properties-Block (Name, Visibility, Active, Position & Size) und ein Anchor-Rastersteuerung, das von jedem Objekttyp in Labvanced geteilt wird, sowie die spezifischen Steuerungen für Website-AOIs, die auf dieser Seite behandelt werden. Das Anchor-Raster des generischen Panels ist ein Positions-/Skalenreferenzpunkt, der nicht mit dem CSS-Selektor-Anker beschrieben wird, und seine Position & Size-Felder bestimmen nicht, was ein Website-AOI verfolgt. Verwenden Sie stattdessen die CSS-Selektor-Steuerelemente 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, überwacht die Labvanced Web Bridge-Erweiterung seine Live-Position und überträgt diese an Labvanced, auch während der Teilnehmer scrollt, da sich das Ankerelement mit der Seite bewegt. Das ist der Grund, warum ein korrekt verankertes AOI weiterhin korrekt verfolgt, während Sie nichts weiter tun: der Anker, nicht eine Bildschirmkoordinate, wird verfolgt.

Die praktische Implikation: Wenn ein AOI scheint, die Verfolgung seines Ziels zu verlieren, ist normalerweise 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 mit mehr als einem Element auf der Seite übereinstimmt, zum Beispiel einem Klassennamen, der über eine Reihe von wiederholten Karten geteilt wird, verfolgt das AOI dasjenige, das als erstes in der Struktur der Seite kommt, und nicht alle. Dies tritt meist mit einem handgeschriebenen Selektor auf, der auf einer gemeinsamen Klasse basiert; ein Selektor, der von Pick Element oder den Navigationsteuerelementen unten erstellt wurde, ist an das genaue Element verankert, auf das Sie gelangt sind, und hat dieses Problem nicht.

Warum „Element auswählen“ nicht immer auf das genaue 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 Größe/Positions-Offsetfelder erscheinen erst, nachdem ein Selektor tatsächlich existiert.

Pick Element verankert nicht immer auf dem genauen Element, das Sie anklicken. Es sucht nach einem guten Container zur Auswahl, bevorzugt ein Element mit seiner eigenen ID oder ein natürlich interaktives Element wie einen Link, Button oder Eingabe, und wenn es in der Nähe keinen findet, wird es stattdessen auf einen nahen Container zurückgreifen. In der Praxis bedeutet dies, dass das Klicken auf eine Überschrift oder einen Text in einer Karte oft die gesamte Karte auswählt, und nicht nur diese Überschrift. Wenn das passiert, verwenden Sie die Navigationsteuerelemente unten, um zum genauen Element zu gelangen, das Sie meinten.

Drücken Sie Esc zu jedem Zeitpunkt während der Auswahl, um abzubrechen, ohne den aktuellen Selektor des AOIs zu ändern. Sie können auch den Picker vollständig überspringen und einen CSS-Selektor direkt in das CSS Selector-Feld eingeben oder einfügen, was nützlich ist, wenn Sie bereits wissen, welchen Selektor Sie möchten oder der Picker ihn ständig verpasst.

Korrigieren der Auswahl: Eltern, Kind, Vorherige, Nächste

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

Schaltfläche	Bewegt zu
`↑ Parent`	Das enthaltende Element des aktuellen Elements
`↓ Child`	Das erste Kind des aktuellen Elements
`← Prev`	Der vorherige Bruder auf der aktuellen Ebene
`→ Next`	Der nächste Bruder auf der aktuellen Ebene

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 springen, und dann Next (oder Prev), um seitlich über die Geschwister dieses Elements zu springen, bis Sie das erreichen, was Sie tatsächlich wollen. Wenn das immer noch zu hoch ist, klicken Sie erneut auf Child, um eine weitere Ebene abzusenken, und springen Sie dann wieder seitlich. Jeder Klick regeneriert den Selektor für den Ort, an dem Sie landen, sodass das AOI immer an diesem genauen Element verankert ist und nicht an einem zusammengesetzten Pfad durch dessen Vorfahren.

Wenn eine Schaltfläche nichts hat, auf das sie sich bewegen kann (Prev ohne früheren Bruder, 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 die Grenze der Seitenstruktur in dieser Richtung erreicht. Probieren Sie stattdessen eine andere Schaltfläche aus.

Feinabstimmung von Größe und Position

Sobald ein Element verankert ist, erscheinen zwei zusätzliche Steuerelemente für kleine pixelgenaue Korrekturen, 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, die symmetrisch auf jede Seite angewendet werden.
Position shift (px): bewegt den verfolgten Bereich um eine festgelegte Anzahl von Pixeln, ohne seine Größe zu ändern.

Verwenden Sie 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 keine Polygon- oder benutzerdefinierte Formoption hier, im Gegensatz zu AOIs bei Reizen, die direkt in Labvanced erstellt werden. Wenn das Element, das Sie verfolgen müssen, nicht selbst rechteckig ist, verankern Sie sich am kleinsten rechteckigen Element, das es enthält, und verwenden Sie dann Size offset, um die Box zu trimmen.

Benennen eines AOIs für Ihre exportierten Daten

Das Stimulus Info-Feld ist eine kurze Textbezeichnung für das AOI. Es wird automatisch aus dem Text des Elements ausgefüllt, das Sie auswählen oder zu dem Sie navigieren (oder dem Tag-Namen des Elements, wenn es keinen Text hat), und Sie können es auf etwas Klareres bearbeiten. Dieses Label erscheint als Stimulus Info-Wert in Ereignisauslösern und exportierten Daten, sodass Sie sagen können, zu welchem AOI eine bestimmte Blick-, Klick- oder Hover-Zeile tatsächlich gehört, sobald ein Frame mehr als ein AOI enthält.

Geben Sie jedem AOI eine eindeutige Stimulus Info-Bezeichnung, bevor Sie mit der Sammlung echter Daten beginnen. Eine automatisch ausgefüllte Bezeichnung, die vom Text eines Elements kopiert wurde, wie "In den Warenkorb legen", ist allein in Ordnung, wird aber verwirrend, wenn derselbe Text auf mehr als einem AOI angezeigt wird.

Textfilter

Das Text Filter-Feld schränkt das AOI darauf ein, nur aktiv zu sein, wenn der sichtbare Text seines verankerten Elements einen bestimmten String enthält (abgleich ist nicht großgeschrieben). Dies ist nützlich, wenn Ihr Anker-Selektor plausibel ein Element erfassen kann, dessen Text sich ändert, beispielsweise ein Statuslabel, das durch mehrere Zustände wechselt, und Sie möchten nur, dass das AOI für einen bestimmten Zustand als aktiv gezählt wird.

Verfolgen eines scrollbaren Unterbereichs

Wenn das Element, an das Sie verankert sind, über eigenes internes Scrollen verfügt, beispielsweise ein Chatpanel oder eine scrollbare Produktliste, die auf der Seite eingebettet ist, aktivieren Sie Scrollable container. Dies weist Labvanced an, auch die eigene Scrollposition und die Inhaltsabmessungen dieses Elements zu verfolgen, getrennt von der gesamten Scrollposition der Seite.

Diese Daten sind nur durch den Eyetracking Gaze/Eyetracking Fixation-Auslöser verfügbar, nicht über Mouse Trigger. Wenn der Blick innerhalb eines Scroll-Container-AOIs landet, bietet dessen Werten-Auswahlmenü Container Relative X/Container Relative Y (Position innerhalb des gesamten scrollbaren Inhalts des Containers, nicht nur dessen, was derzeit sichtbar ist) zusammen mit Container Scroll X/Container Scroll Y (wie weit der Container selbst gescrollt ist). Siehe Verfolgen des Mausverhaltens auf einem Website-AOI für das, was der Maus-Auslöser stattdessen auf dem gleichen AOI aufzeichnet.

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

Ein AOI, der nicht verankert werden kann, weil sein Selektor nicht mit etwas auf der aktuellen Seite übereinstimmt, das Ziel-Element noch nicht geladen wurde oder die Web Bridge-Erweiterung nicht aktiv ist, zeigt standardmäßig keinen Fehler für den Teilnehmer oder den Forscher an. Es bleibt einfach inaktiv: keine Blick-, Klick- oder Hover-Daten werden gegen ihn aufgezeichnet und nichts in der Studie deutet sichtbar darauf hin.

Während Sie eine Studie erstellen, wird jeder AOI bereits als farbiges Overlay direkt im Editor 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 ein Schalter erforderlich ist, um dies während Ihrer Arbeit zu sehen. Show AOI overlay in player erweitert dieses gleiche Overlay auf Preview und die Live-Studie selbst, was tatsächlich bestätigt, dass ein AOI von Anfang bis Ende funktioniert und nicht nur während des Bearbeitens. Vorschau Ihrer Studie immer mit diesem Overlay mindestens einmal, bestätigen Sie, dass jeder AOI grün ist, und schalten Sie es dann wieder aus, bevor Sie veröffentlichen, wenn Sie nicht möchten, dass die Teilnehmer das Overlay sehen.

Elemente, die erscheinen oder verschwinden (Dialogs, Modals)

Ein Website-AOI-Anker muss nicht die ganze Zeit auf der Seite vorhanden sein. Da die Erweiterung ständig überprüft, ob der CSS-Selektor derzeit mit irgendetwas übereinstimmt, wird ein AOI, das an einem Element innerhalb eines Dialogs, Modals oder eines anderen Inhalts verankert ist, der nur zu bestimmten Zeiten erscheint, aktiviert, wenn dieses Element erscheint, und deaktiviert, wenn es entfernt wird, ohne dass eine zusätzliche Einrichtung erforderlich ist. Dies ermöglicht Ihnen, Interaktionen mit Elementen zu verfolgen, die nur vorübergehend existieren, beispielsweise einen Bestätigungsdialog, der nach einer bestimmten Aktion geöffnet wird, indem Sie denselben Anker-Mechanismus verwenden, der oben beschrieben wurde.

Häufig gestellte Fragen

Sollte ich das Größen-Offset verwenden, um ein AOI kleiner zu machen, oder ist das das falsche Werkzeug?

In der Regel das falsche Werkzeug. Wenn ein AOI zu viel oder zu wenig von der Seite abdeckt, besteht die Lösung fast immer darin, mit Parent, Child, Prev oder Next einen anderen Anker auszuwählen, nicht darin, den bestehenden zu verkleinern oder zu vergrößern. Reservieren Sie Size offset und Position shift für kleine Korrekturen, sobald der Anker selbst bereits richtig ist.

Warum hat „Element auswählen“ einen größeren Container ausgewählt als das, was ich angeklickt habe?

Der Picker sucht nach einem guten auswählbaren Container in der Nähe des Punktes, an dem Sie geklickt haben, anstatt dem genauen Pixel, sodass er auf eine umgebende Karte, einen Link oder einen Button und nicht auf ein spezifisches Stück Text oder Bild innerhalb davon landen kann. Verwenden Sie Child und dann Next/Prev, um zum genauen Element zu gelangen.

Ich habe auf Nächste oder Kind geklickt, und es ist nichts passiert. Ist das ein Fehler?

Nein. Wenn es in dieser Richtung keinen Bruder gibt oder kein Kind-Element bewegt werden kann, macht die Schaltfläche nichts und die Auswahl bleibt, wie sie war, ohne dass ein Fehler angezeigt wird. Probieren Sie eine andere Richtung aus.

Wie weiß ich, ob ein AOI tatsächlich irgendetwas verfolgt?

Aktivieren Sie AOI-Overlay im Player anzeigen in seinem Objekteigenschaften-Panel und zeigen Sie eine Vorschau der Studie an. Grün bedeutet, dass der Selektor derzeit mit einem Element auf der Seite übereinstimmt; Rot bedeutet, dass dies nicht der Fall ist. Es gibt keinen fehlerbehafteten Teilnehmer, wenn ein AOI nicht verankert ist, daher sollten Sie dies vor der Veröffentlichung überprüfen.

Kann ein Website-AOI ein Element innerhalb eines Popups oder Dialogs verfolgen, das nicht immer auf der Seite ist?

Ja. Das AOI wird aktiviert, wann immer sein verankertes Element auf der Seite existiert, und deaktiviert, wenn es nicht mehr vorhanden ist, sodass ein Anker innerhalb eines Dialogs oder Modals, der nur zu bestimmten Zeitpunkten geöffnet wird, auf die gleiche Weise funktioniert wie jeder andere AOI, keine zusätzliche Konfiguration erforderlich.