埋め込まれたウェブサイトでの目追跡：ウェブブリッジ手順

この手順では、Labvanced研究内で実際の外部ウェブサイトにおけるウェブカメラベースの注視、クリック、スクロール動作を追跡するための完全な手順を説明します。必要な拡張機能のインストールから、エクスポートされたデータの読み取りまでを扱っています。これは、Labvancedに直接作成された刺激ではなく、ライブウェブサイトに適用された査読されたウェブカメラ目追跡パイプラインと同じものを使用しています。このパイプラインはKaduk et al., 2024で検証されています。

1. これは正しいアプローチですか？

実際のライブ外部ウェブサイト（製品ページ、ニュース記事、クライアント独自のインターフェース）を組み込んだ研究を行い、参加者がそれをどのように見て、クリックし、スクロールするかを測定する必要がある場合は、この手順を使用してください。代わりにLabvancedに直接構築された刺激（画像、テキスト、形状）で注視を追跡している場合は、ウェブカメラ目追跡ガイドを参照してください。両方のパスの全体像については、Labvancedの目追跡をご覧ください。

2. 最初に拡張機能をインストールしてください：すべての参加者が必要です

Labvanced Web Bridgeは、ライブで一般に利用可能なChrome拡張機能で、あなたとすべての参加者がインストールする必要があります。研究を構築する人だけでなく、すべての参加者がインストールする必要があります。これをスキップすると、最初の兆候はパイロットセッションの失敗になります。ビルド時の警告ではありません。常に、研究リンクを配布する前に、拡張機能がインストールされているかテストしてください。

Chromeウェブストアからインストールし、完全なWeb Bridgeガイドのインストールを参照してください。まだインストールしていない参加者は、研究を続ける前に次のようなプロンプトが表示されます：

3. 研究を作成し、ウェブサイトフレームを追加します

Website FrameはLabvanced内の実際の第3のフレームタイプで、Canvas FrameおよびPage Frameと同様に追加されます。

1. エディタで実験を開きます。
2. Trial Timelineの下で、+ Websiteをクリックします。
3. フレームの名前を付け、ターゲットウェブサイトのURLを入力して、拡張機能がその緑の確認メッセージを表示することを確認します。表示されない場合は、続行する前に手順2を再確認してください。
4. 埋め込まれたウェブサイトがエディタのフレーム内でリアルタイムで表示されます。

4. AOIを選択します：これは手動のステップです

自動検出はありません。Labvancedはウェブサイトの独自のマークアップを読み込んで、あなたの研究に重要なコンテナを推測することはありません。すべての興味領域（AOI）は、手動でクリックしてアンカーを設定するコンテナです。

1. ウェブサイトフレームを開き、埋め込まれたサイトがインタラクティブな状態であることを確認し、AOIアイコン（ウェブサイトフレームが選択されたときに表示されるツールバーの最上部アイコン、ツールチップ:Add Website AOI）をクリックします。
2. AOIが赤で表示されます。埋め込まれたウェブサイト上のターゲット要素（製品画像、見出し、ボタン）をクリックします。アンカーが設定されると、選択は緑に変わります。

3. Parent、Child、Prev、およびNextをObject Propertiesパネル内で使用して、選択範囲が広すぎる、狭すぎる、または1つの要素がずれている場合は、ページの要素ツリー内を上下または横に移動します。
   • Resolution（デスクトップとモバイル間）はウェブサイトフレームの独自のプロパティにあり、AOIのものではありません。異なる画面サイズでアンカーが設定されたAOIが正しく表示されるかをプレビューするために使用します。
4. 追跡したい各要素について繰り返します。

複数のページにAOIがある場合

ウェブサイトフレームには、1つの開始URLしかありません。必要な要素がウェブサイトの別のページにある場合（たとえば、製品ページにのみ存在する「カートに追加」ボタンなど）、埋め込まれたサイトをそのページに最初にナビゲートするか（またはフレームの独自のURL設定を直接指すか）、そのAOIを同じ方法でアンカーします。フレームに追加したすべてのAOIはサイドパネルに表示されます。

5. 注視データを記録します：イベントを追加します

AOI自体は何も記録しません。その上での注視は、変数にキャプチャするイベントを構築した場合にのみデータになります：

1. イベントエディタから新しいイベントを追加します。
2. トリガーとして、Physiological Signal Triggers → Eyetracking Gazeを選択します。
3. 特定の要素でのみトリガーを引くオプションを選択し、ターゲットとしてAOIを追加します。
4. イベントに名前を付けます。この時点でEyetracking Gaze Event Setupダイアログが自動的に表示され、記録アクションを構築する提案が表示されます。デフォルトでチェックされているRecord gaze timeseries [X,Y,T,C]を受け入れると、LabvancedはAOIを対象としたSet / Record Variableアクションを下に作成します。
5. そのダイアログをスキップするか閉じた場合は、代わりに手動で構築します：アクション Variable Actions → Set / Record Variable、変数はFormat 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という2番目のアイコンがあります。それをクリックすると、Labvancedはフレームに小さな赤い円形マーカーを追加し、再生中にマーカーの位置を現在の注視座標に更新する自動的に作成されたupdate gaze positionイベントが作成されます。

これはパイロット補助ツールです：研究をテストしている間に自分の注視がどこに向かうかを確認できます。データとして記録されず、参加者が必要としないものです。

7. カメラプロンプトの前に参加者を分ける必要がある場合

研究が、カメラアクセスプロンプトが表示される前に、参加者の一部だけをウェブカメラ目追跡フローに移行させる必要がある場合（参加者の選択、タスクのパフォーマンス、自動グループ割り当て、または募集リンクの分割によるもの）、これはウェブサイトフレームに特有のものではなく、別の一般的な分岐型研究パターンです。条件付きウェブカメラ目追跡を参照して、設定方法を確認してください。

8. テストとエクスポートの読み取り

拡張機能がインストールされている状態でタスクをプレビューし、ウェブサイトが正しく読み込まれ、AOIが予想通りにアンカーされることを確認します。満足したら、公開と共有に従って公開します。

あなたの注視データは、Dataview & Exportタブ内の時系列行と同じ方法でエクスポートされます。注視データのエクスポートを参照して、X、Y、T、およびC列をどのように読み取るかを確認してください。

他のすべて、研究者と参加者のためのインストールの詳細、完全な使用例、データとプライバシーの詳細、およびトラブルシューティングについては、以下の完全なLabvanced Web Bridgeガイドを参照してください。

よくある質問

さらなる情報