-
Customer Experience -
Employee Experience -
Brand Experience -
Core XM -
Design XM
シングルページアプリケーション
シングルページアプリケーションについて
シングルページアプリケーション (SPA) は、特殊なタイプの Web アプリです。SPA では、Web サイトの入力時に 1 つのページがロードされ、その時点から、ナビゲートした同じページに後続のすべてのコンテンツがロードされます。これは通常のウェブサイトのように動作するようになりますが、「ページ」を切り替えると、ページは実際にはリロードされません。
デフォルトでは、デプロイコードは Web ページがロードされるとすぐに実行されます。ただし、ページ間をナビゲートしても SPA はリフレッシュされないため、ページ間をナビゲートしても、デプロイメントコードが再評価されることはありません。以下に示す手法を使用することで、SPA サイトでデプロイコードをシームレスに機能させることができます。
URL 変更時のインターセプトロジックの自動再評価
シングルページアプリケーションがユーザーナビゲーションのクライアント側ルーティングに依存している場合は、URL がウェブサイトフィードバックプロジェクトレベルで変更されたときにインターセプト再評価ロジックを有効にすることで、後続の URL 変更時にインターセプトの再評価を強制できます。この設定を選択すると、初期ページのロード時に行われる評価に加えて、インターセプトロジック評価が可能になります。
インターセプトロジックの自動再評価を有効化するには、以下の手順に従います。
- ウェブサイトフィードバックプロジェクトで、［設定］に移動します。
- ［プロジェクトを管理］をクリックします。
- ドロップダウンメニューからプロジェクトオプションを選択します。
- シングルページアプリ (SPA) サポートセクションで、URL の変更時にインターセプトロジックを再評価してください。
注意: この SPA 設定をインターセプトレベルオプションとともに使用してカスタム Javascript コードで (マニュアルで) 表示する場合は、引き続き
を呼び出す必要があります。
QSI.API.run();インターセプトを各 SPA ページに表示するためのメソッドです。
JavaScript API を使用したマニュアル実装
この方法では、手動で実行するためにデプロイコードを切り替える方法の概要を示します。 つまり、デプロイコードは、適切な JavaScript API 要求が開始されるまで、関連するロジックを実行または評価しません。
マニュアル実装
- 設定タブにナビゲートします。
- プロジェクト管理ドロップダウンをクリックします。
- ［プロジェクトオプション］を選択します。
- [プロジェクトの手動ロード] オプションを有効化します。
- ［インターセプト］タブに戻り、必要に応じて［インターセプト］または［アクションセット］にロジックを設定します。
- デプロイコードを Web サイト（できればグローバルヘッダーまたはフッター）に配置し、すべてのページにロードされるようにします。
- ウェブサイトにインターセプトの参照回数に基づいて、適切なJavaScriptAPIリクエストを追加します。これらの依頼については、以下のセクションを参照してください。
JavaScript API 要求
Qualtricsが単一のインスタンスでプロジェクトを評価する場合は、次の 2 つのリクエストを使用します。
- この要求では、ページのインターセプトとクリエイティブのデプロイコードがロードされます。”load” API は、コードがあるページを再ロードすることと同じです。
QSI.API.load();ヒント：プロジェクト設定で［プロジェクトを手動でロード］を有効にしている場合、初期ページのロード時にこの API を呼び出してデプロイコードをロードする必要はありません。リロードなしで発生するページ上の状態変更を考慮して、強制的にロードする必要があります。 - これにより、デプロイコード評価が開始され、クリエイティブが表示条件を満たした場合に表示されます。
QSI.API.run();
Qualtricsで同じページでプロジェクトコードを複数回評価する場合は、次の3つの手順を毎回繰り返します。
- この要求により、ページに存在するインターセプトまたはクリエイティブのデプロイコードが削除されます。
QSI.API.unload(); - これにより、ページのインターセプトまたはクリエイティブのデプロイコードがロードされます。これは、ページのリロードと同じです。
QSI.API.load(); - これにより、デプロイコード評価が開始され、クリエイティブが表示条件を満たした場合に表示されます。
QSI.API.run();