記事テンプレート

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

シングル・ページ・アプリケーション（SPA）は、特別なタイプのウェブ・アプリケーションです。SPAは、あなたがウェブサイトに入ったときに1つのページを読み込み、その時点から、あなたがナビゲートするときに同じページ内の後続のすべてのコンテンツを読み込みます。これは通常のウェブサイトのように見えるが、「ページ」を切り替えても、実際にはページはリロードされない。

デフォルトでは、デプロイメントコードはWebページがロードされるとすぐに実行されます。しかし、SPAはページ間を移動するときにリフレッシュしないため、デプロイメントコードはページ間を移動するときに再評価されません。以下に説明するテクニックを使用することで、デプロイメントコードをSPAサイトでシームレスに機能させることができます。

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

Single Page Applicationがユーザーナビゲーションのためにクライアントサイドルーティングに依存している場合、WebサイトフィードバックプロジェクトレベルでRe-evaluate intercept logic when the URL changes設定を有効にすることで、その後のURL変更時にインターセプトの再評価を強制することができます。この設定をチェックすると、最初のページロード時に行われる評価に加え、インターセプトロジックの評価が可能になります。

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

1. ウェブサイトフィードバックプロジェクトで、Settingsに移動します。
2. プロジェクトのマネージャーをクリックします。
3. ドロップダウンメニューからプロジェクトオプションを 選択します。
4. Single Page App (SPA) Supportセクションで、Re-evaluate intercept logic when the URL changesにチェックが入っていることを確認してください。

QSI.API.run();

JavaScript APIによる手動実装

この方法では、デプロイメントコードを手動で実行するように切り替える方法を説明します。 つまり、適切なJavaScript APIリクエストが開始されるまで、デプロイメントコードは関連するロジックを実行したり評価したりしません。

手動で実施する場合

1. 設定タブに移動します。
   
2. プロジェクトのマネージャーをクリックします。
3. プロジェクトオプションを選択します。
4. Manually Load Projectオプションを有効にする。
   
5. インターセプト］タブに戻り、必要に応じてインターセプトまたは アクションセットに論理セットを設定します。
   
6. デプロイメントコードは、できればすべてのページで読み込まれるように、グローバルヘッダまたはフッタに配置してください。
7. ウェブサイトにインターセプトを参照させたい回数に応じて、適切なJavaScript APIリクエストを追加します。これらのリクエストについては、以下のセクションを参照のこと。

JavaScript APIリクエスト

クアルトリクスにプロジェクトを1つのインスタンスで評価させたい場合は、以下の2つのリクエストを使用します：

1. このリクエストはページ上のインターセプトとクリエイティブのデプロイメントコードをロードします。load」APIは、コードのあるページをリロードするのと同じである。

   QSI.API.load()；

   Qtip:プロジェクト設定でManually Load Projectを有効にしている場合、最初のページロード時にデプロイメントコードをロードするためにこのAPIを呼び出す必要はありません。リロードせずに発生したページの状態変化をアカウントするために、強制ロードが必要になるだけである。
2. これによりデプロイコードの評価が開始され、表示条件を満たしたクリエイティブが表示される。

   QSI.API.run()；

プロジェクトコードをクアルトリクスに同じページで複数回評価させたい場合は、以下の3つのステップを毎回繰り返してください：

1. このリクエストは、ページに存在するインターセプトやクリエイティブのデプロイメントコードを削除します。

   QSI.API.unload()；

2. ページ上のインターセプトやクリエイティブのデプロイメントコードを読み込みます。これはページの再読み込みと同じである。

   QSI.API.load()；

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

   QSI.API.run()；

FAQ