テンプレート化された埋め込みフィードバック
このページの内容
ヒント：このページに記載されている機能にアクセスできない場合は、アカウントエグゼクティブにお問い合わせください。デジタルフィードバックとCustomerXM for Digitalの違いの詳細については、デジタルフィードバックとCustomerXM for Digitalを参照してください。
テンプレート化された埋め込み型フィードバックについて
マーケティングブログ、サポートドキュメント、開発者向けリソース、その他のサイトなど、運営するサイトの種類にかかわらず、コンテンツは常に最新の状態に保つ必要があります。ウェブサイトの規模が大きくなるにつれて、改善の取り組みに集中することが難しくなる場合があります。作成しているコンテンツが効果的かどうかを判断し、そのインパクトを測定することも重要です。
テンプレート化された埋め込みフィードバックにより、実行するコンテンツに関するデータを非常に簡単に収集できます。サイトコンテンツに簡単な有用性の質問を埋め込むことで、訪問者はコンテンツを評価したり、ページ上で直接フィードバックを提供したりできます。
ヒント: テンプレート化された組み込みフィードバックのカスタマイズ版を使用して、サポートサイトで顧客フィードバックを収集しています。各サポートページの最後にある「この情報は役に立ちましたか？」アンケートをご覧ください。
注意：テンプレート化された埋め込みフィードバックをデプロイするウェブサイトでコンテンツセキュリティポリシー(CSP)を使用している場合は、ドメイン*.qualtrics.comを許可リストに登録する必要があります。
ヒント：この機能は以前、エンベデッドフィードバックという名称でした。
テンプレート化された埋め込みフィードバックの作成
ヒント：埋め込み型のフィードバックでは、URLセグメントをターゲットにするなど、インターセプトが正しいページに表示されるようにするためのターゲティングロジックを追加することをお勧めします。埋め込みフィードバックの表示対象ユーザーを制限するためにターゲティングロジックを使用することは推奨しません。インターセプトはページに埋め込まれているため、空白で表示されると混乱を招く可能性があります。
注意：このステップは、評価対象のコンテンツの特定のページ(またはセクション)でデータをフィルターしたり、ブレークアウトしたりする場合に非常に重要です。
ヒント：フィードバックはページに直接埋め込まれ、訪問者のウェブサイトのナビゲーションや利用を妨げないため、このインターセプトの表示頻度を制限する理由はありません。むしろ、制限する方が混乱を招く可能性があります。テンプレート化された埋め込みフィードバックは非表示にせず、訪問者の 100% をサンプリングし、繰り返し表示を妨げず、ページ読み込み時に表示することを推奨します。
ヒント：最終的な設定手順と公開の詳細については、ガイド付きインターセプトの作成も参照してください。
コンテンツをカスタマイズする
注意：テンプレート化された埋め込みフィードバック機能では、別途アンケートを作成する必要はありません。この機能は、バックエンドで自動的にアンケートを作成するため、お客様側での追加作業は不要です。
テンプレート化された埋め込みフィードバッククリエイティブを作成する際、最初のセクションでは、質問やボタンの外観など、クリエイティブのコンテンツをカスタマイズできます。画面の右側では、追加した設定に合わせてプレビューが更新されます。ボタンをクリックして、ありがとうございますメッセージやフォローアップの質問がどのように表示されるかを確認することもできます。
- はい/いいえ: 「はい」と「いいえ」の単語、または賛成/反対のアイコンのいずれか。
- 5段階評価：絵文字または星印のいずれか。
ヒント: フォローアップの質問を含める場合、これはフォローアップへの回答後に表示されます。
ヒント：絵文字が表示される順序を逆にすること（例：肯定的な順から否定的な順への切り替え）はできません。
- まず、この2つ目の質問をトリガーする回答を選択します。回答のすべてまたは一部を選択できますが、否定的なフィードバックを対象にすることをお勧めします。
- 次に、フォローアップの質問を作成します。
ヒント: 見た目と操作性や翻訳に問題がないことを確認してから「次へ」をクリックしてください。
見た目と操作性
[Look & Feel] セクションでは、クリエイティブのレイアウト、テキストの太さ、色を調整できます。
- レイアウト：質問と回答選択肢の配置。
- 並列
- 積み上げ
- テキストの太さ: 質問文のテキストの太さ。標準、太字、斜体に設定できます。
- テキストの色：質問文の色です。
- ボタンのカスタマイズ：変更できる色は、先に選択した形式とスタイルによって異なります。
- はい/いいえ：ボタンのテキスト、ボタンの枠線、ボタンの塗りつぶしの色を変更します。
- 高評価/低評価： ボタンのアウトライン(枠線)と塗りつぶしの色を変更します。
- 絵文字：カスタマイズはできません。色はあらかじめ設定されています。
- 星: 星の輪郭(枠線)の色を変更します。これは、回答者がその星にカーソルを合わせるか、選択したときに星を塗りつぶす色でもあります。
［送信］ボタンの色：［送信］ボタンは、フォローアップの質問を含めた場合にのみ表示されます。訪問者はこのボタンを使用して、フィードバックを送信する準備ができたことを示します。この設定で塗りつぶしの色を変更できます。
- 送信ボタンのテキストの色：送信ボタンのテキストの色を変更します。
CSSのカスタマイズ： テンプレート化された埋め込みフィードバックのCSSを必要に応じてカスタマイズします。ここで行った編集はプレビューに反映されません。デプロイする前にインターセプトをテストしてください。
注意: 以下のコードは現状のまま提供されるものであり、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。
テンプレートを使用：クリエイティブのスタイル設定のテンプレートとしてアンケートテーマを使用します。これにより、そのアンケートテーマのプライマリカラーとセカンダリカラーの設定がインポートされます。
ヒント：クリエイティブの設定は、テンプレートとして使用されるテーマから切り離されています。テンプレートのテーマが変更されてもクリエイティブの設定は更新されず、クリエイティブの設定を変更してもテンプレートのテーマは変更されません。
ヒント：テンプレート化された埋め込みフィードバッククリエイティブの色をさらにカスタマイズしたい場合は、［デザイン］セクションの色のドロップダウンメニューを使用できます。
CSSセレクター
テンプレート化された埋め込みフィードバックインターセプトを表示するウェブページ上の場所を指定します。これを行うには、テンプレート化された埋め込みフィードバックを含むページ上の要素を指すCSSセレクターの値を入力します。
例：クアルトリクスサポートページの「クアルトリクスサポート」セクションにインターセプトを追加する場合。ブラウザのデベロッパーツールを開いて、インターセプトを挿入したい要素のCSSセレクターを見つけることができます。
正しい要素がハイライトされたら、右クリックしてセレクターをコピーします。セレクターは、CSS の長い文字列である必要があります。この場合、コピーされたセレクターは「#content > div.quni-homepage.main-content > div > div > div > div.main-content-wrapper.spacing-sm-bottom > div > div.q-xm.logo-fix.ng-scope > section > div > div:nth-child(1) > div > h1」です。
コピーしたCSSセレクターを以下のウィンドウに貼り付け、［CSSセレクターを保存］をクリックします。
ヒント：CSSセレクターが空白または無効な場合、開発者ツールに「DOMException: Document.querySelectorAll」というテキストを含むエラーが表示されます。セレクターが有効でもページに要素が存在しない場合、このエラーは発生しません。たとえば、「#.<tes,t,」というCSSセレクターを入力するとエラーが発生しますが、「h1」というセレクターを入力し、ページ上にh1要素がない場合はエラーは発生しません。
ヒント：テンプレート化された埋め込みフィードバックは、DivIDまたはCSSSelectorの末尾にのみ追加できます。
ページのURL、合計時間、ページタイトルの取得
- CurrentPageUrlが現在のページURLの値に設定されました
- JavaScriptの値からPageTitleを設定
- TotalDurationがサイト滞在時間に設定されました
PageTitleについては、ウェブページのタイトルを取得できるよう、JavaScriptから値を設定する必要があります。では、どうすればよいのでしょうか？
Google Chromeをご利用の場合は、ページ上のタイトルを選択して右クリックし、［検証］オプションを選択します。Chromeデベロッパーツールウィンドウが開き、次のように表示されます。以下に示すように、対応するHTML要素を右クリックしてセレクターをコピーします。
これにより、次のような結果が返されます。
#firstHeading
次のJavaScriptを使用すると、HTML要素からページタイトルの値を取得できます。
document.querySelector("#firstHeading").textContent
セレクターが返した内容に応じて、太字のテキストを編集できます。
ヒント：Chrome の開発者ツールコンソールでこれをテストして、値がどのように表示されるかを確認できます。
JavaScriptが用意できたので、先ほど示したように、これを埋め込みデータフィールド「PageTitle」の値に入力します。完了したら、エンベデッドデータで［次へ］をクリックします。
埋め込みアンケート調査
テンプレート化された埋め込み型フィードバックを作成すると、アンケートが自動的に生成されます。このアンケートとそのデータを表示するには、［設定］に移動し、［関連付けられたアンケート］でアンケート名をクリックします。
注意: このクリエイティブのアンケートにアクセスするには、上記の手順に沿ってテンプレート化された埋め込みフィードバックを開く必要があります。このアンケートは、アンケートID(例: SV_XXXXX)があっても、［プロジェクト］ページから直接見つけることはできません。
アンケートの機能
［ワークフロー］タブ：受信したアンケート結果に基づいて、クアルトリクス内でさまざまなタスクをトリガーします。例えば、ウェブサイトの訪問者がコンテンツに不満を示した場合にライティングチーム向けのチケットを作成したり、非常に肯定的なフィードバックを受け取ったときにマネージャーにメールを送信したりできます。
ヒント：現在、ワークフロータブにアクセスできるのは、埋め込みフィードバックアンケートを作成したユーザーのみです。
- ［データと分析］タブ： 収集した回答のフィルタ、回答のエクスポート、テキスト分析の実施、回答の編集または削除などができます。
- 結果タブ：データレポート用の動的なダッシュボードを作成します。
- ［レポート］タブ：印刷可能なレポートで結果を視覚化します。
データのレポート作成
このデータは、他のアンケートと同様に表示および分析できます。開始にあたってのヒントをいくつかご紹介します。
- 回答データのエクスポート
- 回答データの絞り込み
- 詳細レポートの概要
- 結果ダッシュボードの基本概要
ヒント：埋め込みアンケートデータをダッシュボードのソースとして追加すると、アンケート調査の下に表示されます。名前は、テンプレート化された埋め込みフィードバックインターセプトと同じですが、末尾に「- Survey」が追加されます。
アンケートの編集
テンプレート化された埋め込みフィードバックにリンクされているアンケートの視覚的な編集は、インターセプトを介してのみ行うことができます。アンケートの文言や外観を変更するには、「コンテンツのカスタマイズ」および「ルックアンドフィール」を参照してください。
テンプレート化された埋め込みフィードバックでの共同作業
注意：アンケートの回答を共有するには、インターセプトの所有者（インターセプトを作成したユーザー）である必要があります。共同作業を行うユーザーには、 プロジェクトの管理というウェブサイトフィードバックの権限が必要です。
インターセプトの所有者は、アンケートデータを表示する必要のあるライセンス内の他のユーザーと、テンプレート化された埋め込みフィードバックを共有できます。インターセプトを共有するには：
- アンケート回答の編集：この権限を無効にすると、共有者はデータを削除したり、回答編集機能を使用したりできなくなります。また、新しい回答リンクとしてアンケートを再度回答することはできますが、通常の再度回答リンクを作成することはできません。この権限を無効にすると、共有者はデータを追加できますが、既存のデータを変更することはできなくなります。
- アンケート結果の表示：この権限を無効にすると、［データと分析］タブと［レポート］タブが削除されます。 注意： このセクションに記載されているいずれかの結果権限を有効にするには、「アンケート結果の表示」も有効にする必要があります。
- アンケート結果のフィルタ：有効にすると、この権限を持つユーザーは、[データと分析] タブと [レポート] タブで収集された回答をフィルターできるようになります。
- 制限付きデータを表示：この権限を無効にすると、［データと分析］タブおよびすべてのエクスポートで、標準の連絡先フィールド、IPアドレス、緯度、経度の位置情報が非表示になります。
- アンケート結果のダウンロード：ユーザーが［データと分析］タブからデータをエクスポートすることを許可します。無効にすると、コラボレーターは [データと分析] タブからエクスポートできなくなりますが、レポートは引き続きエクスポートできます。
- クロス集計の使用：ユーザーはクロス集計機能を使用して結果を分析できます。
- 回答IDの表示：この権限を有効にすると、ユーザーは個々の回答に割り当てられる一意のIDである回答IDを表示できるようになります。
- テキスト分析を表示：有効にすると、共有者にはText iQで実行されたテキスト分析の表示権限が付与されます。共有者は、編集権限の詳細にある「テキスト分析の使用」権限がないと、テキスト分析の詳細を編集できません。
テンプレート化された埋め込みフィードバックのトラブルシューティング
このセクションでは、テンプレート化された埋め込みフィードバッククリエイティブの表示に関する問題のトラブルシューティング方法について説明します。この手順を使用して、サイトのどこにいつインターセプトが表示されるかをテストできます。
document.querySelectorAll('#does_not_exist').length
ヒント：上記のスニペットを実行したときに 1 より大きい数字が表示された場合は、インターセプトがページ上のそのセレクターに一致する最初の要素の下に表示されることに注意してください。上にスクロールして探す必要がある場合があります。
警告: 多くのサイトでは、デスクトップとモバイルデバイスでウェブサイトのコンテンツ構成が異なります。ブラウザの開発者ツールを使用して画面サイズを小さくシミュレーションし、上記のコードを実行して、その要素がモバイルとデスクトップに存在することを確認できます。
QSI.API.unload();
QSI.API.load().then(QSI.API.run);- エンジニアリングチームに、要素がページに追加された後で
QSI.API.run()を呼び出してもらいます。 - 適切なタイミングを確保するため、インターセプトの表示イベントを「カスタム JavaScript コードで表示(手動)」に更新しています。
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フックを使用している場合は、インターセプトのロジックがナビゲーションの完了後に実行されるようにしてください。
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースでは「プロジェクトコード」という名称になりましたが、これは何を意味しますか？
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースでは「プロジェクトコード」という名称になりましたが、これは何を意味しますか？
ゾーン(現在は「プロジェクト」)は、複数のクリエイティブとインターセプトのコレクションとして機能します。ゾーンコードには、ゾーン内のすべてのインターセプトが含まれます。これにより、個々のインターセプトにコードを追加し続けるのではなく、単一のコードをサイトに実装できます。これにより、ゾーンでコンテンツを有効化するたびにコードに自動的に追加され、変更が不要になるため、時間を大幅に節約できます。
プロジェクトはゾーンに相当するため、プロジェクトのデプロイメントコードは古いゾーンコードに相当します。
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
インターセプトを作成しましたが、有効化する前にテストしたいです。どうすればよいですか？
スタンドアロンインターセプト、ガイド付きインターセプト、ガイド付きクリエイティブの違いは何ですか？
スタンドアロンインターセプト、ガイド付きインターセプト、ガイド付きクリエイティブの違いは何ですか？
ガイド付きインターセプトとは、これらの手順を使用して、レスポンシブダイアログ、テンプレート化された埋め込みフィードバック、フィードバックボタン、埋め込みアプリのフィードバックなどの機能を作成することです。ガイド付きセットアップとも呼ばれるガイド付きインターセプトは、クリエイティブの視覚的要素と設定を1つの分かりやすいフローにまとめたもので、最初から最後までユーザーをガイドします。
ガイド付きクリエイティブとは、レスポンシブダイアログ、テンプレート化された埋め込みフィードバック、フィードバックボタン、埋め込みアプリフィードバックなどの機能を、代わりにこれらの手順を使用して作成する場合を指します。ガイド付きクリエイティブでは、ペアにする別のインターセプトを作成する必要があります。改良されたクリエイティブエディターは引き続き利用できますが、ガイド付きセットアップの残りの部分は利用できません。
クリエイティブとしてレスポンシブなダイアログを作成しましたが、代わりにガイド付きインターセプトとして使用したいです。切り替えてもよろしいですか？
クリエイティブとしてレスポンシブなダイアログを作成しましたが、代わりにガイド付きインターセプトとして使用したいです。切り替えてもよろしいですか？
ガイド付きセットアップをライブラリに保存できますか？
ガイド付きセットアップをライブラリに保存できますか？
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！