埋め込まれたウェブサイトでのアイトラッキング：ウェブブリッジの手順

この手順は、Labvancedの研究内で、必須の拡張機能のインストールからエクスポートされたデータの読み取りまでの、実際の外部ウェブサイトでのウェブカメラに基づく視線、クリック、およびスクロールの動作を追跡するための完全なルートをカバーします。これは、Labvanced内で直接構築された刺激ではなく、ライブのウェブサイトに適用された同じ査読されたウェブカメラアイトラッキングパイプラインを使用します。Kaduk et al., 2024で検証されています。

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

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

2. まず拡張機能をインストール：すべての参加者が必要です

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

Chromeウェブストアからインストールし、完全なウェブブリッジガイドのインストールに従ってください。まだインストールしていない参加者は、研究を続行する前にこのようなプロンプトを表示します。

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およびRecord Type 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ウェブブリッジガイドを参照してください。

よくある質問

さらなる読書