テンプレート化された埋め込みフィードバック
テンプレート化された埋め込みフィードバックについて
マーケティングブログ、サポート文書、開発者リソース、または別のサイトを実行する場合でも、コンテンツを最新の状態に保つ必要があります。Web サイトの規模が大きくなると、改善作業に集中することが難しくなります。また、制作しているコンテンツが効果的かどうかを判断し、その影響を測定することも重要です。
テンプレート化された埋め込みフィードバックにより、実行するコンテンツに関するデータを収集することが非常に容易になります。サイトコンテンツに簡単な便利な質問を埋め込むことができるため、訪問者はページ上でコンテンツを評価したり、フィードバックを提供したりすることができます。
注意:テンプレート化された埋め込みフィードバックをデプロイする Web サイトでコンテンツセキュリティポリシー (CSP) を使用している場合は、ドメイン *.qualtrics.comを許可リストに登録する必要があります。
テンプレート化された埋め込みフィードバックの開始
- ウェブサイト/アプリインサイトプロジェクトを開くか、新しいプロジェクトを作成します。
- [インターセプト]タブで、[新規作成]を選択します。
- [テンプレート化された埋め込みフィードバック]を選択します。
コンテンツのカスタマイズ
テンプレート化された埋め込みフィードバックをクリエイティブにする場合、最初のセクションでは、質問やボタンの外観など、クリエイティブのコンテンツをカスタマイズできます。画面の右側で、追加した設定に合わせてプレビューが更新されます。ボタンをクリックして、お礼のメッセージや後続の質問がどのようなものであるかをテストすることもできます。
- 質問: Web サイトの訪問者に表示される質問。たとえば、「これは役に立ちましたか?」などです。または「このコンテンツがどれほど役に立つかを評価してください」
- 形式: はい/いいえの回答、または 5 段階評価。
- スタイル:フィードバックのボタンをどのように表示するかを選択します。
- はい/いいえ:「はい」と「いいえ」のどちらかの単語を使用するか、同意/不同意のアイコンを使用します。
- ; 5点評価: 絵文字か星のいずれか。
- 肯定回答オプションテキスト / 否定回答オプションテキスト:[はい/いいえ]を選択した場合、インターセプトで使用される肯定的な単語と否定的な単語を変更できます。デフォルトでは、これは “はい” および “いいえ” です。
- 最後に感謝のメッセージを含めます。訪問者が評価をクリックすると、感謝のメッセージが表示されます。これをフィールドに入力します。
ヒント:フォローアップの質問を含めると、フォローアップの回答後に表示されます。ヒント:絵文字が表示される順序を逆にすることはできません。たとえば、ますますポジティブからますますネガティブに切り替えることができます。 - フォローアップの質問を含める:回答者がどのように質問に答えたかに基づいて、別の質問をすることができます。
- 最初に、この 2 番目の質問をトリガする回答を選択します。すべての回答または一部の回答を選択することもできますが、否定的なフィードバックを目標にすることをお奨めします。
- 次に、フォローアップの質問を記入します。
- 送信ボタンテキスト: フォローアップ質問を含める場合は、送信ボタンのテキストを決定します。
見た目と操作性(&A)
[見た目と操作性]セクションでは、クリエイティブのレイアウト、テキストの重み、色を調整できます。
- レイアウト:質問と回答の選択肢の向き。
- サイドバイサイドマトリックス
- 積み上げ
- テキストの重み: 質問テキストの重み。正規、ボールド、イタリックがあります。
- テキストの色: 質問テキストの色。
- ボタンのカスタマイズ:変更できる色は、前に選択した書式とスタイルによって異なります。
- はい/いいえ: ボタンテキスト、ボタンの枠線、およびボタンの塗りつぶしの色を変更します。
- Thumbs up/thumbs down: ボタンのアウトライン (枠線) の色を変更し、塗りつぶします。
- ; エモジス: カスタマイズなし – カラーがプリセットされている。
- ; 星: 星の輪郭の色(境界)を変更する。これは回答者がその星にカーソルを合わせたり選択したりしたときに星が埋まる色でもあります。
- 送信ボタンの色: 送信ボタンは、フォローアップ質問を含めた場合にのみ表示されます。送信ボタンは、訪問者がフィードバックを送信できる状態であることを示しています。この設定では、塗りつぶしの色を変更できます。
- 送信ボタンのテキスト色: 送信ボタンのテキストの色を変更します。
- CSS のカスタマイズ: テンプレート化された埋め込みフィードバックの CSS を必要に応じてカスタマイズします。ここで行った編集はプレビューに反映されません。展開前にインターセプトをテストしてください。
注意:以下のコードはそのまま提供されており、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。ただし、 コミュニティの経験豊かなユーザー(英語) に尋ねてみることは可能です。
- テンプレートを使用:アンケートテーマをクリエイティブのスタイル設定のテンプレートとして使用します。これにより、そのアンケートテーマの一次色と二次色の設定がインポートされます。
ヒント:クリエイティブの設定がテンプレートとして使用されるテーマから切り離されています。テンプレートのテーマが変更されても、クリエイティブの設定は更新されません。クリエイティブの設定を変更しても、テンプレートのテーマは変更されません。
翻訳
テンプレート化された埋め込みフィードバックのすべてのテキストの翻訳を追加できます。詳細な手順については、「フィードバックボタンの翻訳& レスポンシブダイアログ」ページを参照してください。
テンプレート化された埋め込みフィードバックがページに表示される場所の決定
テンプレート化された埋め込みフィードバックインターセプトを表示するウェブページの場所を指定します。これを行うには、テンプレート化された埋め込みフィードバックを含むページ上の要素を指す CSS セレクタ値を入力します。
例:[Qualtricsサポート]ページの[Qualtricsサポート]セクションに追加するとします。Google Chrome 開発者ツールを開いて、テンプレート化された埋め込みフィードバックを挿入する要素の CSS セレクタを見つけることができます。正しい要素を強調表示したら、右クリックしてセレクタをコピーします。セレクタは CSS の長い文字列である必要があります。この場合、コピーされたセレクタは “#content > div.quni-homepage.main-content > div > div > div > div.main-content-wrapper.sm-bottom > div > div.q-xm.log-div. ≯ ≯ div.q-xm.log-digt ≯ &ngt この CSS セレクタをコピーしたら、そのセレクタを Web サイト/App Insights プロジェクトの CSS セレクタフィールドにペーストします。クリエイティブは、DivID または CSSSelector の末尾にのみ追加できることに注意してください。
テンプレート化された埋め込みフィードバックが表示されるタイミングの決定
- [ターゲットロジックを追加]をクリックして、ボタンまたはダイアログが回答者に表示されるタイミングを決定します。
ヒント:ブラウザーに配置されたCookieから、すでにウェブサイトの訪問者に表示されているか、ページのURLなどさまざまな情報に基づいて外観を制限できます。詳細については、「アクションセットのロジック」に記載されているサポートページを参照してください。ヒント:キーボードのShift キーを押しながらプラス記号(+)をクリックして個別の論理セットを作成できます。条件の構築の詳細については、「高度なアクションセットのロジック」を参照してください。 - 条件の追加が完了したら、[次へ]をクリックします。
- 以下を選択します。 インターセプト表示イベント. この設定により、インターセプトが表示されるタイミングが決定されます。各オプションの説明については、リンク先のサポートページを参照してください。
- を設定します。 サンプル照会 レート.
- 追加するかどうかの決定 反復表示を防止. 設定すると、このクッキーに基づいてクッキーを設定できるようになります。詳細については、リンク先のサポートページを参照してください。
- [詳細オプションの表示] をクリックすると、デフォルトで選択されている [Cookie が無効の場合は非表示] および [ローカルストレージが無効の場合は非表示] が表示されます。これらの機能の詳細については、リンク先のページを参照してください。
ヒント:フィードバックはページに直接埋め込まれており、訪問者がウェブサイトをナビゲートしたり利用したりする能力を妨げないため、このインターセプトが表示される頻度を制限する理由はなく、実際はそうでないよりも混乱を招く可能性があります。テンプレート化された埋め込みフィードバックを非表示にすること、訪問者の 100% をサンプリングすること、繰り返し表示を回避しないこと、およびページのロード時に表示しないことをお奨めします。
- 終了したら、[次へ]をクリックします。
追加データポイントの追加
このステップでは、フィードバックデータとともに収集される追加のデータポイントを追加します。これにより、コンテンツフィードバックに関するレポート時に含めることができる詳細が大幅に改善されます。
- [ 埋め込みデータを追加 ]をクリックします。
- 値タイプを選択します。それぞれの説明については、リンク先のページを参照してください。
- さらにフィールドを追加するには、プラス記号 (+) をクリックします。
現在のページの URL (フィードバックを受け取るページでデータをフィルタリングまたは整理できるように)、(同様の理由で) ページタイトル、ページへの訪問者の滞在期間を収集することをお奨めします。
ページ URL、合計期間、およびページタイトルのキャプチャ
- CurrentPageUrl が現在のページ URL の値に設定されています
- PageTitle を JavaScript の値に設定
- TotalDuration を勤務地に費やした時間に設定
PageTitle
については、Web ページのタイトルをキャプチャできるように、JavaScript から値を設定する必要があります。でもどうするのですか? Google Chrome
を使用している場合は、ページでタイトルを選択し、右クリックして検査オプションを選択します。Chrome 開発者ツールウィンドウが開き、以下のように表示されます。該当する HTML エレメントを右クリックして、セレクタをコピーします (以下を参照)。
これにより、以下のような結果が返されます。
#firstHeading
以下の JavaScript を使用して、HTML エレメントからページタイトルの値を取得できます。
document.querySelector("#firstHeading").textContent
セレクタから返された内容に応じて、太字のテキスト
を編集できます。
JavaScript を用意したので、前述したように、[埋め込みデータ]フィールド[PageTitle]の値に入力します。完了したら、[埋め込みデータ]で[次へ]をクリックします。
インターセプトのテスト
ページの手順に従ってブックマークレットを保存し、インターセプトをテストします。必要に応じて、ウェブサイトを別のブラウザータブで開き、ウェブサイトでインターセプトがどのように表示されるかをテストできます。
が終了したら、[次へ]をクリックします。
ウェブサイトへのテンプレート化された埋め込みフィードバックのデプロイ
変更内容を確認します。本稼動前に編集する場合は、鉛筆アイコンをクリックしてその手順に戻ります。
コードスニペットをホストする Web サイトですべての変更を有効にする準備ができた
ら、 [公開] をクリックして有効化します。そうでない場合は、保存して閉じるをクリックします。いずれの Web サイトにもコードをデプロイしたことが
ない場合は、デプロイメントリソースおよび技術文書を参照してください。
ヒント:コードをデプロイする際は、個別のインターセプトだけでなく、プロジェクト全体を展開することに注意してください。
テンプレート化された埋め込みフィードバックインターセプトの変更
ウェブサイト/App Insightsプロジェクトの内部から、[インターセプト]タブでテンプレートに設定された埋め込みフィードバックを確認できます。
そこから、任意のセクションの横にある鉛筆アイコンをクリックして編集を行うことができます。
[インターセプトをプレビュー]をクリックすると、インターセプトをテストするオプションに戻ります。統計タブに、インターセプト統計が表示されます。インターセプトを無効に
するには、右上にある[有効化]トグルを使用します。これにより、保存した変更が保持されますが、サイトで有効でないことを確認してください。
調査の編集
テンプレート化された埋め込みフィードバックを作成すると、アンケートが自動的に生成されます。このアンケートを編集するには:
- [プロジェクト]ページに移動します。
- インターセプトを作成した[ウェブサイト/アプリインサイト]プロジェクトを開きます。
- インターセプトタブから、テンプレート化された埋め込みフィードバックを開きます。
- クリエイティブの横にある鉛筆アイコンをクリックします。
- 以下から選択します。
- コンテンツのカスタマイズ: 質問やボタンの外観など、クリエイティブのコンテンツを編集します。
- 見た目と操作性: クリエイティブのレイアウト、テキストの重み、色を調整します。
- 翻訳: インターセプトを翻訳します。
- 変更を保存します。
- インターセプトを保存または公開することを忘れないでください。
回答データの表示と分析
テンプレート化された埋め込みフィードバックが公開されると、クアルトリクスの他のアンケートプロジェクトと同様に、データのレポートやエクスポートができるようになります。
テンプレート化された埋め込みフィードバック回答への移動
テンプレート化された埋め込みフィードバックインターセプトを編集
するときに、[アンケートの回答を表示]をクリックします。レポートに直接移動します。
以下のタブおよび機能にアクセスすることができます。
- ワークフロータブ: 入力された調査結果に基づいて Qualtrics 内のさまざまなタスクをトリガします。たとえば、訪問者がコンテンツに不満を表明するときにライティングチーム用のチケットを作成したり、非常に肯定的なフィードバックを受け取るたびにマネージャーに電子メールを送信したりします。
- [データ]、[分析]タブ(&A): 収集した回答のフィルタリング、回答のエクスポート、テキスト分析の実施、回答の編集または削除などを行います。
- 結果タブ: データをレポートする動的ダッシュボードを作成します。
- レポートタブ: 印刷可能なレポートで結果を視覚化します。
データに関するレポート
このデータは、他のアンケートと同じ方法で表示および分析できます。始めるにあたってのアイデアをいくつかご紹介します。
テンプレート化された埋め込みフィードバックでのコラボレーション
インターセプトの所有者は、テンプレート付きの埋め込みフィードバックを、アンケートデータを表示する必要があるライセンス内の他のユーザーと共有できます。インターセプトを共有するには、次の手順を実行します。
- 概要ページで[アンケートを共有]をクリックします。
- ユーザーを名前で検索し、グループ作業者として追加します。複数のグループ作業者を追加できます。
- 詳細をクリックすると、グループ作業者のアクセスレベルを制御できます。
- グループ作業者の権限を選択します。オプションは次のとおりです。
- アンケートの回答を編集:この権限を無効にすると、コラボレーションユーザーはデータを削除したり、回答の編集機能を使用できなくなります。また、再回答アンケートを新しい回答リンクとして生成することはできますが、通常のやり直しリンクを生成することはできません。この権限を無効にすると、共有者はデータを追加できますが、既存のデータを変更することはできなくなります。
- アンケート結果を表示:この権限を無効にすると、[データ]、[分析]タブ、および[レポート]タブが削除されます。
注意:このセクションで説明する結果権限を有効にするには、[アンケート結果を表示]も有効にする必要があります。 - アンケート結果をフィルタリング:この権限を有効にすると、ユーザーは[データ]、[分析]、[レポート]タブで収集された回答をフィルタリングできます。
- 制限されたデータを表示:この権限を無効にすると、[データ]&、[分析]タブおよびすべてのエクスポートの標準の連絡先フィールド、IPアドレス、位置の緯度、位置の経度情報が検査されます。
- [アンケート結果をダウンロード]:[データ]タブと[分析]タブからデータをエクスポートできます。無効にすると、コラボレーションユーザーは[データと分析]タブからエクスポートできなくなりますが、レポートをエクスポートすることはできます。
- Crosstabs の使用: ユーザーがクロスタブ機能を使用して結果を分析できるようにします。
- 回答IDを表示:有効にすると、この権限によってユーザーは個別の回答に割り当てられた一意のIDである回答IDを表示できます。
- テキスト分析を表示:有効にすると、共有者にはText iQで実行されたテキスト分析の表示権限が付与されます。編集権限詳細にある[テキスト分析を使用]権限がない場合、コラボレーションユーザーはテキスト分析の詳細を編集できません。
- グループ作業者を削除するには、その横にあるマイナス記号 (–) をクリックします。
- グループ作業者の追加が完了したら、 [保存] をクリックします。
テンプレート化された埋め込みフィードバックのトラブルシューティング
このセクションでは、テンプレート化された埋め込みフィードバッククリエイティブの表示に関する問題のトラブルシューティング方法について説明します。これらのステップを使用して、いつ、どこにインターセプトが表示されるかをテストすることができます。
- ターゲティングの条件が満たされていることを再確認する。FAQ「インターセプトを有効にしたのですが、サイトに表示されません。このページの一番下にある “Why not?” には、ターゲティングロジックのトラブルシューティングに関する詳細情報が記載されています。
- クリエイティブにCSSセレクタが指定されていることを確認してください。
- Qualtricsゾーンスニペットと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コードによる表示 (手動)」に更新し、適切なタイミングを確保。
- 要素がページに追加された後、エンジニアリングチームに