テンプレート化された埋め込みフィードバック
スイート
Customer Experience
Strategy & Research
製品
Qualtrics
このページの内容
ヒント：このページで説明する機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとCustomerXM for Digitalの違いの詳細については、デジタルフィードバックとCustomerXM for Digitalを参照してください。
テンプレート化されたフィードバックについて
マーケティングブログ、サポートドキュメント、開発者リソース、その他のサイトのいずれを運営する場合でも、コンテンツは常に最新の状態に保つ必要があります。ウェブサイトの規模が大きくなると、改善の焦点を絞るのが難しくなる。また、制作しているコンテンツが効果的かどうかを判断し、その影響を測定することも重要だ。
テンプレート化された埋め込みフィードバックにより、実行したコンテンツに関するデータを非常に簡単に収集することができます。サイトのコンテンツに簡単な役立つ質問を埋め込むことができるので、訪問者はコンテンツを評価し、ページ上でフィードバックを提供することもできます。
Qtip:私たちは、テンプレート化された埋め込みフィードバックのカスタマイズ版を使用して、サポートサイトで顧客からのフィードバックを収集しています。各セクションの最後にある「参考になりましたか」アンケートをご覧ください。サポートサイトのカスタム実装を除き、フィードバックはユニークなページにのみ埋め込むことができます。
注意: テンプレート埋め込みフィードバックを導入したいウェブサイトでコンテンツセキュリティポリシー（CSP）を使用している場合、ドメイン*.クアルトリクス.comを許可する必要があります。
Qtip:この機能は以前はEmbedded Feedbackという名前でした。
テンプレート化されたフィードバックの作成
プラットフォームはウェブサイトに設定してください。
Embedded を選択する。
インターセプトの作成」をクリックする。
セットアップページで、アピアランスを選択します。
このサポートページに記載されている以下の手順を完了してください：
必要であれば、翻訳を加える。
Cssセレクタを選択します。リンク先を参照。
ターゲットロジックを追加する。
Qtip:埋め込みフィードバックには、インターセプトが正しいページに表示されるように、URLセグメントをターゲット化するなどのターゲティングロジックを追加することをお勧めします。インターセプトはページに埋め込まれており、空白の場合混乱を引き起こすかもしれないので、埋め込みフィードバックを見るユーザーを制限するためにターゲットロジックを使うことはお勧めしません。
埋め込みデータを追加します。下記のページURL、総滞在時間、ページタイトルの取得を参照してください。
注意: このステップは、評価されているコンテンツの特定のページ（またはセクション）ごとにデータをフィルタリングまたは区切りたい場合に重要です。
インターセプトの表示タイミングやXM DIRECTORYへの接続など、インターセプトの設定を調整します。
Qtip:フィードバックはページ上に埋め込まれており、訪問者がウェブサイトをナビゲートしたり使用したりする妨げにならないため、このインターセプトが表示される頻度を制限する理由はありません。私たちは、テンプレート化された埋め込みフィードバックを非表示にしないこと、訪問者の100%をサンプリングすること、繰り返し表示を防止しないこと、ページロード時に表示することをお勧めします。
変更を公開します。
qtip:最後のセットアップの手順と発射の詳細については、Creating Guided Interceptsも参照してください。
コンテンツのカスタマイズ
注意: テンプレート化されたフィードバック機能の場合、別途アンケート調査を作成する必要はありません。この機能により、バックエンドで自動的にアンケート調査を作成することができます。
テンプレート化された埋め込みフィードバッククリエイティブを作成する場合、最初のセクションでは、質問やボタンの外観など、クリエイティブのコンテンツをカスタマイズすることができます。画面の右側では、追加した設定に合わせてプレビューが更新され、ボタンをクリックして、ありがとうございますメッセージやフォローアップ質問がどのように表示されるかをテストすることもできます。
質問ウェブサイトの訪問者に表示される質問。例えば、”役に立ちましたか？”や “このコンテンツがどの程度役に立ったか評価してください “など。
形式Yes/No回答または5段階評価。
スタイルフィードバックのボタンをどのようにするかを選択します。
- Yes/No：「Yes」「No」の文字、または親指を立てる／立てるアイコン。
- 5段階評価： 絵文字か星。
肯定的回答の選択肢テキスト / 否定的回答の選択肢テキスト：Yes/No」を選択した場合、インターセプトでどのような肯定的、否定的な言葉が使われるかを変更することができます。デフォルトでは “yes “と “no “である。
最後にありがとうございますメッセージを入れる： 訪問者が評価をクリックすると、ありがとうございますメッセージが表示されます。これをフィールドタイプに入力する。
Qtip:フォローアップの質問が含まれている場合、これはフォローアップの回答後に表示されます。
Qtip:絵文字の表示順を逆にすることはできません（例：ポジティブな絵文字からネガティブな絵文字へ）。
フォローアップ質問を含める：回答者がどのように質問に答えたかに基づいて、追加の質問をすることができます。
- まず、この2番目の質問のトリガーとなる答えを選ぶ。ネガティブ・フィードバックをターゲットにすることをお勧めしますが、すべての答えを選択しても、いくつかの答えを選択してもかまいません。
- 次へ、フォローアップの質問を書く。
送信ボタンのテキスト：フォローアップ質問を含む場合は、送信ボタンの文面を決定する。
Qtip：見た目と操作性、または翻訳に満足するまで「次へ」をクリックしないでください。
見た目と操作性
見た目と操作性」では、クリエイティブのレイアウトや文字の重み設定、色などを調整することができます。
- レイアウト： 質問の向きと答えの選択肢の向き。
- 並列
- 積み上げ
- テキストの重み設定：質問文の重み設定。レギュラー、ボールド、イタリックのいずれでも可。
- 質問文の色：質問文の色。
- ボタンのカスタマイズ：変更できる色は、先に選択したフォーマットとスタイルによって異なります。
- Yes/No：ボタンテキスト、ボタンボーダー、ボタン塗りつぶしの色を変更する。
- サムズアップ/サムズダウン： ボタンの輪郭（ボーダー）と塗りつぶしの色を変更します。
- 絵文字：カスタマイズ不可 – 色はプリセットされています。
- 星：星の輪郭（ボーダー）の色を変更します。これは、回答者が星の上にカーソルを置いたり、星を選択したときに、星が塗りつぶされる色でもあります。
- 送信ボタンの色:送信ボタンは、フォローアップの質問が含まれている場合にのみ表示されます。送信ボタンは、訪問者がフィードバックを送信する準備ができていることを示す方法です。この設定により、塗りつぶしの色を変更できる。
- 送信ボタンの文字色：送信ボタンの文字色を変更します。
- Cssをカスタマイズする： テンプレート化された埋め込みフィードバックのCssを自由にカスタマイズできます。ここで行った編集はプレビューには反映されません。デプロイする前にインターセプトをテストすることを忘れないでください。
注意: 以下のコードはそのまま提供され、実装するにはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。
- テンプレートを使用する：クリエイティブのスタイル設定のテンプレートとしてアンケートテーマを使用します。これにより、そのアンケートテーマのプライマリーカラーとセカンダリーカラーの設定がインポートされます。
Qtip: クリエイティブの設定は、テンプレートとして使用されているテーマとは切り離されています。テンプレートテーマが変更されてもクリエイティブの設定は更新されず、クリエイティブの設定を変更してもテンプレートテーマは変更されません。
Qtip:テンプレート化された埋め込みフィードバッククリエイティブの色をさらにカスタマイズしたい場合は、見た目と操作性セクションのドロップダウンメニューをご利用ください。
Cssセレクタ
テンプレート化された埋め込みフィードバックインターセプトを表示させたいウェブページの場所を指定します。テンプレート化された埋め込みフィードバックを含むべきページ上の要素を指すCssセレクタ値を入力することによって、これを行うことができます。
例: クアルトリクスサポートページの「クアルトリクスサポート」にインターセプトを追加したい場合。ブラウザの開発者ツールを開いて、インターセプトを挿入したい要素のCssセレクタを見つけることができます。正しい要素が強調表示されたら、右クリックしてセレクタをコピーします。セレクタはCssの長い文字列でなければならない。この場合、コピーされたセレクタは、”#content > div.quni-homepage.main-content > 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セレクタを保存」をクリックします。
Qtip:Cssセレクタが空白のままか無効な場合、開発者ツールに “DOMException：というテキストが含まれたエラーが表示されます。セレクタは検証されているが、その要素がページ上に存在しない場合、このエラーは発生しないことに注意してください。例えば、Cssセレクタに “#.<tes,t “と入力するとエラーになりますが、セレクタに “h1 “と入力し、ページ上にh1要素がない場合はエラーになりません。
Qtip:テンプレート化された埋め込みフィードバックは、DivIDまたはCSSSelectorの末尾にのみ付加できることに注意してください。
ページURL、総滞在時間、ページタイトルの取得
- CurrentPageUrlに現在のページURLの値を設定。
- JavaScriptで設定されたPageTitle
- TotalDurationはサイト滞在時間に設定される。
PageTitleについては、JavaScriptから値を設定し、ウェブページのタイトルを取得できるようにする必要があります。でも、どうやって？
グーグル・クロームをお使いの場合は、ページのタイトルを選択して右クリックし、「検査」オプションを選択するだけです。Chromeデベロッパーツールのウィンドウが開き、以下のように表示されるはずです。対応するHtml要素を右クリックし、以下のようにセレクタをコピーします。
これは次のような結果を返すはずだ：
#ファースト・ヘディング 以下のJavaScriptを使えば、Html要素からページタイトルの値を取得できる：
document.querySelector("#firstHeading").textContent セレクタが何を返したかによって、太字のテキストを編集することができる。
Qtip:Chromeデベロッパーツールのコンソールで、値がどのように見えるかテストできます。
JavaScriptができたので、先ほど示したように、埋め込みデータフィールド “PageTitle “の値に入れてください。完了したら埋め込みデータの次へをクリックします。
埋め込みアンケート調査
テンプレート埋め込みフィードバックを作成すると、自動的にアンケート調査が作成されます。このアンケートとそのデータを表示するには、「セットアップ」→「接続済みアンケート」→「アンケート名」をクリックします。
注意: このクリエイティブのアンケートにアクセスするには、上記のように「テンプレート化された埋め込みフィードバック」を開く必要があります。このアンケートは、アンケート ID（例：SV_XXXXXX）を知っていても、プロジェクトページで直接見つけることはできません。
アンケート調査の機能
- ワークフロータブ:クアルトリクスに届いたアンケート調査結果に基づいて、さまざまなタスクをトリガーできます。例えば、訪問者がコンテンツに不満を表明した場合はライティングチームにチケットを作成し、非常にポジティブなフィードバックを受け取った場合はマネージャーにメールを送信します。 Qtip: ワークフロー］タブには、現在、アンケート調査を作成したユーザーのみがアクセスできます。
- データと分析タブ: 収集した回答のフィルタ、回答のエクスポート、テキスト分析の実施、回答の編集や削除など。
- 結果タブ:データをレポートするダイナミックなダッシュボードを作成できます。
- レポートタブ:印刷可能なレポートで結果を図表化。
データのレポート
このデータは、他のアンケート調査と同じように表示、分析することができます。ここで、いくつかのアイデアを紹介しよう。
- 回答データのエクスポート
- 回答データのフィルタリング
- 詳細レポートの概要
- 結果ダッシュボード 基本概要
- CXダッシュボード入門
Qtip:埋め込みアンケートデータをダッシュボードのソースとして追加する場合、アンケートの下に表示され、テンプレート化された埋め込みフィードバックインターセプトと同じ名前になりますが、最後に「-アンケート」が追加されます。
アンケート調査の編集
テンプレート化された埋め込みリンクにリンクされたアンケートは、インターセプトを通してのみ視覚的な編集を行うことができます。アンケートの文言や見た目を変更するには、「内容と見た目と操作性のカスタマイズ」を参照してください。
テンプレート化された埋め込みフィードバックの協力体制
注意: アンケートの回答を共有するには、インターセプトの所有者（インターセプトを作成したユーザー）である必要があります。協力体制にあるユーザーには、Manage Projectsというウェブサイトフィードバックパーミッションが必要です。
インターセプトの所有者として、アンケートデータを表示する必要があるライセンス内の他のユーザーと、テンプレート化された埋め込みフィードバックを共有することができます。インターセプトを共有するために：
サマリーページで、アンケートの共有をクリックします。
ユーザーの名前から検索して、共有者として追加することができます。複数の共有者を追加することができます。
詳細]をクリックすることで、共有者のアクセシビリティレベルをコントロールすることができます。
共有者の権限を選択します。オプションは次のとおりです。
- アンケート調査の回答の編集：この権限を無効にすると、共有者がデータを削除したり、回答の編集機能を使用したりできなくなります。また、新しい回答リンクとしてアンケートをやり直すことはできますが、通常のやり直しリンクを作成することはできません。この権限を無効にすると、共有者はデータを追加できますが、既存のデータを変更することはできなくなります。
- アンケート調査の結果を表示する：この権限を無効にすると、「データと分析」タブと「レポート」タブが削除されます。 注意してください: このセクションで説明するアンケート権限のいずれかを有効にするには、アンケート結果の表示も有効にする必要があります！
- アンケート調査結果のフィルタ：この権限を有効にすると、「データと分析」および「レポート」タブで、収集した回答にフィルタをかけることができます。
- 制限されたデータを表示します：この権限を無効にすると、「データと分析」タブおよびすべてのエクスポートにおいて、標準の連絡先フィールド、IPアドレス、位置の緯度、経度情報が検閲されます。
- アンケート調査結果のダウンロード：データと分析タブからデータをエクスポートできます。無効にすると、共有者は「データと分析」タブからエクスポートできなくなりますが、レポートはエクスポートできます。
- クロス集計を使用する：クロス集計機能を使って結果を分析することができます。
- レスポンス ID の表示:この権限を有効にすると、ユーザーはレスポンス ID（個々の回答に割り当てられた固有の ID）を表示できます。
- テキスト分析を表示：有効にすると、共有者にはText iQで実行されたテキスト分析の表示権限が付与されます。協力者は、権限の詳細の編集にあるテキスト分析を使用する権限がなければ、テキスト分析の詳細を編集することはできません。
共有者を削除するには、共有者の次へマイナス記号（-）をクリックします。
共有者の追加が完了したら、「保存」をクリックします。
テンプレート化されたフィードバックのトラブルシューティング
このセクションでは、テンプレート化された埋め込みフィードバッククリエイティブの表示に関する問題のトラブルシューティング方法について説明します。インターセプトがいつ、どこに表示されるかは、以下の手順でテストできます。
ターゲット条件が満たされているか再確認する。FAQ「インターセプトを有効化したのですが、サイトに表示されません。このページの一番下にある “Why not?” には、ターゲットロジックのトラブルシューティングに関する詳細情報が記載されています。
クリエイティブにCssセレクタが指定されていることを確認してください。
クアルトリクスゾーンのスニペットとCssセレクタがあるウェブページに移動します。
ウェブブラウザの開発者ツールを開く。
以下のコード・スニペットでは、#does_not_existをステップ2のCssセレクタに置き換えて、ブラウザでこのスニペットを実行
します:document.querySelectorAll('#does_not_exist').lengthゼロ（0）が返された場合、あなたのコード・スニペットで入力されたセレクタは、ページ上のどの要素にもマッチしていません。開発チームと協力してセレクタがサイト上にあることを確認するか、このセクションの手順に従って正しいセレクタを特定する必要があります。
1以上が返されたにもかかわらずインターセプトが表示されない場合は、次のトラブルシューティングのステップへ進んでください。
Qtip:上記のスニペットを実行したときに1以上の数字が表示された場合、インターセプトはページ上のセレクタにマッチする最初の要素の下に表示されることを覚えておいてください。上にスクロールしないと見つからないかもしれない。
警告: 多くのサイトでは、デスクトップ用とモバイル用でコンテンツの構成が異なります。ブラウザの開発ツールを使って小さい画面サイズをシミュレートし、上記のコードを実行して、モバイルとデスクトップで要素が存在することを検証することができます。
ブラウザの開発者コンソールで、以下のスニペットを実行
する:QSI.API.unload();
QSI.API.load().then(QSI.API.run)；これらのコマンドを実行することでインターセプトが表示されるのであれば、インターセプトがロードされるタイミングに問題があるということになる。これを解決するには
- 要素がページに追加された後、エンジニアリングチームが
QSI.API.run() を呼び出すようにします。 - インターセプト表示イベントを「カスタムJavaScriptコードによる表示 （手動）」に更新し、適切なタイミングを確保。
FAQs
インターセプトを有効にしたのですが、サイトに表示されないのです。なぜですか？
インターセプトを有効にしたのですが、サイトに表示されないのです。なぜですか？
インターセプトを実装しても表示されない原因は数多く考えられます。これらの原因は、インターセプトの設定そのものに起因する場合と、コードの実装に起因する場合があります。
- 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で始まるコールを探します。これは、表示ロジックのチェックを実行するコードそのものです。この形式に一致するものが見つからない場合は、プロジェクトコードの実装に問題があります。コードを配置する最適な場所については、実装 のサポートページを参照してください。
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースで「プロジェクトコード」と呼ばれるようになりましたが、これはどういう意味でしょうか。
ゾーンコードとインターセプトコードの違いは何ですか？新しいインターフェースで「プロジェクトコード」と呼ばれるようになりましたが、これはどういう意味でしょうか。
インターセプトコードは、生成されたインターセプトに固有のものであった。つまり、特定のページに何かを表示させたい場合、そのURLにコードを配置すればよいのです。これは、サイトにたくさんのコードをさまざまな場所に追加する必要があるため、あまり一般的ではありませんでした。古いインターセプトコードはまだ使えますし、これからも使えますが、新しいUIで新しいコードを生成することはできません。
ゾーン（現在は「プロジェクト」）は、複数のクリエイティブやインターセプトの集合体として機能します。ゾーンコードには、そのゾーン内のすべてのインターセプトが含まれています。これにより、個々のインターセプトのためのコードを継続的に追加する代わりに、サイト上で単一のコードを実装することができます。ゾーンのコンテンツを有効にするたびに、自動的にコードに追加されるため、変更する必要がなく、時間を大幅に節約することができます。
プロジェクトはゾーンに相当するので、 プロジェクトの展開コード は、古いゾーンコードに相当します。
ゾーン（現在は「プロジェクト」）は、複数のクリエイティブやインターセプトの集合体として機能します。ゾーンコードには、そのゾーン内のすべてのインターセプトが含まれています。これにより、個々のインターセプトのためのコードを継続的に追加する代わりに、サイト上で単一のコードを実装することができます。ゾーンのコンテンツを有効にするたびに、自動的にコードに追加されるため、変更する必要がなく、時間を大幅に節約することができます。
プロジェクトはゾーンに相当するので、 プロジェクトの展開コード は、古いゾーンコードに相当します。
インターセプトを構築したが、アクティベーションの前にテストしたい。どうすればいいのでしょうか？
インターセプトを構築したが、アクティベーションの前にテストしたい。どうすればいいのでしょうか？
ブックマークレット というツールがあり、これを使えば、どんなインターセプトでもアクティベートすることなくテストすることができます。
What’s the difference between standalone intercepts, guided intercepts, and guided creatives?
What’s the difference between standalone intercepts, guided intercepts, and guided creatives?
Standalone intercepts and creatives use the legacy website insights editor. Standalone intercepts and creatives have to be pieced together, instead of being part of one guided flow.
Guided intercepts are when you create features like responsive dialogs, templated embedded feedback, feedback buttons, and embedded app feedback using these steps. Also known as guided setups, guided intercepts combine the visual element of a creative and the settings of a creative into one easy-to-follow flow that will guide you from start to finish.
Guided creatives are when you create features like responsive dialogs, templated embedded feedback, feedback buttons, and embedded app feedback using these steps instead. With a guided creative, you need to create a separate intercept to pair it with. You still get the improved creative editor, but not the rest of the guided setup.
Guided intercepts are when you create features like responsive dialogs, templated embedded feedback, feedback buttons, and embedded app feedback using these steps. Also known as guided setups, guided intercepts combine the visual element of a creative and the settings of a creative into one easy-to-follow flow that will guide you from start to finish.
Guided creatives are when you create features like responsive dialogs, templated embedded feedback, feedback buttons, and embedded app feedback using these steps instead. With a guided creative, you need to create a separate intercept to pair it with. You still get the improved creative editor, but not the rest of the guided setup.
I created a responsive dialog as a creative, but I want to use it as a guided intercept instead. Can I switch it over?
I created a responsive dialog as a creative, but I want to use it as a guided intercept instead. Can I switch it over?
No, you cannot switch it from a creative to an intercept, or vice versa. Once you create a responsive dialog (or feedback button, templated embedded feedback, or embedded app feedback), it is permanently a guided intercept or a guided creative.
Can I save guided setups to the library?
Can I save guided setups to the library?
Guided creatives can be saved to the library. Guided intercepts cannot be saved to a library.
当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！