シングルページアプリケーション

シングルページアプリケーションについて

シングルページアプリケーション (SPA) は、特殊なタイプの Web アプリです。SPA では、Web サイトの入力時に 1 つのページがロードされ、その時点から、ナビゲートした同じページに後続のすべてのコンテンツがロードされます。これは通常のウェブサイトのように動作するようになりますが、「ページ」を切り替えると、ページは実際にはリロードされません。

デフォルトでは、デプロイコードは Web ページがロードされるとすぐに実行されます。ただし、ページ間をナビゲートしても SPA はリフレッシュされないため、ページ間をナビゲートしても、デプロイメントコードが再評価されることはありません。以下に示す手法を使用することで、SPA サイトでデプロイコードをシームレスに機能させることができます。

URL 変更時のインターセプトロジックの自動再評価

シングルページアプリケーションがユーザーナビゲーションのクライアント側ルーティングに依存している場合は、URL がウェブサイトフィードバックプロジェクトレベルで変更されたときにインターセプト再評価ロジックを有効にすることで、後続の URL 変更時にインターセプトの再評価を強制できます。この設定を選択すると、初期ページのロード時に行われる評価に加えて、インターセプトロジック評価が可能になります。

インターセプトロジックの自動再評価を有効化するには、以下の手順に従います。

1. ウェブサイトフィードバックプロジェクトで、［設定］に移動します。
2. ［プロジェクトを管理］をクリックします。
3. ドロップダウンメニューからプロジェクトオプションを選択します。
4. シングルページアプリ (SPA) サポートセクションで、URL の変更時にインターセプトロジックを再評価してください。

QSI.API.run();

JavaScript API を使用したマニュアル実装

この方法では、手動で実行するためにデプロイコードを切り替える方法の概要を示します。  つまり、デプロイコードは、適切な JavaScript API 要求が開始されるまで、関連するロジックを実行または評価しません。

マニュアル実装

1. 設定タブにナビゲートします。
   
2. プロジェクト管理ドロップダウンをクリックします。
3. ［プロジェクトオプション］を選択します。
4. [プロジェクトの手動ロード] オプションを有効化します。
   
5. ［インターセプト］タブに戻り、必要に応じて［インターセプト］または［アクションセット］にロジックを設定します。
   
6. デプロイコードを Web サイト（できればグローバルヘッダーまたはフッター）に配置し、すべてのページにロードされるようにします。
7. ウェブサイトにインターセプトの参照回数に基づいて、適切なJavaScriptAPIリクエストを追加します。これらの依頼については、以下のセクションを参照してください。

JavaScript API 要求

Qualtricsが単一のインスタンスでプロジェクトを評価する場合は、次の 2 つのリクエストを使用します。

1. この要求では、ページのインターセプトとクリエイティブのデプロイコードがロードされます。”load” API は、コードがあるページを再ロードすることと同じです。

   QSI.API.load();

   ヒント：プロジェクト設定で［プロジェクトを手動でロード］を有効にしている場合、初期ページのロード時にこの API を呼び出してデプロイコードをロードする必要はありません。リロードなしで発生するページ上の状態変更を考慮して、強制的にロードする必要があります。
2. これにより、デプロイコード評価が開始され、クリエイティブが表示条件を満たした場合に表示されます。

   QSI.API.run();

Qualtricsで同じページでプロジェクトコードを複数回評価する場合は、次の3つの手順を毎回繰り返します。

1. この要求により、ページに存在するインターセプトまたはクリエイティブのデプロイコードが削除されます。

   QSI.API.unload();

2. これにより、ページのインターセプトまたはクリエイティブのデプロイコードがロードされます。これは、ページのリロードと同じです。

   QSI.API.load();

3. これにより、デプロイコード評価が開始され、クリエイティブが表示条件を満たした場合に表示されます。

   QSI.API.run();

FAQ