ウェブサイト / アプリ インサイト 技術ドキュメント
このページの内容
ウェブサイト/アプリインサイトプロジェクトとは何でしょうか？なぜ私たちのサイトで使用しているのでしょうか？
クアルトリクスのウェブサイト/アプリインサイトは、組織におけるウェブ訪問者のデジタルメディア内でのエクスペリエンスの測定と向上を支援します。ウェブサイト/アプリインサイトプロジェクトでは、リンクや埋め込みアンケートを備えたクールなグラフィックをウェブサイトに表示し、訪問者のエクスペリエンスに関するフィードバックを得たり、最新のお得な情報やプロモーションを知らせたりすることができます！
あなたとあなたの同僚は、グラフィック（クリエイティブとも呼ばれる）の外観、それが表示される条件（インターセプト）、およびそれをデプロイするために使用されるコードに対する権限を持っています。
プロジェクトのコードがウェブサイトに追加されると、コードを変更したり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サイト閲覧者に最も適した言語で書かれたクリエイティブを表示させることも可能です。
インターセプトを有効にしたのですが、サイトに表示されないのです。なぜですか？
インターセプトを有効にしたのですが、サイトに表示されないのです。なぜですか？
- Logic:intercept targeting logic andaction set logic は、インターセプトが訪問者に表示されるために満たすべき条件である。このロジックを確認することで、Interceptがページ上に表示されない原因を発見することができます。
- Contains" を使用するロジックセット:ロジックエラーの原因としてよくあるのが、"Contains" と "Contains" の使い分けです。"です"条件を「含む」と言うことは、ロジックの根拠となるパラメータ（つまり、現在のURL）に、指定された値に加えて、より多くの情報が存在することを意味します。例えば、Current URL contains 'qualtrics'というロジックがあった場合、qualtricsという単語が存在するURLに対してインターセプトを表示することになります。もう一つの選択肢は、現在のURLが[URL]であることを利用することです。この条件は、訪問したURLが完全一致であることに依存します。差分や追加文字があると、インターセプトロジックが通らなくなります。
- インターセプトの改訂:インターセプトを編集する場合、インターセプトが公開されるまで、変更はライブになりません.インターセプトを公開すると、インターセプトのバージョン、つまり「リビジョン」が保存されます。これまでのリビジョン を見直すことは、突然インターセプトが表示されなくなったような変更を確認するために非常に有効です。
- デバッグウィンドウ:デバッグウィンドウは、特定のページでインターセプトが表示されない原因を調べるための非常に便利なツールです。
展開コード が 2019 年 3 月以前に実装されたインターセプトの場合、デバッグウィンドウを有効にするには、任意の URL に Q_DEBUG というクエリ文字列を付加してください。https://www.qualtrics.com?Q_DEBUG, https://www.qualtrics.com/blog?item=value&Q_DEBUG のように、"？"または"＆"を前につける必要があります。
展開コードが2019年3月以降に実装されたインターセプトの場合、WebページのConsoleで以下のJavaScriptスニペットを実行してください。 QSI.API.unload(); QSI.isDebug = true; QSI.API.load(); QSI.API.run(); デバッグウィンドウは、URL上で動作するインターセプトに必要な条件をすべて分解して表示します。インターセプトが表示されない場合は、デバッグウィンドウでその場所を確認し、赤色の失敗した警告を確認します。Qtip: ウェブサイトフィードバックデバッガーは、コードがタグマネージャーを使用して実装されている場合、機能しません。また、URLのクエリ文字列がすでに?である場合、デバッガは代わりに&を要求します。 - ネットワークリクエスト:ほとんどのブラウザには開発者ツールメニューがあり、ユーザーはサイトのソースコード、リソース、クッキー、ネットワークコールを確認することができます。ウェブサイトフィードバックは、これらのツールのネットワークセクションで明確な存在感を示しています。これらのスクリプトが実行されているかどうかを確認するには、開発者ツールを開き、「ネットワーク」セクションに移動してください。ここで、ウェブページを再読み込みすると、メニューにウェブサイトが行っているすべてのネットワーク要求が入力され始めるはずです。ウェブサイトフィードバックコードを特定するには、?Q_ZIDまたは?Q_SIDで始まるコールを探します。これは、表示ロジックのチェックを実行するコードそのものです。この形式に一致するものが見つからない場合は、プロジェクトコードの実装に問題があります。コードを配置する最適な場所については、実装 のサポートページを参照してください。
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種類のクリエイティブを用意します。
Qualtricsの新機能をいち早く知るにはどうすればよいですか？
Qualtricsの新機能をいち早く知るにはどうすればよいですか？
これらのリリースノートにアクセスするには、XMコミュニティーのアカウントが必要です。これらのアカウントは、Qualtricsのアカウントをお持ちのユーザーであれば、無料でご利用いただけます。このサポートページ には、XM コミュニティーのアカウント登録方法について記載されています。
XM コミュニティにログイン後、 Weekly Product Updates Introduction Post にアクセスしてください。この記事には、製品アップデートの購読を始めるために必要な情報がすべて含まれています。
Can Web and App Insights Affect My Site's SEO?
Can Web and App Insights Affect My Site's SEO?
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！