メインコンテンツにスキップ
Loading...
Skip to article
  • Customer Experience
    Customer Experience
  • Employee Experience
    Employee Experience
  • Brand Experience
    Brand Experience
  • Core XM
    Core XM
  • Design XM
    Design XM

カスタム埋め込みフィードバック


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


ヒント:このページで説明する機能にアクセスできない場合は、営業担当にお問い合わせください。デジタルフィードバックとデジタル向け CustomerXM の違いの詳細については、デジタルフィードバックとを参照してください。デジタル向け CustomerXM

カスタム埋め込みフィードバックのクリエイティブについて

カスタム埋め込みフィードバックを使用すると、ページの一部として表示されるカスタムコンテンツを作成できます。このカスタムコンテンツは、広告から埋め込みアンケートまで、あらゆるものにできます。

例:このスクリーンショットでは、訪問者が支払いを完了すると、アンケートがウェブページに埋め込まれて表示されます。アンケートはアンケートプラットフォームで作成され、カスタムの埋め込みフィードバッククリエイティブを使用してページに埋め込まれます。

画像:オンライン購入後に Web サイトでフィードバックを募るために使用される組み込みのカスタム HTML クリエイティブ

カスタム埋め込みフィードバックは、フィードバックボタンのような受動的なクリエイティブよりも目立つ一方、ウェブサイトの訪問者が何を中断しても圧倒されることもありません。顧客がやり取りの後でフィードバックを迅速に提供するトレーニングを受けている世界では、カスタムフィードバックを直接ページに埋め込むことで、回答者はエクスペリエンス中にフィードバックを提供できます。

埋め込みカスタムフィードバッククリエイティブはコンテンツ管理にも役立ち、特定のタイプのウェブサイトの訪問者に表示するアンケートを選択できます。

たとえば、実店舗の場所に近いエリアにある訪問者にのみ割引オファーを表示し、それ以外の場所には代替品目を表示することができます。

例:以下のスクリーンショットでは、訪問者に今日の買い物について尋ねます。靴を選択した場合は、当社の Web サイトの[靴]セクションに直接リダイレクトできます。

画像:訪問者に靴の裏かジャケットを選ぶように求めるページに埋め込まれたアンケート

ヒント:この機能は、以前はカスタムHTMLクリエイティブと名付けられていました。

カスタムの埋め込みフィードバックの実装

  1. カスタム埋め込みフィードバックのクリエイティブを生成します
    注意:クリエイティブの名前は100文字以下で入力してください。
  2. ウェブチームに、カスタムの埋め込みフィードバックを挿入する「コンテナ」をウェブサイトで指定してもらいます。このスペースには、ID 属性を持つ HTML 要素を含める必要があります。引用符の間の HTML ID を識別してコピーします。
    要素検査ウィンドウの画像。クリエイティブが移動するコンテナの HTML ID が強調表示されます。
    多くの場合、ID の HTML タグが適切な場所にすでに存在するため、サイトの変更は必要ありません。

    ヒント:ブラウザーの[要素を確認]機能を使用して、要素の HTML IDを特定します。ほとんどのブラウザでは、検査するページの部分を右クリックし、[Inspect] または [Inspect Element] を選択するだけです。
  3. インターセプトを作成します。
  4. インターセプトのアクションの[オプション]メニューで、[詳細オプション]を選択します。
    インターセプトの詳細オプション
  5. ターゲットコンテナの HTML ID をクリエイティブの挿入ポイントフィールドに貼り付けます。
    画像:[詳細オプション]の[クリエイティブ挿入ポイント]フィールド。コンテナの HTML ID の値が項目に入力されます。
  6. 保存]をクリックします。
  7. ウェブサイトのこのページにアクセス者が来ると、クアルトリクスは指定したIDのHTML要素を検索し、そのdivコンテナにクリエイティブを挿入します。
ヒント:上記の例では、ページにQualtricsアンケートを埋め込みます。同様の効果を得るには、クリエイティブを編集するときに、アンケートをページ上で取り上げるサイズと形状に埋め込みターゲットを追加するだけです。

カスタムの埋め込みフィードバックオプション

クリエイティブの[オプション]セクションには、カスタムの埋め込みフィードバッククリエイティブに固有の設定があります。

カスタムポジショニング

カスタム埋め込みフィードバックが、ウェブサイトに挿入されるターゲットコンテナよりも小さい場合があります。この場合、カスタム位置設定を使用して、ターゲットコンテナに関して HTML が表示される場所を指定することができます。

