埋め込みコンテンツの作成

最終更新日:

注:このサービスは現在クローズドベータ版であるため、一部のお客様のみにテストとして提供されています。以下の情報は、誓約、保証、法的義務を伴うものではありません。ここに記載されている機能の開発、リリース、およびタイミングは、Pendoの裁量により予告なく変更される場合があります。このフィーチャーを早期に試し、フィードバックを提供したいとお考えの場合は、Pendoのアカウント担当者にご連絡ください。

埋め込みコンテンツは、シームレスでユーザーフレンドリーなアプローチでアプリ内に情報を配信します。インターフェースを一時的にブロックするオーバーレイガイドとは異なり、埋め込みコンテンツはメッセージをページに直接統合します。そのため、ユーザーは集中力を失ったり中断することなく、サポートを利用したり手順を確認することができます。この方法は、状況に即した情報を必要なときに必要な場所で正確に提供することでユーザビリティを高め、より直感的な学習体験を可能にし、フラストレーションの可能性を軽減します。ガイド作成者は、よりクリーンで一貫性のあるデザインに貢献するコンテンツを作成することができ、エンゲージメントと全体的なユーザー満足度の両方を向上させることができます。

注:このクローズドベータ版では、初回閲覧数の指標のみが測定されます。

ページにオーバーレイするガイドを作成する方法については、ガイドの作成を参照してください。

注:この機能は、ガイドのProエディションがパッケージに含まれているPendoサブスクリプションでのみ利用できます。ご利用のプランにこの機能が含まれているかどうか不明な場合、またはこの機能に関心をお持ちの場合は、Pendoのアカウント担当者にお問い合わせください。

ベストプラクティス

埋め込みコンテンツを構築する場合、Pendoでは次のことを推奨します。

  • まず、自社のエンジニアリング部門とコミュニケーションを取ることが良いでしょう。ただし、推奨はするものの、必須ではありません。
    • Pendoがコンテンツを埋め込む場所として機能する、一意のIDを持つdivかコンテナを作成します。これは必須ではありませんが、このようなコンテナを作成することで、ページの残りの部分が期待どおりに動作するようになります。
    • ターゲットページ要素内の埋め込みコンテンツの位置は、その要素とその親要素の配置と位置によって異なります。ページの構造とデザインに精通している同僚がいると、滞りなくスムーズに操作することができます。
  • デザインパートナーやUIパートナーと協力しましょう。埋め込みコンテンツは、他のコンテンツと連動するように作られています。そのため、ブランドの他の部分と一貫性のあるテーマやスタイルがあれば、提供される情報に対するユーザーの信頼感が高まります。
  • デザインの際はコンテナの寸法に注意してください。コンテンツは、アプリ内のコンテナのCSSの影響を受ける可能性があります。
  • [置き換え(Replace)]を使用するのは、埋め込みコンテンツをターゲットとするために使用しているコンテナに背景画像がある場合のみです。
  • 複数の埋め込みコンテンツコンテナを同じ場所にターゲットするよりも、複数のステップを持つ埋め込みコンテンツを作成することを検討します。コンテンツは順序付けされていないため、複数の埋め込みコンテンツコンテナを同じ場所にターゲットした場合、コンテンツがどの順序で表示されるかは保証されません。

ユースケース

Pendoでは、コンテンツをページの他の部分と連動させたい場合には埋め込みコンテンツを使用することをお勧めします。重要な情報をユーザーに表示したい場合、ステップバイステップのウォークスルーが必要な場合、またはアプリケーション内の特定の要素にユーザーを誘導する必要がある場合は、埋め込みコンテンツの使用はお勧めしません。

example.png

埋め込みコンテンツを使用する場合に推奨するユースケースを以下に示します。

  • アプリケーション上部の重要なナビゲーションを覆うことなく、定型的なメッセージや法的通知(サーバーのメンテナンス、新しい利用規約、更新されたプライバシーポリシーなど)を配信します。
  • アプリケーションの特定の機能にアクセスできないお客様向けに、アップセルまたはクロスセルメッセージを埋め込みます。
  • 特定のセグメント向けに記述(またはターゲット化)できるフォームに記入するユーザーに追加情報を提供します。
  • ログインページやホームページに新機能、イベント、ウェビナーを宣伝して、関心を高め、インバウンドの興味を高めます。
  • 特定の日付までに実行する必要があるアクションをユーザーに知らせます。
  • 新しいUI要素をテストし、開発チームに届く前にその影響を測定します。
  • 埋め込むことのできないリソースセンターに埋もれてしまう可能性がある情報を表示するために、アプリケーション内に専用の情報スペースを設けます。

