埋め込まれたウェブサイトでの視線追跡：ウェブブリッジの手順
この手順では、必要な拡張機能のインストールからエクスポートしたデータの読み取りまで、Labvancedの研究内の実際の外部ウェブサイトに対するウェブカメラベースの視線、クリック、スクロールの動作を追跡するための完全な手順を説明します。これは、Labvancedで直接作成された刺激の代わりに、ライブウェブサイトに適用された同じピアレビュー済みのウェブカメラ視線追跡パイプラインを使用しています。Kaduk et al., 2024で検証されました。
この動画で完全な手順を視聴してください：
1. これが正しいアプローチですか？
参加者が実際の、ライブの外部ウェブサイト（製品ページ、ニュース記事、クライアント自身のインターフェース）を埋め込んでいる研究を行っていて、参加者がそれを見て、クリックし、スクロールする様子を測定する必要があるなら、この手順を使用してください。代わりにLabvancedで直接作成された刺激（画像、テキスト、形状）を追跡している場合は、ウェブカメラ視線追跡ガイドを参照してください。両方のパスの全体像については、Labvancedにおける視線追跡を参照してください。
2. まず拡張機能をインストールしてください：すべての参加者が必要です
Labvancedウェブブリッジは、ライブ版で一般的に利用可能なChrome拡張機能であり、あなたとすべての参加者がインストールする必要があります。研究を構築する人だけではありません。この作業をスキップすると、最初の異常は失敗したパイロットセッションになり、構築中の警告ではありません。常に拡張機能をインストールした状態でテストしてから、研究リンクを配布してください。
Chromeウェブストアからインストールし、完全なウェブブリッジガイドのインストールを参照してください。まだインストールしていない参加者は、研究が開始される前にこのようなプロンプトを表示します：
3. 研究を作成し、ウェブサイトフレームを追加する
Website Frameは、Canvas FrameおよびPage Frameと並ぶLabvancedの実際の第3フレームタイプであり、同じ方法で追加されます。
- エディタで実験を開きます。
Trial Timelineの下で、+ Websiteをクリックします。- フレームに名前を付け、対象ウェブサイトのURLを入力し、拡張機能が緑の確認メッセージを表示することを確認します。表示されない場合は、続行する前にステップ2を再確認してください。
- 埋め込まれたウェブサイトが、エディタ内のフレーム内でライブ表示されるようになります。
4. AOIを選択する：手動のステップです
自動検出はありません。Labvancedは、ウェブサイトのマークアップを読み取って、あなたの研究にとって重要なコンテナを推測することはありません。すべての興味領域（AOI）は、手動でクリックしてアンカーを付けるコンテナです。
- ウェブサイトフレームが開いていて埋め込まれたサイトがインタラクティブであるときに、AOIアイコンをクリックします。これは、ウェブサイトフレームが選択されたときに表示されるツールバーの最上部のアイコンです（ツールチップ：
Add Website AOI）。 - AOIが赤で表示されます。埋め込まれたウェブサイトでターゲット要素（製品画像、見出し、ボタン）をクリックします。アンカーを付けると緑色に変わります。
Parent、Child、Prev、NextをObject Propertiesパネルで使用して、選択された要素ツリーをページの要素木を通じて上、下、または横に移動します。アンカー付けされた領域が広すぎたり狭すぎたり、1つの要素からずれている場合には、そちらを調整します。これらのコントロールの完全なメカニクスについては、ウェブサイトAOIを選択および調整するを参照してください。また、Text Filter、Scrollable container、公開前にAOIが確実にアンカー付けされていることを確認する方法を確認します。Resolution（デスクトップ対モバイル）は、AOIのプロパティではなくウェブサイトフレームのプロパティに存在します。異なる画面サイズでAOIが正しく配置されているかを確認するために使用します。
- 追跡したい各要素について繰り返します。
AOIが読み込んだページとは異なるページにある場合
ウェブサイトフレームには開始URLが1つだけあります。必要な要素がサイトの別のページにある場合、たとえば製品ページにしか存在しない「カートに追加」ボタンがある場合、最初に埋め込まれたサイトのそのページにナビゲートし（またはフレームのURL設定をそこに直接ポイントさせ）、同じ方法でAOIをそこにアンカー付けしてください。フレームに追加したすべてのAOIは側面パネルにリスト表示されます。
5. 視線データを記録する：イベントを追加する
AOI単独では何も記録されません。それの視線は、変数にキャプチャするイベントを構築したときにのみデータになります：
- イベントエディタから新しいイベントを追加します。
- トリガーとして、
Physiological Signal Triggers→Eyetracking Gazeを選択します。 - 特定の要素でのみトリガーを有効にするオプションを選択し、AOIをターゲットとして追加します。
- イベントに名前を付けます。この時点で
Eyetracking Gaze Event Setupダイアログが自動的に表示され、記録アクションを構築する提案をします。Record gaze timeseries [X,Y,T,C]（デフォルトでチェックされています）を受け入れ、LabvancedはあなたのAOIをターゲットとするSet / Record Variableアクションを下に作成します。 - そのダイアログをスキップまたは閉じると、手動で構築します：アクション
Variable Actions→Set / Record Variable、変数をFormatArrayおよびRecord TypeAll changes / time seriesに設定し、値選択メニューでCoord. + Time + Confidence [X,Y,T,C] ArrayをTrigger (Eyetracking Gaze)オプションから選択します。
これは、Labvancedで構築された刺激に対する視線追跡に使用される同じトリガーとアクションのパターンであり、ウェブサイトAOIターゲットに適用されています。視線データの記録とエクスポートと視線トリガーのリファレンスで、このイベントの詳細、セットアップダイアログの自動化、キャリブレーションエラーの記録についての全情報を確認してください。
ウェブブリッジは、同じAOIの非視線行動データも報告します：要素の位置、クリック、ホバー、マウスの動き、スクロール位置。他の追跡されるものについては、完全なガイドの何が追跡されるかを参照してください。
6. オプション：パイロット用の視線インジケーターを追加する
ウェブサイトフレームが選択されたときに表示されるツールバーには、Add Website AOIのすぐ隣にAdd Gaze Indicatorと呼ばれる2番目のアイコンがあります。それをクリックすると、Labvancedがフレームに小さな赤い円形マーカーを追加し、再生中にマーカーの位置を現在の視線座標に更新する自動生成されたupdate gaze positionイベントが作成されます。
これはパイロット支援です。テスト中に自分の視線がどこに向かっているかを確認できます。データとして記録されず、参加者が必要とするものではありません。
7. カメラプロンプトの前に参加者を分割する必要がある場合
研究がカメラアクセスのプロンプトが表示される前に、ほんの一部の参加者をウェブカメラ視線追跡フローに送信する必要がある場合、それが参加者の選択、タスクのパフォーマンス、自動グループ割り当て、または募集リンクの分割によるものであるかどうかは、ウェブサイトフレームに特有のものではなく、別の一般的な分岐研究パターンです。設定方法については、条件付きウェブカメラ視線追跡を参照してください。
8. テストし、エクスポートを読み取る
拡張機能をインストールした状態でタスクをプレビューし、ウェブサイトが読み込まれ、AOIが期待どおりにアンカー付けされていることを確認します。満足したら公開し、完全なガイドの公開と共有を参照してください。
視線データは、他のウェブカメラ視線追跡データと同じ方法でエクスポートされます：Dataview & Exportタブの時系列行として。X、Y、T、およびC列を読み取る方法については、視線データのエクスポートを参照してください。
その他すべてについては、研究者および参加者向けのインストールの詳細、完全な使用事例、データとプライバシーの具体的な情報、トラブルシューティングについて、以下の完全なLabvancedウェブブリッジガイドを参照してください。
よくある質問
Chromeに追加をクリックし、確認ダイアログで拡張機能を追加をクリックします。その後、実験に戻り、ページをリフレッシュして研究を開始します。完全な参加者の手順については、[インストール](../../guide/web-bridge-extension/#_2-installation)を参照してください。 