クリエイティブの[オプション]セクションでのカスタム位置

位置をさらに制御するには、クリエイティブのX位置またはY位置を最初の位置からオフセットするか、[ページに固定]を選択すると、カスタム埋め込みフィードバックがスクロールしながら訪問者に続きます。

ターゲットコンテナーの中身を置き換える

クリエイティブの[オプション]セクションの詳細オプション

デフォルトでは、カスタム埋め込みフィードバックのクリエイティブがページに挿入されると、ターゲット HTML 要素の既存のコンテンツが置き換えられます。このオプションはターゲットコンテナの内容を置換として選択されています。

ターゲットコンテナーに追加

ターゲットコンテナの内容を置き換える代わりに、ターゲットコンテナに追加を選択して、既存のコンテンツの後にクリエイティブを配置することができます。

ターゲットコンテナーの前に挿入

このオプションを使用すると、ターゲットコンテナの前にカスタム埋め込みフィードバックを挿入できます。

ヒント:カスタム位置設定のオプションは無視されます。

ターゲットコンテナーの後に挿入

このオプションを使用すると、ターゲットコンテナの後にカスタム埋め込みフィードバックを挿入できます。

ヒント:カスタム位置設定のオプションは無視されます。

Z インデックスに関する注記

Z インデックスは、エレメントが重なる場合に Web ページのどのエレメントをトップにするかを指定する CSS プロパティです。デフォルトでは、クリエイティブは、常に最上部に表示されるように、ページの他の要素よりも z インデックスが高くなります。

通常、これが最適ですが、望ましくない場合もあります。たとえば、ドロップダウンメニューはカスタムの埋め込みフィードバックによってカバーされます。

警告: 注意してください。埋込ターゲットに Z インデックス CSS を追加しないでください。ただし、他のエレメントタイプに Z インデックスを追加しても問題ありません。

クアルトリクスロゴはドロップダウンメニューと重なっています

カスタム埋め込みフィードバックの z インデックスを調整するには、以下の手順に従います。

  1. クリエイティブを表示する Web ページに移動し、[開発者ツール]または[要素の検査]ツールを開きます。
    画像:ページを検査する際の要素ウィンドウ
  2. “QSI” で始まる div クラスを特定し、引用符の間の値をコピーします。次に、”QSIUserDefinedHTML” と “SI_” で始まる文字列をピリオド (.) で置き換えます。以下の例では、以下をコピーします。
    QSIUserDefinedHTML SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer

    スペースをピリオドで置き換えた後、以下を実現しました。

    QSIUserDefinedHTML.SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer

    画像:ページを検査する際の QSI の検索

  3. Qualtricsアカウントで、 編集 クリエイティブのセクションを参照してください。
    カスタム HTML クリエイティブエディタでのソースの編集
  4. 任意の要素をダブルクリックして変更するか、新しい空白要素を作成します。
    警告: 埋め込まれたターゲットに Z インデックス CSS エレメントを追加しないことをお奨めします。これは、ページの他の部分が誤ってカバーされる可能性があるためです。ただし、他のエレメントタイプに Z インデックスを追加しても問題ありません。
  5. リッチコンテンツエディタの上部にあるソースをクリックして、HTML ビューに入ります。
  6. 以下のコード (style タグを含む) をソースに貼り付けます。
    <style type="text/css"> .QSIUserDefinedHTML{z-index:1;} </style>
  7. “QSIUserDefinedHTML” をステップ 2 で取得した ID に置き換え、z インデックスの値を Web ページに適したものに置き換えます。
    <style type="text/css"> .QSIUserDefinedHTML.SI_4PEs8K4EkCbmSdT_UserDefinedHTMLContainer{z-index:1;} </style>

    HTML がカスタム HTML クリエイティブのソースビューに入力されました

  8. プロジェクトコードが既にウェブサイトのソースコードにある場合は、[公開]ボタンをクリックしてサイトに変更をプッシュします。
  9. コードがウェブサイトのソースコードにない場合は、[インターセプトをテスト]を使用してウェブサイトでクリエイティブをテストし、すべてが正しくレイヤーされていることを確認できます。
  10. それでも階層化が正しくない場合は、Z インデックス値を大きな数に変更してクリエイティブをページ上に積み上げるか、より小さい (さらに負の数の) 数値に変更してスタックを低くすることを検討してください。

FAQ

当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。