埋め込まれたウェブサイトでの目の追跡: ウェブブリッジの手順
この手順では、Labvancedの研究内でウェブカメラをベースにした視線、クリック、スクロール行動を実際の外部ウェブサイトで追跡するための全体的な流れをカバーします。必要な拡張機能のインストールから、エクスポートしたデータの読み取りまでを説明します。これは、Kaduk et al., 2024で検証されたピアレビュー済みのウェブカメラ目の追跡パイプラインを使用しており、Labvancedで直接構築された刺激ではなく、ライブウェブサイトに適用されています。
このビデオで全体の手順をご覧ください:
1. これが正しいアプローチですか？
あなたの研究が実際のライブ外部ウェブサイト（製品ページ、ニュース記事、クライアント自身のインターフェース）を埋め込んでいる場合、この手順を使用し、参加者がどのようにそれを見て、クリックし、スクロールするのかを測定する必要があります。もしLabvancedで直接構築された刺激（画像、テキスト、形状）に対して視線を追跡している場合は、代わりにウェブカメラ目の追跡ガイドをご覧ください。両方のパスの全体像については、Labvancedでの目の追跡をご参照ください。
2. まず拡張機能をインストール: すべての参加者が必要です
Labvancedウェブブリッジは、ライブで一般的に利用可能なChrome拡張機能で、あなたとすべての参加者がインストールする必要があります。研究を構築する人だけでなく、必ずインストールしてください。これをスキップすると、最初のサインは、パイロットセッションが失敗することになり、ビルド時の警告ではありません。研究リンクを配布する前に、常に拡張機能がインストールされていることをテストしてください。
Chromeウェブストアからインストールし、完全なウェブブリッジガイドのインストールに従ってください。まだインストールしていない参加者は、研究を続行する前にこのようなプロンプトが表示されます:
3. 研究を作成し、ウェブサイトフレームを追加
Website Frameは、Labvancedの実際の第3のフレームタイプであり、Canvas FrameやPage Frameと同様に追加されます。
- エディタで実験を開きます。
Trial Timelineの下で+ Websiteをクリックします。- フレームに名前を付け、目標ウェブサイトのURLを入力し、拡張機能がその緑の確認メッセージを表示したことを確認してください。表示されない場合は、続行する前にステップ2を再確認してください。
- 埋め込まれたウェブサイトが、エディター内でライブで表示されるようになります。
4. AOIを選択: これは手動のステップです
自動検出はありません。Labvancedは、ウェブサイトのマークアップを読み取って、研究にとって重要なコンテナを推測することはありません。すべての注目領域（AOI）は、手動でクリックしてアンカーを付ける必要があります。
- ウェブサイトフレームを開いて埋め込まれたサイトがインタラクティブである状態で、AOIアイコンをクリックします。これは、ウェブサイトフレームが選択されているときに表示されるツールバーの最上部のアイコンです（ツールチップ:
Add Website AOI）。 - AOIが赤色で表示されます。埋め込まれたウェブサイトでターゲット要素（製品画像、見出し、ボタン）をクリックします。アンカーが付くと選択が緑色になります。
Parent,Child,Prev, およびNextをObject Propertiesパネルで使用して、選択内容をページ内の要素ツリーを通じて上下または横に移動します。アンカーの領域が広すぎる場合、狭すぎる場合、または要素が1つずれている場合があります。これらのコントロールの完全なメカニズム、さらにText Filter,Scrollable container、および特定のAOIが実際にアンカーされているかどうかを確認する方法については、ウェブサイトAOIの選択と調整を参照してください。Resolution（デスクトップ対モバイル）は、AOIのプロパティではなく、ウェブサイトフレーム自体のプロパティにあります。異なる画面サイズでのアンカーされたAOIが正しく着地しているかどうかをプレビューするために使用します。
- 追跡したい各要素について繰り返します。
AOIが読み込んだページとは異なるページにある場合
ウェブサイトフレームには、1つの開始URLしかありません。必要な要素が、たとえば「カートに追加」ボタンのようにサイトの別のページにある場合、そのページに埋め込まれたサイトを最初にナビゲートし（またはフレームのURL設定を直接指す）、同様の方法でそこでAOIにアンカーを付けます。フレームに追加したすべてのAOIは、サイドパネルにリストされます。
5. 視線データを記録: イベントを追加
AOI自体では何も記録されません。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ターゲットに適用されています。視線データの記録とエクスポートと目の追跡視線トリガーのリファレンスで、このイベント、オートメーション設定ダイアログ、およびキャリブレーションエラーの記録に関する詳細を確認してください。
ウェブブリッジは、同じAOIに対して非視線行動データも報告します: 要素の位置、クリック、ホバー、マウスの動き、およびスクロール位置。各データの記録方法については、完全なガイドのトラッキングされる内容を参照してください。
6. オプション: パイロット用の視線インジケーターを追加
ウェブサイトフレームが選択されているときに表示されるツールバーには、Add Website AOIのすぐ隣にAdd Gaze Indicatorと呼ばれる2つ目のアイコンがあります。それをクリックすると、Labvancedはフレームに小さな赤い円形マーカーを追加し、再生中にマーカーの位置を現在の視線座標に更新する自動生成されたupdate gaze positionイベントを作成します。
これはパイロット支援です: 研究をテストしている間、自分の視線がどこに当たるかを観察できるようにします。これはデータとして記録されることはなく、参加者には必要ないものです。
7. カメラのプロンプト前に参加者を分割する必要がある場合
研究がカメラアクセスプロンプトが表示される前に、参加者をウェブカメラ目の追跡フローに送る必要がある場合、参加者の選択、タスクパフォーマンス、自動グループ割り当て、またはリクルートリンクの分割によるものであっても、これはウェブサイトフレームに特有のものではない別の一般的な分岐研究パターンです。設定方法については、条件付きウェブカメラ目の追跡を参照してください。
8. テストしてエクスポートを読む
拡張機能がインストールされた状態でタスクをプレビューし、ウェブサイトが正しく読み込まれ、AOIが期待通りにアンカーされることを確認してください。公開と共有に従って満足したら公開します。
視線データは、Dataview & Exportタブのタイムシリーズ行として他のウェブカメラ目の追跡データと同じようにエクスポートされます。視線データのエクスポートを参照してX, Y, T, C列を読み解く方法を確認してください。
その他の情報、研究者および参加者向けのインストールの詳細、完全なユースケース、データおよびプライバシーの特性、トラブルシューティングについては、以下のリンクにある完全なLabvancedウェブブリッジガイドを参照してください。
よくある質問
Chromeに追加をクリックし、確認ダイアログで拡張機能を追加をクリックし、研究に戻ってページをリフレッシュして研究を開始します。参加者のステップについては、完全なウェブブリッジガイドのインストールを参照してください。