ウェブサイト / アプリ インサイト 技術ドキュメント
このページの内容
ウェブサイト/アプリインサイトプロジェクトとは何でしょうか？なぜ私たちのサイトで使用しているのでしょうか？
クアルトリクスのウェブサイト/アプリインサイトは、組織におけるウェブ訪問者のデジタルメディア内でのエクスペリエンスの測定と向上を支援します。ウェブサイト/アプリインサイトプロジェクトでは、リンクや埋め込みアンケートを備えたクールなグラフィックをウェブサイトに表示し、訪問者のエクスペリエンスに関するフィードバックを得たり、最新のお得な情報やプロモーションを知らせたりすることができます！
あなたとあなたの同僚は、グラフィック（クリエイティブとも呼ばれる）の外観、それが表示される条件（インターセプト）、およびそれをデプロイするために使用されるコードに対する権限を持っています。
プロジェクトのコードがウェブサイトに追加されると、コードを変更したりITチームに警告したりすることなく、あらゆる種類の変更が可能になります。クアルトリクスで作業を行うだけで、ウェブサイトのクリエイティブやインターセプトがそれに応じて変更されます。
データは安全ですか？
ロジックにターゲットを設定するために必要な場合を除き、Qualtricsのサーバーにデータは一切パスされません。つまり、Qualtricsのシステムにはこうしたデータは一切保存されません。
このデータを有線上で安全に保ち、中間者攻撃から保護するために、Qualtricsでは「HTTPS」プロトコルを常に使用しています。プロトコルとは訪問者のウェブブラウザーへのコンテンツの配信方法を指します。
デプロイするプロジェクトコードはどこにありますか？
デプロイメントコード（またはプロジェクトのデプロイメントコード）は、プロジェクト内の「デプロイメント」タブで確認できます。導入するには、コードをコピーし、ウェブ配置チームに送信してください。コードに変更を加える必要はありません。
デプロイメントコードは、プロジェクト全体でビルドされたインターセプトを表示します。
コードはどのように機能しますか？
デプロイコードは非同期です。つまり、ページのほかのすべてのコンテンツが読み込まれるまで実行されません。このようにデプロイコードが実行されるのはonLoadイベントがトリガーされた後のみであるため、デプロイコードによってページのほかの要素の読み込みが妨害されることはありません。
訪問者がデプロイメントコードを含むページをブラウザで見たときに何が起こるか、そのプロセスを見てみましょう：
- デプロイメントコード（通常はHTMLのheadに配置）は、ページのロード時にすぐに実行され、ページのonLoadイベントがトリガーされると、Htmlボディの最後に別の<script> タグを挿入します。
- この<script> タグは、コンテンツ配信ネットワーク（CDN）にキャッシュされているクアルトリクスサーバーのJavaScriptコード（Orchestrator）をリクエストします。
- Orchestratorはクアルトリクスサーバーにターゲットコールを行い、表示するクリエイティブを決定します。この呼び出しはCDNにキャッシュされません。
- 必要であれば、2回目のターゲットリクエストがサーバーに送信され、必要なデータが取得されます（EX: JavaScript式またはクッキーターゲット）。
- クアルトリクスはデータベースからウェブサイト/アプリインサイトの定義を取得し、適切にコードを構築します。
- Orchestratorは、ターゲットを絞った回答に基づいて、追加の呼び出しを行い、ページへの表示が必要な別のコンテンツを取得します。ターゲティングロジックを通過するクリエイティブの数によって、リクエスト数は変動します。こうしたすべてのコンテンツはCDNにキャッシュされるため、素早く読み込まれます。
- ページにクリエイティブが表示される。
デプロイメントコードは動的です。つまり、ウェブサイト/アプリインサイトのプロジェクトインターフェースからインターセプトやクリエイティブを変更しても、コード自体は変更されません。このように、アカウント内からウェブサイト/アプリインサイトプロジェクトに変更を加えることができ、変更を確認するためにウェブサイト上でコードを交換する必要はありません。
ご注意: クアルトリクスは、すべてのお客様に対して適切なサービスレベルを維持するため、予期せぬ大きなスパイクが発生した場合、稀にサーバーへのトラフィックを制限することがあります。
ウェブサイト/アプリインサイトプロジェクトをデプロイするには？
注意: インターセプトを確実に動作させるために、コンテンツ・セキュリティ・ポリシーのヘッダで以下の項目を許可してください：
- connect-src https://*.qualtrics.com
- frame-src https://*.qualtrics.com
- img-src https://*.qualtrics.com
- script-src https://*.qualtrics.com
コンテンツセキュリティポリシーがデフォルトでこれらの項目をブロックしている場合、ウェブサイト/アプリインサイトはサイト上で確実に機能しません。Ensightenなどのウェブサイトセキュリティマネジメントソリューションをご利用の場合は、同社が提供するドキュメントに従って、*クアルトリクス.comドメインを許可してください。これらのソリューションにより、クアルトリクスタグが必要なリソースを読み込めなくなり、ウェブサイト/アプリインサイトがお客様のサイトで確実に動作しなくなる可能性があります。さらに、JavaScript変数を使用している場合は、コンテンツセキュリティポリシーで「unsafe-eval」を許可する必要があります。そうしないと、ウェブサイト/アプリインサイトはJavaScriptの値をキャプチャできません。
1.ウェブページに直接コードを追加する
デプロイコードは、ウェブページの任意の場所に追加できます。コードは非同期で実行されるため、ウェブページがすべてのコンテンツ（画像、スクリプトファイル、CSSファイルなど）を完全に読み込むまで、読み込みは開始されません。
https://www.w3schools.com/jsref/event_onload.asp
さらに、クリエイティブが実際にウェブページに表示される場所は、クアルトリクスインターフェイス内で決定される設定によって決まります。(カスタムポジションの情報を参照) したがって、ページ内のコードの位置は、ページのどこにコンテンツが表示されるかに影響しません。
2.グローバルヘッダー/フッター（推奨）
デプロイコードはグローバルヘッダーかグローバルフッターに追加することをお勧めします。こうすると、世界中の全サイトに同時にコードが適用されます。この方法は、デプロイメントが最も簡単な方法です。なぜなら、デプロイメントを行うたびに、より多くのページに繰り返しコードを追加する必要がないからです。このようにしてコードをサイトにグローバルに追加した場合、インターセプトの中でCurrent URLロジックを使って、インターセプトが実際にどのページに表示されるかをコントロールすることができます。
注意: ページビューを制限したい場合は、特定のページにのみデプロイメントコードを配置するか、サンプリングを使用することを検討してください。詳しくは、ページビューを最小限に抑えるためのベストプラクティスをご覧ください。
3.タグマネージャーの使用
デプロイメントコードをサイトコードに直接適用するのではなく、タグマネジメントシステムに追加するという方法もある。コピーしたコードをQualtricsのインターフェイスから直接タグマネージャーに貼り付けることができます。
Qtip:クアルトリクスは現在、タグマネジメントシステムとしてAdobe Launchのエクステンションを持っています。詳しくはAdobe Launch Extensionをご覧ください。
Qtip: クアトリックスでは、お客様の側で有効化された設定を確認することができないため、タグマネージャーに適用されたコードに関する問題を完全にトラブルシューティングすることはできません。トラブルシューティングのヒントについては、タグマネージャーの使用方法のページを参照してください。
当社のクライアントがウェブサイト/アプリインサイトと組み合わせて使用している一般的なタグ管理システムは、Adobe Launch、Tealium、Ensighten、Googleタグマネージャーです。特にTealiumには、ウェブサイト/アプリのインサイトを簡単に実装できるウィザードが構築されている。必要なのは、導入するプロジェクトのゾーンIDと所属組織のIDのみです。
組織IDは、アカウント設定からクアルトリクスIDタブを選択することで取得できます。
ゾーンIDは、ZN_で始まり、次のいずれかにあります。
4.CSP Nonce の使用
Qtip:CSP nonce の使用方法の詳細については、この外部ヘルプ・ページを確認してください。
クアルトリクスリソースをURL経由で読み込むだけでなく、インラインスタイルを直接ページに貼り付けることもあります。インライン化をサポートするため、CSP構成で動作する安全なソリューションとして、nonce値をjavascriptファイルに渡すことを許可しています。
nonceを使うには、次のことが必要です：
- ページリクエストごとにユニークな値を生成する。
- meta HTML タグまたはContent-Security-Policy HTTP レスポンス・ヘッダを使用して、CSP にその値を設定します。
- その値をクアルトリクスのjavascriptに渡し、今後使用できるようにします。これはプロジェクトのデプロイメントコードに追加する必要があります（例を参照）。
例: この例では、nonce値は2行目と5行目で渡される。
<!-- BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET -->
<script type='text/javascript'nonce='<%nonceVar%>'>
(function(){"undefined"===typeof QSI&&(QSI={},
QSI.config = {nonce
: "<%nonceVar%>",
}
)；[残りのデプロイメントコードはクアルトリクスからコピーしたものです。］
nonceを使用する際は、以下の点に留意してください：
- script-src と style-src の両方の CSP ディレクティブで単一の nonce 値のみをサポートします。
- レガシークリエイティブエディターでカスタマイズされたクリエイティブには対応しておりません。 Qtip: ガイデッドインターセプト（またはガイデッド設定なしで作成された同じインターセプトタイプ）はノンセと互換性があります。
- クアルトリクス・ドメインを上記の CSP ディレクティブに追加する必要があります。
ご注意: クアルトリクスサポートでは、トラブルシューティングやnonce値の生成をサポートすることはできません。開発チームと協力して、CSP に nonces を完全に調査し、実装してください。その代わりに、私たちの熱心なユーザー・コミュニティに尋ねてみることもできます。カスタムコーディングサービスの詳細をお知りになりたい場合は、クアルトリクス営業担当までご連絡ください。
ウェブサイト/アプリインサイトの実装には通常誰が関わっていますか？
所属組織のウェブサイトにコンテンツを追加するアクセス権限を有する組織内の人物です。通常は、ITチーム、ウェブコンテンツチームなどのメンバーです。
ウェブサイト/アプリインサイトはサイトの速度を低下させますか？
デプロイコードは非同期です。つまり、ページのほかのすべてのコンテンツが読み込まれるまで実行されません。このようにデプロイコードが実行されるのはonLoadイベントがトリガーされた後のみであるため、デプロイコードによってページのほかの要素の読み込みが妨害されることはありません。
Qualtricsが停止したらどうしますか？当社ウェブサイトに問題が生じるでしょうか？
クアルトリクスに障害や問題が発生している場合、インターセプトはページに表示されません。それ以上、サイト訪問者のエクスペリエンスに影響を与えることはありません。
自分のウェブサイトでのコードの実行速度は？
デプロイコードの読み込み速度は、リクエストの50％以上で300ミリ秒以内、リクエストの90％以上で750ミリ秒以内と予測されます。速度は、ユーザーの地理的位置、プロジェクトのインターセプトやクリエイティブの数によって異なります。
デバッグウィンドウを開く
デバッグウィンドウを使って、インターセプトが特定のウェブページに表示されない理由を診断することができます。このウィンドウには、インターセプトが表示されるために必要なすべての条件と、その条件がパスしたか失敗したかが表示されます。
デバッグウィンドウをどのように開くかは、インターセプトが実装された時期によって異なります。
注意: コードがタグマネージャーを使って実装されている場合、デバッグウィンドウは機能しません。
2019年3月までにインターセプトを実施
デプロイメントコードが2019年3月以前に実装されたインターセプトについては、URLにQ_DEBUG クエリ文字列を追加することでデバッグウィンドウを有効にできます。このクエリ文字列には、以下の例のように「?
例:
：https://www.qualtrics.com?Q_DEBUGhttps://www.qualtrics.com/blog?item=value&Q_DEBUG
Qtip:URLがすでに?を含むクエリ文字列を含んでいる場合、クエリ文字列は代わりに&を必要とします。
2019年3月以降に実施されるインターセプト
デプロイメントコードが2019年3月以降に実装されたインターセプトについては、以下の手順に従ってデバッグウィンドウを開いてください：
トラブルシューティングのヒント
インターセプト論理とアクションセット論理
- 値が正確であることを確認します。
- である」と「である」の使い分けを検討する。”含む”
- および／またはロジックの使用をチェックします。
- 複数の値の中に含まれるスペースに注意します。
改訂履歴
公開されたバージョンが最新（またはあなたが期待するバージョン）であることを確認してください。
ウェブサイト／アプリのインサイトネットワークリクエストを見る
私たちのスクリプトに干渉している可能性のある他のぶら下がりスクリプト要求を探す
Qtip: デプロイメントコードが実際にページ上にあることを確認するために、右クリックして「ページのソースを表示」を選択することもできます。
注意: コンテンツセキュリティポリシーに違反するコンソールログが表示される場合は、インターセプトのデプロイをブロックしているウェブサイト上の制限がある可能性が高いです。ウェブ開発チームに連絡して解決することをお勧めします。
FAQs
アクションセットでロジックを使うべきタイミングは？
アクションセットでロジックを使うべきタイミングは？
例えば、クリエイティブは画面サイズに反応しないため、Webサイト閲覧者がモバイル端末を使っているかどうか、特定の画面サイズでWebサイトを表示しているかどうかに着目したアクションセットロジックを実装したいユーザーも少なくありません。このようにロジックを駆使することで、適切なフォーマットとサイズのクリエイティブを適切な人物に向けることができるのです。
また、位置情報をもとにしたアクションセットロジックにより、Webサイト閲覧者に最も適した言語で書かれたクリエイティブを表示させることも可能です。
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
インターセプトを有効化しましたが、サイトに表示されません。なぜですか？
- ロジック：インターセプトのターゲティングロジックとアクションセットロジックは、サイト訪問者にインターセプトを表示するために満たす必要のある条件です。このロジックを確認すると、インターセプトがページに表示されない理由を特定するのに役立ちます。
- 「次を含む」を使用するロジックセット：「次を含む」の使用は、ロジックエラーの一般的な原因です。です。条件が「次を含む」とは、ロジックの基準となるパラメーター(現在の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フックを使用している場合は、インターセプトのロジックがナビゲーションの完了後に実行されるようにしてください。
Single Page ApplicationやAngular JavaScriptを実行しているページで、ウェブサイトフィードバックを使用するにはどうすればよいですか？
Single Page ApplicationやAngular JavaScriptを実行しているページで、ウェブサイトフィードバックを使用するにはどうすればよいですか？
インターセプトのアンケートで、Webサイト訪問者の情報を取得することはできますか？どうやって？
インターセプトのアンケートで、Webサイト訪問者の情報を取得することはできますか？どうやって？
埋め込みデータメニューには、アンケートに反映させたい静的な値を設定するだけでなく、アンケートに反映させるためのオプションもあらかじめ組み込まれています。例えば、表示されたインターセプトとクリエイティブの両方のID、インターセプトを表示したページのURL、その人のサイト履歴、あるいは滞在時間などを自動的に取得することができるようになるのです。その人のウェブブラウザに表示されるクッキーから情報を取得することもできますし、興味のある特定の変数を取得するJavaScriptの式を書くことも可能です。
Qualtrics でアンケートを実行している場合は、 アンケートフロー で埋め込みデータを追加して、この情報をアンケートの回答に保存することも可能です。
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースでは「プロジェクトコード」という名称になりましたが、これは何を意味しますか？
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースでは「プロジェクトコード」という名称になりましたが、これは何を意味しますか？
ゾーン(現在は「プロジェクト」)は、複数のクリエイティブとインターセプトのコレクションとして機能します。ゾーンコードには、ゾーン内のすべてのインターセプトが含まれます。これにより、個々のインターセプトにコードを追加し続けるのではなく、単一のコードをサイトに実装できます。これにより、ゾーンでコンテンツを有効化するたびにコードに自動的に追加され、変更が不要になるため、時間を大幅に節約できます。
プロジェクトはゾーンに相当するため、プロジェクトのデプロイメントコードは古いゾーンコードに相当します。
クリック数とインプレッション数の違いは何ですか？
クリック数とインプレッション数の違いは何ですか？
クリックは、参加者がインターセプトのターゲット領域をクリックしたとき、またはターゲットがロードされたときにカウントされます。例えば、アンケートが組み込まれたターゲットとして表示されている場合、インターセプトが実際に参加者に表示される前にターゲットがロードされる可能性があります。この場合、インプレッションが増加する前にクリック数が増加することがあります。
クリック数がインプレッション数と同じか、それよりも多いのはなぜですか？
クリック数がインプレッション数と同じか、それよりも多いのはなぜですか？
- エンベデッドターゲットの使用:埋め込みターゲット は、クリエイティブが表示されると同時にターゲットがロードされるため（クリエイティブ上の何かがクリックされたときに関係なく）、埋め込みターゲットは通常、クリック数とインプレッション数が等しくなるようにします。
- HTTPリダイレクトクリエイティブの使用:このクリエイティブでは、クリエイティブが読み込まれるたびにターゲットが読み込まれるため、HTTP Redirect は、クリエイティブが読み込まれるたびにクリックが増分されます。
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
On Load、On Focus、On Exit Intent、Manuallyの表示の違いは何ですか？
On Load、On Focus、On Exit Intent、Manuallyの表示の違いは何ですか？
- On Load: On Loadオプションは、最も基本的な表示オプションです。このオプションを選択すると、有効なページではページ自体がロードされると同時にインターセプトが実行されます。つまり、ウェブサイト訪問者が別のタブやブラウザのインスタンスでURLを読み込み、自分では見ずにクリエイティブを表示させることができるのです。
- オンフォーカス:On Focusオプションを使用すると、Webサイトの訪問者がインターセプトに遭遇する前にページ上で活動していることをより確実に確認することができます。インターセプトを表示するようなページがロードされた場合、On Focus 設定を使用すると、訪問者がページ上でアクティブになるまでスクリプトが実行されないようにすることができます。マウスの動きやクリック感で判断します。つまり、例えばURLが新しいタブでロードされた場合、ユーザーはスクリプトを実行する前にまずそのタブに移動してページと対話する必要があります。クリエイティブをタイマーで表示するように設定している場合に有効です。
- On Exit Intent:このオプションは、ウェブサイト訪問者があなたのサイトを離れようとするときにクリエイティブを表示することを目的としています。デプロイメントコードがページ上に存在する場合、ブラウザの境界内におけるユーザーのマウスの動きを検出することができます。Exit Intent機能は、ブラウザの上部にカーソルが移動した瞬間を検知し、そのタイミングでインターセプトを発動させる機能です。こうして、誰かがタブを閉じようとしたときに、その人の注意を引くことができるのです。
- 手動で:このオプションは、主にSingle Page Application のセットアップで使用されます。これを選択すると、何も自動的に表示されなくなります。その代わり、Website Feedback API をサイト自身が実行して、スクリプトを発火させ、クリエイティブな表示をさせる必要があります。一般的には、フィルターの値を変更したり、同じURL内の要素を読み込むなど、1つのページ上の特定の要素が変更されたときにインターセプトをトリガーさせたい場合に使用します。
モバイル端末でクリエイティブを小さく表示させる方法を教えてください。
モバイル端末でクリエイティブを小さく表示させる方法を教えてください。
もし、ポップオーバーや古いクリエイティブを作ることにした場合は、ここでマルチアクションセット を使うことになります。モバイル端末用とデスクトップ用で異なるアクションセットを用意することになります。また、デスクトップ用とモバイル用の2種類のクリエイティブを用意します。
クアルトリクスの新機能について最新情報を入手するにはどうすればよいですか？
クアルトリクスの新機能について最新情報を入手するにはどうすればよいですか？
これらのリリースノートにアクセスするには、XM コミュニティのアカウントが必要です。クアルトリクスのアカウントをお持ちのユーザーは、これらのアカウントを無料でご利用いただけます。このサポートページには、XMコミュニティアカウントの登録方法に関する情報が記載されています。
XMコミュニティにログインしたら、製品の週次更新に関する紹介投稿にアクセスしてください。この投稿には、製品アップデートのサブスクリプションを開始するために必要なすべての情報が含まれています。
Can Web and App Insights Affect My Site's SEO?
Can Web and App Insights Affect My Site's SEO?
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！