ウェブサイト AOI の選択と調整
ウェブサイト AOI は固定された画面位置をトラッキングしません。それは埋め込まれたページ内の特定の要素、CSS セレクタで特定されたアンカーと呼ばれる要素をトラッキングします。AOI が正しい要素に着地することは、ほとんどそれらを選択し調整することに関係しており、サイズ変更の問題ではありません。このページでは、Website AOI Object Properties パネル内の制御をフルセットでカバーします：要素の選択、Parent、Child、Prev、および Next による選択の修正、サイズと位置の微調整、エクスポートデータ用のAOIに名前を付けること、テキストでのフィルタリング、要素内のスクロールのトラッキング、および公開前に AOI が実際に機能するかどうかを確認すること。
ウェブサイトフレームと最初のAOIを追加する基本情報については、フルウェブブリッジガイドの 興味領域 (AOI) の選択 または、ウェブサイトフレームのウォークスルー を参照してください。
注意: ウェブサイト AOI を選択すると、一般的な Object Properties ブロック (Name, Visibility, Active, Position & Size) と Labvanced のすべてのオブジェクトタイプに共有される Anchor グリッドコントロールという2つの別のパネルが表示されます。この一般的なパネルの Anchor グリッドは、次に説明するCSSセレクタアンカーとは無関係な位置/スケールリファレンスポイントであり、その Position & Size フィールドはウェブサイト AOI が何をトラッキングするかを決定するものではありません。代わりに、以下の CSS セレクタのコントロールを使用してください。
アンカー: AOI がスクロールに耐える理由
すべてのウェブサイト AOI は、CSS Selector フィールドの CSS セレクタを保存します。そのセレクタが AOI のアンカーです：AOI がバインドされている埋め込まれたページの DOM 内の唯一の要素です。アンカー要素がページ上に存在する限り、Labvanced Web Bridge 拡張機能は、ページをスクロールしている間も、そのライブ位置を Labvanced に報告し続けます。これが、正しくアンカーされた 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 を持つ要素やリンク、ボタン、入力のような自然にインタラクティブな要素を優先し、近くに見つからない場合は、代わりに近くのコンテナにフォールバックします。実際には、見出しやカード内のテキストをクリックすると、しばしばその見出しだけでなく、全体のカードが選択されます。その場合は、以下のナビゲーションコントロールを使用して、意図した正確な要素に移動してください。
選択中にいつでも Esc を押して、AOI の現在のセレクタを変更せずにキャンセルできます。また、ピッカー全体をスキップし、CSS Selector フィールドに CSS セレクタを直接入力または貼り付けることもできます。これは、既に望むセレクタを知っている場合や、ピッカーが見落としている場合に便利です。
選択の修正: 親、子、前、次
CSS セレクタが設定されると、Adjust selection: の下に4つのボタンが Object Properties パネルに表示されます：
| ボタン | 移動先 |
|---|---|
↑ Parent | 現在の要素の親要素 |
↓ Child | 現在の要素の最初の子要素 |
← Prev | 現在のレベルの前の兄弟 |
→ Next | 現在のレベルの次の兄弟 |
これらは、選択を修正するための主な方法であり、サイズ変更よりも重要です。Pick Element が間違った要素に着地したときの典型的なワークフロー：Child をクリックしてコンテナの最初の内側の要素に移動し、次に Next (または Prev) をクリックして、その要素の兄弟間を横移動し、実際に望む要素に到達します。それでも高すぎる場合は、もう一度 Child をクリックしてさらにもう1レベル降下し、再度横移動します。クリックごとに、着地した場所のセレクタが再生成されるため、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 の短いテキストラベルです。選択またはナビゲーションする要素のテキスト（テキストがない場合は要素のタグ名）から自動的に入力され、より明確なものに編集できます。このラベルは、イベントトリガーおよびエクスポートデータにおける Stimulus Info 値として表示され、与えられた注視、クリック、またはホバーロウが実際にどの AOI に属するかを判断する方法です。
実データを収集し始める前に、各 AOI に異なる Stimulus Info ラベルを付けてください。要素のテキストから自動入力されたラベル（例: "カートに追加"）は、単独でも問題ありませんが、同じテキストが複数の 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 が実際に機能するかの検証
現在のページ上の何にも一致しないセレクタのために AOI がアンカーできない場合、ターゲット要素がまだ読み込まれていない場合、またはWeb ブリッジ拡張機能がアクティブでない場合、デフォルトでは、参加者や研究者にエラーは表示されません。そして、それは単に非アクティブ状態を維持します: それに対する注視、クリック、またはホバーデータは記録されず、研究内の何も目に見えて示されません。
研究を構築している間、すべての AOI はすでにエディタ内で色付きのオーバーレイとしてレンダリングされます。緑はそのセレクタが現在ページ上の要素と一致していることを意味し、赤は一致していないことを意味します。作業中にこれを確認するためにトグルは必要ありません。Show AOI overlay in player は、Preview およびライブスタディ自体に同じオーバーレイを拡張し、AOI の確認は編集中だけでなく、エンドツーエンドで行われます。これをオンにして少なくとも一度あなたの研究をプレビューし、すべての AOI が緑であることを確認してください。その後、参加者にオーバーレイを見せたくない場合は、公開前に再びオフにしてください。
表示または消失する要素（ダイアログ、モーダル）
ウェブサイト AOI のアンカーは、ページ上にずっと存在する必要はありません。拡張機能は CSS セレクタが現在何かに一致するかどうかを継続的にチェックするため、ダイアログ、モーダル、または他の特定のポイントでのみ表示されるコンテンツ内の要素にアンカーされた AOI は、その要素が表示されるとアクティブになり、削除されると非アクティブになります。これにより、確認ダイアログが特定のアクションの後に開くような、一時的にのみ存在する要素とのインタラクションをトラッキングできます。また、上記で説明したのと同じアンカー機構を用いています。
よくある質問
AOI を小さくするためにサイズオフセットを使用すべきですか、それともそれは間違ったツールですか？
Parent、Child、Prev、または Next を使用して異なるアンカーを選択することにあり、既存のものを縮小または拡張することではありません。Size offset と Position shift は、アンカー自体がすでに正しい場合の小さな修正のために温存してください。 なぜピック要素が私がクリックしたより大きなコンテナを選択したのですか？
Child を使用し、その後 Next/Prev を使用して、正確な要素に詰め下げてください。 次または子をクリックしても何も起こりません。これはバグですか？
AOI が実際に何かをトラッキングしているかどうかはどうやって分かりますか？
Object Properties パネル内で Show AOI overlay in player を有効にし、研究をプレビューします。緑はセレクタが現在ページ上の要素と一致していることを意味し、赤は一致していないことを意味します。AOI がアンカーできない場合、参加者向けのエラーはありませんので、公開前にこれを確認してください。