埋め込まれたウェブサイト上での視線追跡：Web Bridge手順
この手順では、Labvancedの研究の中で実際の外部ウェブサイト上のウェブカメラベースの視線、クリック、およびスクロール動作を追跡するための全体の道筋を説明します。必要な拡張機能のインストールから、エクスポートしたデータの読み取りまでをカバーします。これは、Labvancedに直接構築された刺激の代わりにリアルタイムのウェブサイトに適用された、Kaduk et al., 2024で検証された査読済みのウェブカメラ視線追跡パイプラインを使用しています。
1. これが正しいアプローチですか？
あなたの研究が実際の、ライブの外部ウェブサイト（製品ページ、ニュース記事、クライアント自身のインターフェース）を埋め込んでいて、参加者がそれをどのように見るか、クリックするか、スクロールするかを測定する必要がある場合は、この手順を使用してください。もしLabvancedに直接構築された刺激（画像、テキスト、形状）上の視線を追跡している場合は、代わりにウェブカメラ視線追跡ガイドを参照してください。両方の道筋の全体像を見たい場合は、Labvancedにおける視線追跡を参照してください。
2. 最初に拡張機能をインストールしてください：全ての参加者が必要です
Labvanced Web Bridgeはライブで一般に利用可能なChrome拡張機能で、あなたと全ての参加者によってインストールされる必要があります。研究を構築した人だけではありません。これをスキップすると、何かがおかしいことの最初のサインはパイロットセッションの失敗になります。常に、研究リンクを配布する前に拡張機能がインストールされた状態でテストしてください。
Chrome Web Storeからインストールし、完全なWeb Bridgeガイドのインストールを参照してください。インストールしていない参加者は、研究を続行する前にLabvanced Web Bridgeブラウザ拡張機能をインストールするよう求められるプロンプトが表示されます：
3. 研究を作成し、ウェブサイトフレームを追加する
Website FrameはLabvancedでの本物の第三種フレームタイプで、Canvas FrameおよびPage Frameと同様に追加されます。
- エディタで実験を開きます。
Trial Timelineの下で、+ Websiteをクリックします。- フレームに名前を付け、ターゲットウェブサイトのURLを入力し、拡張機能が緑色の確認メッセージを表示することを確認します。表示されない場合は、次に進む前にステップ2を再確認してください。
- 埋め込まれたウェブサイトがエディタ内のフレームにライブ表示されます。
4. AOIを選択する：これは手動ステップです
自動検出はありません。Labvancedはウェブサイトのマークアップを読み取って、研究に関連するコンテナを推測することはありません。全ての興味のあるエリア（AOI）は、手動でクリックして固定するコンテナです。
- ウェブサイトフレームを開き、埋め込まれたサイトがインタラクティブな状態で、AOIアイコンをクリックします。これは、ウェブサイトフレームが選択されているときに表示されるツールバーの上部のアイコンです（ツールチップ：
Add Website AOI）。 - AOIが赤色で表示されます。埋め込まれたウェブサイト上のターゲット要素をクリックします（製品画像、見出し、ボタン）。固定されると選択は緑色に変わります。
Parent,Child,Prev,Nextを使用して、固定したエリアが広すぎたり狭すぎたり、あちこちずれている場合、ページの要素ツリーを上下または横に移動します。Resolution（デスクトップ対モバイル）は、AOIのプロパティではなくウェブサイトフレームのプロパティに存在します。異なる画面サイズでAOIが正しく固定されているかをプレビューするために使用します。
- トラッキングしたい各要素について繰り返します。
AOIが読み込んだページとは異なるページにある場合
ウェブサイトフレームには一つの開始URLしかありません。例えば、製品ページにしか存在しない「カートに追加」ボタンのような要素が必要な場合は、まず埋め込まれたサイトをそのページにナビゲートします（またはフレームの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、変数の設定はフォーマットArrayおよび記録タイプAll changes / time series、その後、値の選択メニューでCoord. + Time + Confidence [X,Y,T,C] ArrayをTrigger (Eyetracking Gaze)オプションから選択します。
これは、Labvancedで構築された刺激に対する視線追跡に使用されるものと同じトリガーとアクションのパターンで、代わりにウェブサイトAOIターゲットに適用されます。視線データの記録とエクスポートに関する詳細は、視線データの記録とエクスポートと視線トリガーリファレンスで確認できます。
Web Bridgeは、同じAOIのために視線以外の行動データも報告します：要素の位置、クリック、ホバー、マウスマウントの動き、およびスクロール位置。それぞれの記録方法については完全なガイドの何が追跡されるかを参照してください。
6. オプション：パイロット用の視線インジケーターを追加する
ウェブサイトフレームが選択されているときに表示されるツールバーには、Add Website AOIの隣にAdd Gaze Indicatorという二番目のアイコンがあります。これをクリックすると、Labvancedがフレームに小さな赤い円形マーカーを追加し、マーカーの位置を再生中に現在の視線座標に更新する自動的に作成されたupdate gaze positionイベントが生成されます。
これはパイロット用の補助具です：研究をテスト中に自分の視線がどこに注がれているかを観察することができます。データとして記録されることはなく、参加者が必要とするものでもありません。
7. ウェブカメラのオプトイン/オプトアウトの経路が必要な場合
あなたの研究が参加者にウェブカメラ視線追跡を有効にするかどうかを決定させる必要がある場合、カメラアクセスのプロンプトが表示される前に、それは別の一般的な分岐研究パターンです。ウェブサイトフレームに特有のものではありません。それに関する専用の手順は計画されています。公開される前に必要な場合は、[email protected]に連絡してください。
8. テストとエクスポートを読み取る
拡張機能がインストールされた状態でタスクをプレビューし、ウェブサイトが正しく読み込まれ、AOIが期待通りに固定されていることを確認します。満足したら、公開と共有に従って公開してください。
あなたの視線データは、Dataview & Exportタブでの他のウェブカメラ視線追跡データと同じようにエクスポートされます。視線データのエクスポートを参照して、X, Y, T, C列を読む方法を確認してください。
他の全てのことについては、研究者と参加者の両方に対するインストールの詳細、全使用例、データおよびプライバシーの詳細、トラブルシューティングについては、以下にリンクされた完全なLabvanced Web Bridgeガイドを参照してください。