要件

  • エージェントのバージョンは2.252.0以上である必要があります。
  • 埋め込みコンテンツを作成するためのユーザー権限は、ガイドを作成するためのユーザー権限と同じです。詳細については、ガイドの作成権限セクションを参照してください。

埋め込みコンテンツの作成

左側のメニューで[ガイド(Guides)]>[ガイド(Guides)]に移動して、次の操作を行います。

  1. [ガイド(Guides)]ページで、[ガイドを作成(Create guide)]を選択します。
  2. Pendoアカウントに複数のウェブアプリケーションを設定している場合は、[ガイドを作成(Create guide)]ページで、コンテンツを表示するアプリケーションを選択します。
  3. コンテンツのカテゴリーを選択します。これにより、このカテゴリーの推奨レイアウトを確認できます。
  4. [埋め込み(Embedded)]を選択して、ページのコンテンツとともにインラインで表示されるようにコンテンツを設定します。

    embedded_content.png
  5. [レイアウト(Layouts)]セクションで、レイアウトを選択します。提供されているデフォルトのレイアウト、または過去にコンテンツを作成するために使用した保存済みのレイアウトから選択できます。
  6. [設定(Settings)]ページで、埋め込みコンテンツの名前を入力します。
  7. ガイドを作成するようにコンテンツの作成を続けます。詳細については、ガイドの作成を参照してください。

Visual Design Studioの埋め込みコンテンツとオーバーレイガイドの比較

埋め込みコンテンツとオーバーレイガイドはさまざまな点で異なります。違いは次のとおりです。

  • 埋め込みコンテンツは、初回閲覧数のみをサポートします。リピート閲覧数は現在サポートされていません。
  • ガイドコンテナスタイルの[高度な設定(Advanced)]オプションにある要素の[自動フォーカス(Autofocus)][バックドロップ(Backdrop)][キャレット(Caret)]は使用できません。
  • 埋め込みコンテンツは投票とアンケート調査の作成には使用できません。
  • アクティベーションは、[アクティベーション(Activation)]設定でデフォルトで[自動(Automatic)]に設定されています。コンテンツは常に表示され、表示後に消えることはありません。ユーザーがコンテンツを閉じることが可能な場合は、コンテンツを閉じることができます。
  • 埋め込みコンテンツでは、Void要素とCanvas要素をターゲットにすることはできません。
    • Void要素。これらの要素には子ノードがないため、コンテンツを埋め込むことはできません。
    • Canvas要素。HTML <canvas>要素は、JavaScriptを使用してその場でグラフィックを描画するために使用されます。<canvas>要素はグラフィックのコンテナであり、コンテンツを埋め込むことはできません。

さらに、配置、コンテナの高さ、トップレベルの余白に違いがあります。

位置決め

埋め込みコンテンツはページの一部であり、常にページ上の選択された要素内に配置されます。[コンテナを編集(Edit Container)]ウィンドウの[場所(Location)]タブでは、[ページ上の位置(Position on Page)]は常に[要素内(Inside Element)]です。

location_inside_element.png

要素内のコンテンツの配置場所を選択できます。

  • 先頭に追加(Prepend):コンテンツを要素の先頭に配置します。これは、行の左端の位置または列の一番上の位置です。
  • 末尾に追加(Append):コンテンツを要素の末尾に配置します。これは、行の右端の位置または列の一番下の位置です。
  • 置き換え(Replace):要素内の既存のコンテンツを置き換えます。セレクターが「Contains(含む)」ルールを使用する場合、このオプションは使用できません。

position_in_element.png

コンテナの高さ

埋め込みコンテンツのデフォルトのコンテナの高さは「Auto(自動)」で、オーバーレイガイドの動作と一致します。つまり、コンテンツを追加するたびに、コンテナの高さが自動的に調整されます。

埋め込みコンテンツには、他に2つの高さオプションがあります。

  • フルハイト。埋め込まれたコンテンツは、定義されたコンテナ高さに対してフルハイトです。例えば、埋め込みコンテンツのデフォルトの高さが200ピクセルで、コンテナが500ピクセルの場合、埋め込みコンテンツの高さは500ピクセルになります。
  • 固定された高さ。コンテナの高さをピクセル数で指定できます。

container_height.png

埋め込みコンテンツのマージンのパディング

オーバーレイガイドとは異なり、埋め込みコンテンツはアプリ内に直接配置されます。場合によっては、デザインに合わせて埋め込みコンテンツを少し横に移動する必要があることもあります。埋め込みコンテンツコンテナの上、右、下、左の余白にパディングを設定して、コンテナの位置を変更できます。

この記事は役に立ちましたか?
10人中9人がこの記事が役に立ったと言っています