-
Qualtrics Platform -
Customer Journey Optimizer -
XM Discover -
Qualtrics Social Connect
シングルページアプリケーション
シングル・ページ・アプリケーションについて
シングル・ページ・アプリケーション（SPA）は、特別なタイプのウェブ・アプリケーションです。SPAは、あなたがウェブサイトに入ったときに1つのページを読み込み、その時点から、あなたがナビゲートするときに同じページ内の後続のすべてのコンテンツを読み込みます。これは通常のウェブサイトのように見えるが、「ページ」を切り替えても、実際にはページはリロードされない。
デフォルトでは、デプロイメントコードはWebページがロードされるとすぐに実行されます。しかし、SPAはページ間を移動するときにリフレッシュしないため、デプロイメントコードはページ間を移動するときに再評価されません。以下に説明するテクニックを使用することで、デプロイメントコードをSPAサイトでシームレスに機能させることができます。
Qtip:これらのテクニックのいくつかは、Website Feedback JavaScript APIを使用しています。クアルトリクスウェブサイトフィードバックのJavaScript APIの詳細については、こちらのページをご覧ください。
注意 以下のドキュメントを実行するには、プログラミングの知識が必要です。この情報は、デプロイメントコードを実装するチームに伝えることをお勧めします。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。委託可能なカスタムコーディングサービスの詳細をお知りになりたい場合は、クアルトリクス営業担当までご連絡ください。
qtip:Javascriptはすべてのクアルトリクスライセンスに含まれていません。アクセシビリティにご興味のある方は、クアルトリクス営業担当までお問い合わせください。
URL変更時のインターセプトロジックの自動再評価
Single Page Applicationがユーザーナビゲーションのためにクライアントサイドルーティングに依存している場合、WebサイトフィードバックプロジェクトレベルでRe-evaluate intercept logic when the URL changes設定を有効にすることで、その後のURL変更時にインターセプトの再評価を強制することができます。この設定をチェックすると、最初のページロード時に行われる評価に加え、インターセプトロジックの評価が可能になります。
インターセプトロジックの自動再評価を有効にするには、以下の手順に従います：
- ウェブサイトフィードバックプロジェクトで、Settingsに移動します。
- プロジェクトのマネージャーをクリックします。
- ドロップダウンメニューからプロジェクトオプションを 選択します。
- Single Page App (SPA) Supportセクションで、Re-evaluate intercept logic when the URL changesにチェックが入っていることを確認してください。
Qtip:この動作をテストしたい場合は、プロジェクトレベルのブックマークレットを使用する必要があります。特定のインターセプトのブックマークレットを使用して、この動作をテストすることはできません。
注意カスタムJavascriptコードで表示するインターセプトレベルオプションと組み合わせてこのSPA設定を使用する場合、(手動で)
QSI.API.run();メソッドを使用して、各SPAページに表示するインターセプトを取得します。
JavaScript APIによる手動実装
Qtip: クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントは、こちらのページをご覧ください。
この方法では、デプロイメントコードを手動で実行するように切り替える方法を説明します。 つまり、適切なJavaScript APIリクエストが開始されるまで、デプロイメントコードは関連するロジックを実行したり評価したりしません。
手動で実施する場合
- 設定タブに移動します。
- プロジェクトのマネージャーをクリックします。
- プロジェクトオプションを選択します。
- Manually Load Projectオプションを有効にする。
- インターセプト］タブに戻り、必要に応じてインターセプトまたは アクションセットに論理セットを設定します。
- デプロイメントコードは、できればすべてのページで読み込まれるように、グローバルヘッダまたはフッタに配置してください。
- ウェブサイトにインターセプトを参照させたい回数に応じて、適切なJavaScript APIリクエストを追加します。これらのリクエストについては、以下のセクションを参照のこと。
JavaScript APIリクエスト
Qtip: クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントは、こちらのページをご覧ください。
クアルトリクスにプロジェクトを1つのインスタンスで評価させたい場合は、以下の2つのリクエストを使用します：
- このリクエストはページ上のインターセプトとクリエイティブのデプロイメントコードをロードします。load」APIは、コードのあるページをリロードするのと同じである。
QSI.API.load()；Qtip:プロジェクト設定でManually Load Projectを有効にしている場合、最初のページロード時にデプロイメントコードをロードするためにこのAPIを呼び出す必要はありません。リロードせずに発生したページの状態変化をアカウントするために、強制ロードが必要になるだけである。 - これによりデプロイコードの評価が開始され、表示条件を満たしたクリエイティブが表示される。
QSI.API.run()；
プロジェクトコードをクアルトリクスに同じページで複数回評価させたい場合は、以下の3つのステップを毎回繰り返してください：
- このリクエストは、ページに存在するインターセプトやクリエイティブのデプロイメントコードを削除します。
QSI.API.unload()； - ページ上のインターセプトやクリエイティブのデプロイメントコードを読み込みます。これはページの再読み込みと同じである。
QSI.API.load()； - これによりデプロイコードの評価が開始され、表示条件を満たしたクリエイティブが表示される。
QSI.API.run()；
FAQ
- インターセプトを有効化しましたが、サイトには表示されません。なぜですか？
-
インターセプトが一度実装されると、そのインターセプトが現れない可能性がある原因は数多くあります。これらの原因は、インターセプト自体の設定またはコードの実装から生じることがあります。
- ロジック：ロジックとアクションセットロジックを対象とするインターセプトは、インターセプトが訪問者に表示されるために満たす必要がある条件です。このロジックをチェックすると、ページにインターセプトが表示されない理由を知るのに役立ちます。
- “Contains” を使用する論理セット：ロジックエラーの一般的な原因は、［含む］の使用と「である」「含む」という条件は、ロジックの基準となるパラメータ（現在のURL）に、詳細情報に加えて指定された値が存在することを意味します。たとえば、「現在のURL」に「qualtrics」が含まれるロジックがある場合、qualtricsという単語がある任意のURLにインターセプトが表示されます。他のオプションでは、現在の URL は [URL] です。この条件は、訪問された URL が完全一致しているかどうかによって異なります。差異や追加文字があると、インターセプトロジックが渡されなくなります。
- インターセプト改訂：インターセプトを編集する場合、インターセプトが公開されるまで変更は反映されません。［インターセプト］を公開すると、インターセプトのバージョンまたは「改訂」が保存されます。行われた改訂の確認は、突然インターセプトの表示を妨げた可能性のある変更を特定するのに非常に役立ちます。
- デバッグウィンドウ: デバッグウィンドウは、特定のページにインターセプトが表示されない理由をテストするのに非常に有用なツールです。 デプロイコードが 2019 年 3 月より前に実装されたインターセプト
の場合、デバッグウィンドウを有効にするには、Q_DEBUG という指定された URL にクエリ文字列を追加します。これは、接頭辞として ? を付ける必要があります。または & (例: https://www.qualtrics.com?)Q_DEBUG、https://www.qualtrics.com/blog?item=value&Q_DEBUG 2019年3月以降にデプロイコードが実装されたインターセプト
については、ウェブページのコンソールでJavaScriptスニペットを実行します。
デバッグウィンドウは、表示する URL で実行されているインターセプトに必要なすべての条件を分解します。インターセプトが表示されない場合は、デバッグウィンドウでそのインターセプトを見つけて、赤色の失敗した警告を特定します。QSI.API.unload(); QSI.isDebug = true; QSI.API.load(); QSI.API.run();ヒント：タグマネージャーを使用してコードが実装されている場合、ウェブサイトフィードバックデバッガは機能しません。また、URL に ? を含むクエリ文字列がすでにある場合は、デバッガには代わりに & が必要です - ネットワーク要求: ほとんどのブラウザには、ユーザーがサイトのソースコード、リソース、クッキー、およびネットワーク呼び出しを確認できる開発者ツールメニューがあります。ウェブサイトフィードバックは、これらのツールのネットワークセクションに明記されています。これらのスクリプトが実行されているかどうかを確認するには、開発者ツールを開き、Network セクションにナビゲートします。ここで Web ページを再ロードすると、Web サイトによって実行されているすべてのネットワーク要求がメニューに入力されます。ウェブサイトフィードバックコードを特定するには、 ? で始まるコールを探します。Q_ZID または ?Q_SID。これは、表示ロジックでのチェックを実行しているコード自体です。この形式に一致するものが見つからない場合は、プロジェクトコードの実装に問題があります。コードの配置に最適な場所に関するアドバイスについては、実装に関するサポートページを参照してください。
- コンテンツセキュリティポリシーの問題：コンテンツセキュリティポリシーに違反するコンソールログを受け取った場合、ウェブサイトにはインターセプトのデプロイをブロックしている制限があります。解決するには、Web 開発チームに連絡することをお奨めします。インターセプトを確実に機能させるため、一般的には、コンテンツセキュリティポリシーヘッダーに以下の項目をリストアップすることをお勧めします。
- connect-src https://*.qualtrics.com
- frame-src https://*.qualtrics.com
- img-src https://siteintercept.qualtrics.com
- script-src https://*.qualtrics.com
- インターセプトを作成しましたが、アクティブ化する前にテストする必要があります。どうすればそれをできますか?
-
任意のインターセプトをアクティブにすることなくテストできるブックマークレットというツールがある。
- ウェブサイト／モバイルからのフィードバックとは？/Site Interceptはどこにありますか？
-
Site Interceptは、これらのプロジェクトの主な機能はオンラインプレゼンスに関するデータを収集することであるため、［ウェブサイト／モバイルからのフィードバック］に名前が変更されました。ウェブサイト／アプリのフィードバックの機能は、Site Interceptと同等の機能であり、顕著な改善と新しいユーザーインターフェースを備えています。