シングルページアプリケーション
このページの内容
シングル・ページ・アプリケーションについて
シングル・ページ・アプリケーション（SPA）は、特別なタイプのウェブ・アプリケーションです。SPAは、あなたがウェブサイトに入ったときに1つのページを読み込み、その時点から、あなたがナビゲートするときに同じページ内の後続のすべてのコンテンツを読み込みます。これは通常のウェブサイトのように見えるが、「ページ」を切り替えても、実際にはページはリロードされない。
デフォルトでは、デプロイメントコードはWebページがロードされるとすぐに実行されます。しかし、SPAはページ間を移動するときにリフレッシュしないため、デプロイメントコードはページ間を移動するときに再評価されません。以下に説明するテクニックを使用することで、デプロイメントコードをSPAサイトでシームレスに機能させることができます。
Qtip:これらのテクニックのいくつかは、Website Feedback JavaScript APIを使用しています。クアルトリクスウェブサイトインサイトのJavaScript APIに関する詳細なドキュメントは、こちらのページをご覧ください。
注意: 以下のドキュメントを実行するには、プログラミングの知識が必要です。この情報は、デプロイメントコードを実装するチームに伝えることをお勧めします。クアルトリクスサポートチームでは、カスタムコーディングに関するサポートやコンサルティングは提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。委託可能なカスタムコーディングサービスの詳細をお知りになりたい場合は、クアルトリクス営業担当までご連絡ください。
qtip:Javascriptはすべてのクアルトリクスライセンスに含まれていません。アクセシビリティにご興味のある方は、クアルトリクス営業担当までお問い合わせください。
インターセプトロジックの再評価とURL変更に伴うアクティビティの追跡
Single Page Applicationがユーザーナビゲーションのためにクライアント側ルーティングに依存している場合、Re-evaluate intercept logic when the URL changes設定を有効にすることで、その後のURL変更時にインターセプトの再評価を強制することができます。この設定をチェックすると、最初のページロード時に行われる評価に加え、インターセプトロジックの評価が可能になります。
Qtip:この設定はプロジェクト内のすべてのインターセプトに影響します。
注意: カスタムJavascriptコードで表示するインターセプトレベルオプションと組み合わせてこのSPA設定を使用する場合、(手動で)
QSI.API.run();メソッドを使用して、各SPAページに表示するインターセプトを取得します。
JavaScript APIによる手動実装
Qtip: クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントは、こちらのページをご覧ください。
この方法では、デプロイメントコードを手動で実行するように切り替える方法を説明します。 つまり、適切なJavaScript APIリクエストが開始されるまで、デプロイメントコードは関連するロジックを実行したり評価したりしません。
手動で実施する場合
JavaScript APIリクエスト
Qtip: クアルトリクスウェブサイトフィードバックのJavaScript APIに関する詳細なドキュメントは、こちらのページをご覧ください。
クアルトリクスにプロジェクトを1つのインスタンスで評価させたい場合は、以下の2つのリクエストを使用します：
QSI.API.load()； Qtip:プロジェクト設定でManually Load Projectを有効にしている場合、最初のページロード時にデプロイメントコードをロードするためにこのAPIを呼び出す必要はありません。リロードせずに発生したページの状態変化をアカウントするために、強制ロードが必要になるだけである。
QSI.API.run()； プロジェクトコードをクアルトリクスに同じページで複数回評価させたい場合は、以下の3つのステップを毎回繰り返してください：
FAQs
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
- ロジック：インターセプトのターゲティングロジックとアクションセットロジックは、サイト訪問者にインターセプトを表示するために満たす必要のある条件です。このロジックを確認すると、インターセプトがページに表示されない理由を特定するのに役立ちます。
- 「次を含む」を使用するロジックセット：「次を含む」の使用は、ロジックエラーの一般的な原因です。です。条件が「次を含む」とは、ロジックの基準となるパラメーター(現在のURLなど)に、指定した値が他の情報とともに追加で含まれることを意味します。例えば、「現在のURLに「qualtrics」が含まれる」というロジックがあった場合、URLに「qualtrics」という単語が含まれていれば、どのURLでもインターセプトが表示されることになります。もう1つのオプションは、現在の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スニペットを実行してください。
QSI.API.unload();
QSI.isDebug = true;
QSI.API.load();
QSI.API.run();ヒント：コードがタグマネージャーを使用して実装されている場合、ウェブサイトインサイトのデバッガーは機能しません。また、URLに「?」を含むクエリ文字列が既にある場合、デバッガーでは代わりに「&」が必要になります。
- ネットワークリクエスト：ほとんどのブラウザには、サイトのソースコード、リソース、Cookie、ネットワークコールを確認できる開発者ツールメニューがあります。ウェブサイトインサイトは、これらのツールのネットワークセクションで明確な存在感を示しています。これらのスクリプトが実行されているか確認するには、開発者ツールを開き、[ネットワーク]セクションに移動します。この画面でウェブページを再読み込みすると、ウェブサイトが行っているすべてのネットワークリクエストがメニューに表示され始めます。Website Insightsのコードを特定するには、?Q_ZIDまたは?Q_SIDで始まるコールを探します。これは、表示ロジックのチェックを実行しているコード自体です。この形式に一致するものが見つからない場合は、プロジェクトコードの実装に問題があります。コードを配置するのに最適な場所に関するアドバイスについては、実装に関するサポートページをご参照ください。
- コンテンツセキュリティポリシーの問題：コンテンツセキュリティポリシーに違反するコンソールログが表示される場合、ウェブサイト上の制限によってクアルトリクスのインターセプトの展開がブロックされている可能性が高いです。解決するには、貴社のウェブ開発チームにご連絡いただくことをお勧めします。インターセプトが機能するように、通常、コンテンツセキュリティポリシーヘッダーで以下の項目を許可リストに登録することをお勧めします。
- connect-src https://*.qualtrics.com
- frame-src https://*.qualtrics.com
- img-src https://siteintercept.qualtrics.com
- script-src https://*.qualtrics.com
- SPA URLの処理：サイトでシングルページアプリケーション(SPA)フレームワークを使用している場合は、ビュー間を移動する際にコードがhistory.pushState()をトリガーするようにしてください。一部のフレームワークでは、新しい履歴エントリをプッシュせずにURLの再レンダリングや更新を行う場合があり、これによりインターセプトが実行されないことがあります。useEffectまたは同様のlifecycleフックを使用している場合は、インターセプトのロジックがナビゲーションの完了後に実行されるようにしてください。
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！