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

スイート
Customer Experience Strategy & Research
製品
Qualtrics
このページの内容

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

シングルページアプリケーション(SPA)は、特殊なタイプのウェブアプリです。SPAは、ウェブサイトにアクセスすると単一のページを読み込み、その後はナビゲーションに応じて後続のすべてのコンテンツを同じページに読み込みます。これは通常のウェブサイトのように機能しているように見えますが、「ページ」を切り替えても、実際にはページはリロードされません。

デフォルトでは、ウェブページの読み込みが完了するとすぐにデプロイメントコードが実行されます。ただし、SPAはページ間を移動する際に更新されないため、ページ間を移動してもデプロイメントコードは再評価されません。以下の方法を使用することで、SPAサイトでデプロイメントコードをシームレスに機能させることができます。

ヒント：これらのテクニックの一部は、ウェブサイトフィードバックの JavaScript API を使用します。クアルトリクスウェブサイトインサイトのJavaScript APIに関する詳細なドキュメントについては、こちらのページを参照してください。

注意：以下のドキュメントを実装するには、プログラミングの知識が必要です。この情報は、デプロイメントコードを実装するチームに渡すことをお勧めします。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。クアルトリクスが提供するカスタムコーディングサービスの詳細については、クアルトリクスのアカウントエグゼクティブまでお問い合わせください。

ヒント：Javascriptは、すべてのクアルトリクスライセンスに含まれているわけではありません。アクセスをご希望の場合は、クアルトリクスの営業担当までお問い合わせください。

URL変更時のインターセプトのロジックとアクティビティのトラッキングを再評価する

シングルページアプリケーションがユーザーナビゲーションにクライアントサイドのルーティングを使用している場合、［URLの変更時にインターセプトのロジックを再評価する］設定を有効にすることで、その後のURL変更時にインターセプトを強制的に再評価できます。この設定をオンにすると、最初のページ読み込み時に行われる評価に加えて、インターセプトのロジック評価も可能になります。

ヒント：この設定は、プロジェクト内のすべてのインターセプトに影響します。

プロジェクト管理タブからシングルページアプリケーションを追加する
プロジェクト管理タブからシングルページアプリケーションを追加する
プロジェクトを管理に移動します。
単一ページアプリ(SPA)サポートのセクションで、URLが変更されるたびにインターセプトのロジックを再評価、またはアクティビティを追跡するにチェックが入っていることを確認してください。
「変更を適用」をクリックします。

注意：このSPA設定をインターセプトレベルのオプション［カスタムJavascriptコードで表示（手動）］と併用する場合、引き続き以下を呼び出す必要があります。

QSI.API.run();

各SPAページにインターセプトを表示させるためのメソッド。

JavaScript APIを使用した手動での実装

ヒント：クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントについては、こちらのページを参照してください。

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

手動で実装する

インターセプトに移動します。
 

intercept settings page
intercept settings page

インターセプト設定に移動します。

［インターセプトの読み込みオプション］の見出しの下で、［プロジェクトを手動で読み込む］を選択します。
 

intercept loading option selected
intercept loading option selected

「変更を適用」をクリックします。

必要に応じて、いずれかのインターセプトに戻り、インターセプト全体または個々のアクションセットにロジックを設定します。
 

intercept editor open and areas where you add logic are highlighted
intercept editor open and areas where you add logic are highlighted

ウェブサイトにデプロイメントコードを配置します。すべてのページで読み込まれるように、グローバルヘッダーまたはフッターに配置することが推奨されます。

ウェブサイトでインターセプトを参照する回数に応じて、適切な JavaScript API リクエストを追加します。これらのリクエストについては、以下のセクションをご覧ください。

JavaScript APIリクエスト

ヒント：クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントについては、こちらのページを参照してください。一般的なSPAフレームワークにおけるこのパターンの実用例については、GitHubで公開されているクアルトリクスSPAデモのリポジトリをご覧ください。

クアルトリクスでプロジェクトを一度に評価する場合は、以下の2つのリクエストを使用します。

このリクエストは、ページ上のあらゆるインターセプトとクリエイティブのデプロイメントコードを読み込みます。「load」APIは、コードが記述されたページをリロードするのと同じです。QSI.API.load();
ヒント：プロジェクト設定で［プロジェクトを手動で読み込む］を有効にしている場合、最初のページ読み込み時にこのAPIを呼び出してデプロイメントコードを読み込む必要はありません。リロードせずに発生するページのステータス変更を考慮して読み込みを強制する場合にのみ、これが必要になります。
これにより、デプロイメントコードの評価が開始され、表示条件を満たしたクリエイティブが表示されます。QSI.API.run();

クアルトリクスでプロジェクトコードを同じページで複数回評価する場合は、その都度、次の3つのステップを繰り返してください。

このリクエストは、ページに存在するインターセプトまたはクリエイティブのデプロイメントコードを削除します。QSI.API.unload();
これにより、ページ上のインターセプトまたはクリエイティブのデプロイメントコードが読み込まれます。これはページを再読み込みするのと同じです。QSI.API.load();
This starts the deployment code evaluation and will make any Creative appear if it passes the display conditions.QSI.API.run();

FAQs

インターセプトを有効化しましたが、サイトに表示されません。なぜですか？

インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。

この記事は役に立ちましたか

いただいたフィードバックはこのページの改善の目的のみに利用します。

素晴らしい！ フィードバックありがとうございます！

フィードバックありがとうございます！