ウェブサイト AOI の選択と調整
ウェブサイト AOI は固定された画面位置を追跡しません。埋め込まれたページ内の特定の要素を追跡し、それをアンカーと呼び、CSS セレクターによって特定されます。AOI を正しい要素に配置することは主にそのアンカーを選択し調整することに関するもので、サイズ変更に関するものではありません。このページでは、Website AOI Object Properties パネル内の全てのコントロールセットを扱います。要素を選択し、Parent、Child、Prev、Next を使って選択を修正し、サイズや位置を微調整し、エクスポートデータ用に AOI に名前を付け、テキストでフィルタリングし、要素内のスクロールを追跡し、公開前に AOI が実際に機能していることを確認します。
ウェブサイトフレームと最初の AOI を追加する基本については、フル Web Bridge ガイドの 興味のある領域 (AOI) の選択 を参照するか、ウェブサイトフレームのウォークスルー を最初から最後までのタスクフローとして始めてください。
注意: ウェブサイト AOI を選択すると、2 つの別個のパネルが表示されます。一般的な Object Properties ブロック（Name、Visibility、Active、Position & Size と Anchor グリッドコントロール）で、Labvanced 内のすべてのオブジェクトタイプで共有されています。ページ全体でカバーされるウェブサイト AOI 固有のコントロールがこのページで扱われています。一般的なパネルの Anchor グリッドは、以下で説明する CSS セレクターアンカーとは無関係な位置/スケールのリファレンスポイントであり、その Position & Size フィールドはウェブサイト AOI が追跡するものを決定するものではありません。その代わりに、下の CSS セレクターコントロールを使用してください。
アンカー: AOI がスクロールを生き延びる理由
すべてのウェブサイト AOI は、CSS Selector フィールドに表示される CSS セレクターを保存します。そのセレクターが AOI のアンカーです。埋め込まれたページの DOM 内で AOI が結びついている要素です。アンカー要素がページ上に存在する限り、Labvanced Web Bridge 拡張機能は参加者がスクロールしている時でも、ページと共に動くアンカー要素のライブ位置を Labs vanced に報告し続けます。これが正しくアンカーされた AOI が、追加の操作を行わずにスクロール中でも正しく追跡を維持する理由です: 追跡されているのは画面の座標ではなく、アンカーです。
実用的な意味: AOI がターゲットを追跡できていないように見える場合、通常はアンカー自体が問題です（これは間違った要素を指しているか、その要素がページ上に存在しなくなった場合です）。サイズや位置が問題ではありません。
セレクターは常に 1 つの要素のみを追跡します。例えば、一連の繰り返されたカードに共有されるクラス名を持つ要素が複数存在する場合、AOI はページの構造上で最初に来る要素を追跡し、全ての要素を追跡することはありません。これは、共有クラスに基づいて手動でタイプするセレクターにおいて特に問題になります。Pick Element または下のナビゲーションコントロールによって生成されたセレクターは、到達した正確な要素にアンカーされており、この問題はありません。
要素を選択することが常に正確な要素に到達しない理由
セレクターを選択したり入力したりする前は、パネルには CSS Selector、Pick Element、Stimulus Info、Text Filter、Scrollable container、Show AOI overlay in player のみが表示されます。Adjust selection (Parent/Child/Prev/Next) とサイズ/位置オフセットフィールドは、セレクターが実際に存在するまで表示されません。
Pick Element は、クリックした正確な要素に常にアンカーされるわけではありません。選択する良好なコンテナを探し、独自の ID を持つ要素やリンク、ボタン、または入力などの自然なインタラクティブ要素を優先し、一番近くに見つからない場合は、近くのコンテナにフ fallback します。実際には、カード内の見出しやテキストをクリックすると、特定の見出しだけでなく、全体のカードが選択されることがよくあります。その場合は、下のナビゲーションコントロールを使用して、意図した正確な要素に移動してください。
選択中にいつでも Esc を押すと、AOI の現在のセレクターを変更することなくキャンセルできます。また、ピッカーを完全にスキップして、CSS Selector フィールドに CSS セレクターを直接入力または貼り付けることもできます。これは、必要なセレクターをすでに知っている場合や、ピッカーがそれを見逃している場合に便利です。
選択の修正: 親、子、前、次
CSS セレクターが設定されると、Adjust selection: の下に 4 つのボタンが Object Properties パネルに表示されます:
| ボタン | 位置移動 |
|---|---|
↑ Parent | 現在の要素の含まれている要素 |
↓ Child | 現在の要素の最初の子要素 |
← Prev | 現在のレベルでの前の兄弟 |
→ Next | 現在のレベルでの次の兄弟 |
これらは選択を修正する主な方法です。通常のワークフローでは、Pick Element が間違った要素に到達したときには、Child をクリックしてコンテナの最初の内側の要素に移動し、次に Next（または Prev）を使用して、その要素の兄弟を横に移動し、実際に欲しい要素に到達します。もしそれでもまだ高すぎる場合は、再度 Child をクリックして別のレベルに降り、再び横に移動します。各クリックは到達した場所のセレクターを再生成するため、AOI は常にその正確な要素にアンカーされており、その祖先を経由した合成パスではありません。
ボタンが移動先がない場合（Prev 前の兄弟がない、Child 子要素がない要素、または Parent 上の唯一の要素がページの外側の html/body の場合）、何も起こりません。選択はそのままで、エラーメッセージは表示されません。ナビゲーションボタンが反応しないように見える場合、その方向のページ構造の端に達している可能性があるので、別のボタンを試してください。
サイズと位置の微調整
要素がアンカーされると、小さなピクセル単位の修正用の 2 つの追加コントロールが表示されます。これは上記のナビゲーションとは異なります:
Size offset (px, ± per side): トラッキングエリアを X 軸と Y 軸で設定されたピクセル数だけ拡大または縮小し、各側に対して対称に適用します。Position shift (px): サイズを変えずに、トラッキングエリアを設定されたピクセル数だけ移動します。
これを使用するのは、アンカー自体が正しい場合に限ります。これらは既に正しくアンカーされた要素の境界を微調整します。どの要素が追跡されるかを変更するわけではありません。
ウェブサイト AOI は常に長方形で、アンカーされている要素のバウンディングボックスです。ここにはポリゴンやカスタムシェイプのオプションはなく、Labvanced で直接構築された刺激物の AOI とは異なります。追跡する必要がある要素が長方形でない場合は、それを含む最小の長方形の要素にアンカーし、次に Size offset を使用してボックスをトリミングします。
エクスポートデータ用に AOI に名前を付ける
Stimulus Info フィールドは AOI の短いテキストラベルです。選択した要素やナビゲートした要素のテキストから自動的に入力され（テキストがない場合は要素のタグ名になります）より明確なものに編集できます。このラベルは、フレームに AOI が 1 つ以上存在する場合、どの AOI が特定の視線、クリック、またはホバー行に実際に属しているかを示すために、イベントトリガーやエクスポートされたデータ内で Stimulus Info 値として表示されます。
実際のデータを収集し始める前に、各 AOI に異なる Stimulus Info ラベルを付けてください。要素のテキストから自動的に入力されたラベル、たとえば「カートに追加」は単独で問題ありませんが、同じテキストが 1 つ以上の AOI に表示されると混乱します。
テキストフィルター
Text Filter フィールドは、AOI がそのアンカー要素の可視テキストに特定の文字列を含む場合のみアクティブになることを制限します（マッチングは大文字と小文字を区別しません）。これは、アンカーセレクターが可変なテキストを持つ要素と一致する可能性がある場合、たとえばいくつかの状態を間欠的に表示するステータスラベルで、AOI が特定の状態についてのみアクティブとしてカウントされるようにするのに便利です。
スクロール可能なサブリージョンの追跡
アンカーされた要素が内部スクロールを持っている場合、たとえばチャットパネルやページ内部に入れ込まれたスクロール可能な製品リストがある場合は、Scrollable container をチェックしてください。これにより Labvanced にもその要素のスクロール位置とコンテンツの寸法をページの全体的なスクロールとは別に追跡させることができます。
このデータは Eyetracking Gaze/Eyetracking Fixation トリガーを介してのみ公開されますが、Mouse Trigger ではありません。視線がスクロールコンテナ AOI 内にあるとき、値の選択メニューには Container Relative X/Container Relative Y（コンテナの全てのスクロール可能コンテンツ内での位置、現在表示されているものだけではありません）と Container Scroll X/Container Scroll Y（コンテナ自体がどれだけスクロールしたか）が表示されます。同じ AOI に対するマウストリガーの記録については、ウェブサイト AOI のマウス動作の追跡 を参照してください。
AOI が実際に機能していることの確認
現在のページ上でセレクタが何も一致していないため、ターゲット要素がまだ読み込まれていないか、Web Bridge 拡張機能がアクティブでないために、アンカーに失敗した AOI は、デフォルトでは参加者や研究者にエラーを示しません。そのまま非アクティブであり続けます。視線、クリック、またはホバーデータは記録されず、スタディ内の何も目に見えず示されません。
スタディを構築している間は、すべての AOI がエディタ内でカラフルなオーバーレイとして表示されます。緑色はそのセレクターが現在ページ上の要素に一致していることを示し、赤色はそうでないことを示し、その作業中にこれを確認するためにトグルを必要としません。Show AOI overlay in player は、そのオーバーレイを Preview 及びライブスタディ自体に拡張します。これが AOI をエンドツーエンドで確認するためのもので、編集中だけではありません。必ずこれをオンにしてスタディをプレビューし、すべての AOI が緑色になっていることを確認し、その後に参加者がオーバーレイを見ないようにするために再度オフにしてください。
出現または消失する要素 (ダイアログ、モーダル)
ウェブサイト AOI のアンカーは、ページ上に常に存在する必要はありません。この拡張機能は、CSS セレクターが現在何かに一致しているかどうかを継続的にチェックするため、ダイアログ、モーダル、または特定のポイントでのみ表示される他のコンテンツ内の要素にアンカーされた AOI は、その要素が表示されるとアクティブになり、削除されると非アクティブになります。余分な設定は不要です。これにより、一時的にだけ存在する要素とのインタラクションを追跡できます。たとえば、特定のアクションの後に開く確認ダイアログなど、上記で説明した同じアンカー メカニズムを使用しています。
よくある質問
AOI を小さくするためにサイズオフセットを使用するべきですか、それともそれは間違ったツールですか?
Parent、Child、Prev、またはNext を使用して異なるアンカーを選択することであり、既存の AOI を縮小または拡大することではありません。Size offset と Position shift は、アンカー自体が既に正しい場合の小さな修正のために留保してください。 なぜ Pick Element が私がクリックしたものよりも大きなコンテナを選択したのですか?
Child を使用し、その後 Next/Prev で移動します。 Next または Child をクリックしたが何も起こりませんでした。バグですか?
AOI が実際に何かを追跡しているかどうかはどうやってわかりますか?
Object Properties パネルで Show AOI overlay in player を有効にして、スタディをプレビューしてください。緑色はセレクターが現在ページ上の要素に一致していることを示し、赤色はそうでないことを示します。AOI がアンカーできなかった場合、参加者に表示されるエラーはないため、公開前にこれを確認してください。