埋め込みガイドを作成する

この記事は、アプリケーションに埋め込むガイドを作成するための手順を提供します。

埋め込みガイドの代わりに、アプリケーションの上に表示されるガイドを作成する場合は、「オーバーレイガイドを作成する」を参照してください。

前提条件

• Pendoエージェントのバージョンが2.252.0以降であること。
• サブスクリプションにGuides Proが含まれていること。詳しくは、Pendoのアカウント担当者までお問い合わせください。
• 埋め込みガイドを作成するための正しいユーザー権限があること。詳細については、この記事の「権限」を参照してください。

また、初めて埋め込みガイドを作成する前に、埋め込みガイドのベストプラクティスを読むことを強くお勧めします。埋め込みガイドのベストプラクティスの概要については「ガイドの概要」をご覧ください。

権限

ガイドの役割には、ガイド作成者、ガイド公開者、およびガイドコンテンツ編集者という3つがあり、それぞれ権限が異なります。管理者ユーザーは以下のすべての権限を持っています。

• ガイド作成者の役割の権限を持つPendoユーザーは、ゼロからガイドを作成および編集することができます。また、公開されていない既存のガイドを編集することもできます。
• ガイド作成者またはガイドコンテンツ編集者の役割の権限を持つPendoユーザーは、レイアウトやテンプレートからガイドを作成および編集することができます。
• ガイド公開者の役割の権限を持つPendoユーザーは、ガイドを公開し、スケジュールすることができます。
• すべてのガイドの役割は、ドラフト、ステージング、無効のガイドを削除することができます。

必要に応じて、以下のガイド権限を組み合わせてカスタムユーザーの役割を作成することもできます。

• ゼロからガイドを作成、編集する。
• レイアウトからガイドを作成および編集する。
• ガイドを公開する。
• 公開ガイドを編集、削除する。
• ドラフト、ステージング、無効のガイドを削除する。

詳細については、「役割と権限」を参照してください。

プロセス概要

埋め込みガイドの設定には、以下の手順が含まれます。

1. ガイドの作成を開始します。ビジュアルデザインスタジオ（Visual Design Studio）を開き、ガイド構成オプションを選択します。
2. 埋め込みガイドの場所を編集します。
3. ビルディングブロックを使用してコンテンツを追加、編集します。
4. 必要に応じて、ガイドにステップを追加することができます。これにより、アプリケーションの同じ場所にコンテンツのカルーセルを作成することができます。
5. ガイドステップのスタイル設定を編集します。
6. ガイドのアクティベーションの動作を設定します。
7. ガイドを保存してプレビューする。

次にガイドの配信をテストし、設定を行うことができます。

1. ガイドをテストする。ステージング環境と本番環境で実行できます。
2. ガイドをセグメント化して、特定の訪問者をターゲットにする。
3. ガイドを公開する。必要に応じて、ガイドをスケジュールすることもできます。

手順については、「ガイドをテストして配信する」を参照してください。

ステップ1. ガイドの作成を開始する

埋め込みガイドの作成を開始するには、以下の手順に従います。

1. 左側のメニューから、［ガイド（Guides）］>［ガイド］に移動します。
2. ページの右上にある［ガイドを作成（Create guide）］を選択します。AIを使用してガイドを作成する場合は、矢印を選択し、［AIでガイドを作成（Create guide with AI）］を選択します。この機能の詳細については、「AIを活用したガイドの作成」を参照してください。
   
   
   
   
3. Pendoサブスクリプションに複数のウェブアプリケーションを設定している場合、ガイドを表示するアプリケーションを選択します。ガイドはサブスクリプション内の1つのアプリケーションでのみ配信されます。
   
   
   
   
4. 必要に応じて、ガイドのカテゴリーを選択します。これにより、このカテゴリーの推奨レイアウトを確認できます。詳細については、「ガイドレイアウトを使用する」を参照してください。
   
   
   
   
5. アプリケーションに統合するガイドを作成するには、［埋め込み（Embedded）］を選択します。
   
   
   
   
6. 保存済みレイアウトまたはPendoのデフォルトレイアウトからレイアウトを選択します。
   
   
   
   
7. ガイドに名前を付けます。ページの上部にあるデフォルトのタイトルを選択するか、新しいガイド名を入力します。
   
   
   
   
8. ガイドのタイトルの下のドロップダウンメニューを使用して、プロダクトエリアを追加します。既存のプロダクトエリアを選択するか、［+プロダクトエリアを作成（+Create Product Area）］を選択して新しいプロダクトエリアを作成することができます。Pendoのプロダクトエリアの詳細については、「プロダクトエリア」を参照してください。
   
   
   
   
9. ［設定（Settings）］タブの［コンテンツ（Content）］エリアで、アプリケーションURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。これにより、アプリケーション上でビジュアルデザインスタジオ（Visual Design Studio）が新しいタブで開き、ガイドの編集を開始できます。ここで入力するURLは、アプリケーション内で訪問者にガイドを表示する場所を制御するものではありません。ガイドの場所は、［コンテナを編集（Edit Container）］ウィンドウの［場所（Location）］タブで個別に設定します。詳細については、この記事の「場所を編集する」を参照してください。
   
   
   
   
10. ガイドの場所を選択します。ページ上でマウスを動かすと、アプリケーション内の要素が赤い点線のボックスで囲まれます。ガイドを埋め込むためのUI要素を選択すると、これが赤い実線に変わります。［一致候補（Suggested Match）］を維持するか、次のいずれかを実行できます。
    • ［親要素（Parent Element）］オプションを使用して、選択範囲をより大きな要素に拡張します。
    • ［カスタムCSS（Custom CSS）］オプションを使用して選択範囲を絞り込みます。ガイダンスについては、「ガイドのターゲット設定にCSSルールを使用する」を参照してください。

埋め込みガイドのvoid要素やcanvas要素を選択することはできません。HTMLのvoid要素には子ノードがないため、コンテンツを埋め込むことはできません。HTMLのcanvas要素にはグラフィックしか含まれないため、その中にコンテンツを埋め込むことはできません。これらの理由から、要素a、area、audio、base、br、canvas、col、embed、hr、img、input、link、meta、meter、param、progress、source、svg、track、video、wbrにガイドを埋め込むことはできません。

最適な結果を得るためには、エンジニアリングチームの協力のもと、div（埋め込み場所として機能する一意のIDを持つコンテナ）を作成することをお勧めします。詳細については、「ガイドの概要」をご参照ください。

ステップ2. 場所を編集する

埋め込みガイドの場所と位置は、［コンテナを編集（Edit Container）］ウィンドウの［場所（Location）］タブで編集します。［コンテナを編集］ウィンドウがまだ開いていない場合は、ビジュアルデザインスタジオ（Visual Design Studio）でガイドの端にカーソルを合わせ、その周りに表示される青色の強調表示を選択します。ここから、次の内容を編集できます。

• 要素の選択。ガイドが埋め込まれている要素のCSSセレクターを再選択、拡大、または絞り込みします。ガイドの最初のステップからこれを行う必要があります。
• 要素内の位置。埋め込みガイドに対して選択した要素のコンテンツを先頭に追加するか、末尾に追加するか、置き換えるかを選択します。ガイドの最初のステップからこれを行う必要があります。
• ターゲットページ。アプリケーションのすべてのページにガイドを表示するか、アプリケーションの特定のページにのみ表示するかを選択します。これはガイドのステップごとに個別に行うことができます。
• 設定。［選択時に動的要素をフィルタリング（Filter Dynamic Elements on Selection）］をオンにして、ガイドを埋め込む要素のCSSセレクターが安定していることを確認します。この設定は、ガイドのすべてのステップに一律に適用されます。

これらの場所設定の編集が完了したら、［コンテナを編集］ウィンドウの右下にある［完了（Done）］を選択します。

ページ上の位置（Position on Page）

埋め込みガイドはアプリケーションのページの一部であり、常にページ上の選択された要素内に配置されます。

要素の選択

ガイドが埋め込まれている要素を再選択できます。これは、ガイドの最初の手順から行う必要があります。

ガイドが埋め込まれている要素を再選択するには、［コンテナを編集］ウィンドウの［要素を選択（Select Element）］セクションで［選択をクリア（Clear Selection）］を選択し、別の要素を選択します。その後、［一致候補］を維持するか、次のいずれかを実行できます。

• ［親要素（Parent Element）］オプションを使用して、選択範囲をより大きな要素に拡張します。
• ［カスタムCSS（Custom CSS）］オプションを使用して選択範囲を絞り込みます。ガイダンスについては、「ガイドのターゲット設定にCSSルールを使用する」を参照してください。

要素内の位置

選択した要素内のどこに埋め込みガイドを配置するかを選択できます。これは、ガイドの最初の手順から行う必要があります。

［要素内の位置（Position In Element）］で、以下のいずれかを選択します。

• 先頭に追加（Prepend）：ガイドを要素の先頭に配置します。これは通常、行の左端の位置または列の一番上の位置です。
• 末尾に追加（Append）：ガイドを要素の末尾に配置します。これは通常、行の右端の位置または列の一番下の位置です。
• 置き換え（Replace）：要素の既存のコンテンツをガイドに置き換えます。このオプションは、埋め込みガイドをターゲットとするために使用しているコンテナに背景画像がある場合にのみ使用することをお勧めします。セレクターがcontainsルールを使用している場合、このオプションは使用できません。

レイアウトのずれを避けるため、埋め込みガイドをプレースホルダーコンテナ内に配置し、［置き換える（Replace）］を使用することをお勧めします。埋め込みガイドに適した要素を選ぶための推奨事項については、「ガイドの概要」をご覧ください。

ページの場所

［ターゲットページ］で、ガイドステップを次のどちらで表示するかを選択します。

• サイト全体（Sitewide）。ガイドコンテンツは、コンテンツを埋め込んだ要素が存在するアプリケーション内のすべてのページに表示されます。
• 当該ページのみ（Only on this page）。ガイドコンテンツは、アプリケーション内の特定のページに表示されます。ガイドコンテンツを表示するページにタグを付けていない場合は、「ページのタグ付け」の手順に従ってください。

設定

埋め込みガイドの任意のステップで［選択時に動的要素をフィルタリング］設定をオンまたはオフにすると、ガイド全体のすべてのステップでその設定が反映されます。

［選択時に動的要素をフィルタリング］設定はオンのままにしておくことをお勧めします。これにより、ガイドを埋め込むCSSセレクターは、時間の経過とともに変更される可能性が低い安定した識別子になります。

ステップ3。ガイドコンテンツを追加

テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画の追加、フォーマットのガイドビルディングブロックが複数用意されています。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。

まず、ガイドの正しいステップにいることを確認します。ガイドのステップが表示されない場合は、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの［ステップを表示（View Steps）］タブを選択します。ここから、コンテンツを追加するステップにカーソルを合わせ、［ステップを編集（Edit Step）］を選択します。

次に、ビルディングブロックを追加し、編集してコンテンツを追加します。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。埋め込みガイドに追加できるビルディングブロックやその編集方法については「ガイドビルディングブロック」を参照してください。

ヒント：ガイドを編集する際には、定期的に変更を保存して作成途中の内容を保存してください。

ステップ4. ステップを追加（任意）

同じ場所にさらに埋め込みコンテンツを含める場合は、ガイドにステップを追加し、各ステップにボタンを設定して、訪問者がコンテンツを移動するようにできます。

ガイドのステップがビジュアルデザインスタジオのツールバーに表示されない場合は［ステップを表示（View Steps）］タブを選択します。その後、さらにステップを追加できます。

1. ビジュアルデザインスタジオ（Visual Design Studio）のツールバーで［+ ステップの追加（+ Add Step）］を選択します。
   
   
   
   
2. 新しいステップについては、この記事の「ガイドコンテンツを追加する」の手順に従ってください。
3. 各ステップにアクションが［次のステップ（Next Step）］のボタンを追加します。ボタンアクションについては、「ガイドのボタンアクション」を参照してください。

ステップ5. スタイル設定を編集する

埋め込みガイドのスタイル設定は、［コンテナを編集］ウィンドウの［スタイル設定（Styling）］タブで編集します。［コンテナを編集］ウィンドウがまだ開いていない場合は、ビジュアルデザインスタジオ（Visual Design Studio）でガイドの端にカーソルを合わせ、その周りに表示される青色の強調表示を選択します。

埋め込みガイドに複数のステップがある場合は、各ステップのスタイル設定を個別に編集する必要があります。ビジュアルデザインスタジオ（Visual Design Studio）のステップトレイから、編集するステップにカーソルを合わせ、［ステップを編集（Edit Step）］を選択します。次に、［コンテナを編集］ウィンドウの［スタイル設定］タブを開きます。

ここから、次の項目を編集できます。

• テーマ。 ガイドのレイアウトとビルディングブロックの保存済みスタイル設定。
• コンテナ設定。ガイドの名前、閉じるボタン、寸法。テーマとして ［カスタム（Custom）］ を選択した場合、追加のスタイル設定オプションを利用できます。
• アクセシビリティ。ガイド内のARIAラベルとガイドのWAI-ARIAの役割。

テーマ（Theme）

テーマは、ガイドのレイアウトとビルディングブロックの保存済みスタイル設定を定義します。ガイドテーマの詳細については、「テーマを使用してガイドのスタイルを管理する」を参照してください。

テーマとして［カスタム］を選択すると、埋め込みガイド内のそのステップで、より多くのスタイル設定オプションが利用できます。

コンテナ設定

［コンテナ設定（Container Settings）］では、標準で次のことができます。

• 埋め込みガイド内のステップに名前を追加します。
• ガイド内のステップに閉じる（X）ボタンを追加するかどうかを選択します。ガイドに閉じるボタンを追加すると、その色、間隔、左上揃えまたは右上揃えを編集できます。手順については、「ガイドビルディングブロック」を参照してください。
• ガイドの幅を選択します。
  • ガイドが埋め込まれている要素の長さ全体にガイドを表示する場合は、［最大幅（Full width）］を選択します。
  • ガイドが埋め込まれている要素のサイズに関係なく、ガイドのサイズを固定したい場合は、固定（Fixed）を選択します。固定埋め込みガイドの幅はピクセル（px）単位で設定されます。
• ガイドの高さを選択します。
  • 追加するコンテンツに応じてガイドの高さを調整する場合は、［自動高さ（Auto height）］（デフォルト）を選択します。
  • ガイドの高さを埋め込まれている要素と同じにする場合は、［フルハイト（Full height）］を選択します。
  • ガイドの高さをピクセル（px）で指定する場合は、［固定の高さ（Fixed height）］を選択します。

テーマとして［カスタム］を選択した場合は、追加で次のオプションがあります。

• ガイドステップのマージン（Margin）を編集します。これは、ガイドのコンテナとページ上の隣接する要素の間のピクセル（px）単位のスペースです。余白は上（Top） 、右（Right）、下（Bottom）、左（Left）から個別に設定します。
  
  
  
  
• ガイドステップのパディング（Padding）を編集します。これは、ガイドの内容とガイドコンテナの端の間のピクセル（px）単位のスペースです。余白は上（Top） 、右（Right）、下（Bottom）、左（Left）から個別に設定します。
  
  
  
  
• ガイドステップの枠の色（Border Color）、幅（Width）、半径（Radius）（角の丸み）を編集します。枠の色は、16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。幅と半径はピクセル（px）単位で設定されます。
  
  
  
  
• ガイドステップの影の色（Drop Shadow Color）（および透明度）、角度（X）、距離（Y）、柔らかさ（ぼかし（Blur））、サイズ（サイズ（Spread））を編集します。影の色と透明度は、16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。ドロップシャドウのX、Y、ぼかし、サイズはピクセル（px）単位で設定されます。
  
  
  
  
• UI内の重複する要素に対するガイドステップのコンテナの順序を編集します。［Zインデックス（Z-Index）］の値が大きいほど、その要素はUIで前面に表示されます。ガイドがモーダルやバックドロップなど、Zインデックスがより高いものによって隠されている場合にのみ、これを変更してください。
  
  
  
  
• 背景（Background）を編集します。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、背景の色と透明度を設定します。
  
  

アクセシビリティ

スクリーンリーダーに対応させるために、以下を編集できます。

• ARIAラベル - アクセシブルな名前（ARIA Label - Accessible Name）。スクリーンリーダーで読み上げられるガイドステップの代替名です。
• 役割（Role）。ガイドステップに割り当てられたセマンティックな意味です。ARIA役割についての情報は、Mozillaの「WAI-ARIAの役割」を参照してください。
• ARIAラベル - 閉じるボタン（ARIA Label-Close Button）。ガイドの閉じるボタンを含めることを選択した場合の閉じるボタンの代替名で、スクリーンリーダーで読み上げられます。

ステップ6. ガイドのアクティベーションの設定

埋め込みガイドは常に自動的にアクティブになります。埋め込みガイドのコンテンツは、ガイドが埋め込まれている要素がページに表示されている場合は常に表示されるため、順序設定とスロットリング設定は埋め込みガイドには適用されません。

ただし、ビジュアルデザインスタジオ（Visual Design Studio）の［アクティベーション設定（Activation Settings）］ウィンドウから、 ガイドの繰り返し表示設定を構成し、ガイドを表示するデバイスを選択できます。

• ビジュアルデザインスタジオ（Visual Design Studio）で埋め込みガイドをまだ作成中の場合は、ガイドの最初のステップの前の［アクティベーション（Activation）］カードにカーソルを合わせて編集アイコンを選択するか、ツールバーの上部にある［ナビゲート（Navigate）］ショートカットの横の［アクティベーション］ショートカットを選択します。
  
  
  
  
• ガイドをすでに作成している場合は、Pendo内でガイドの［設定（Settings）］タブを開き、［アクティベーション（Activation）］カードの右上にある［自分のアプリで管理（Manage In My App）］を選択します。アプリケーション上でビジュアルデザインスタジオ（Visual Design Studio）が開き、デフォルトで［アクティベーション設定（Activation Settings）］ウィンドウが開きます。
  
  

ガイドの繰り返し表示

ガイドの繰り返し表示は、埋め込みガイドに閉じるボタンを追加した場合にのみ重要です。閉じるボタンは、［コンテナを編集（Edit Container）］ウィンドウの［スタイル設定（Styling）］タブから追加されます。閉じるボタンの外観や位置の編集方法についての詳細は「ガイドビルディングブロック」を参照してください。

［ガイドの繰り返し表示（Repeat Guide Display）］をオンにする場合は、以下の手順を実行する必要があります。

1. ［繰り返し間隔（Repeat every）］フィールドに、ガイドが対象の訪問者に自動的に再表示されるまでの間隔（日数または時間）を入力します。繰り返し間隔は、訪問者のガイド閲覧時に開始されます。間隔には1～10,000の数値を設定し、［日（Day）］または［時間（Hour）］のいずれかを選択できます。
   
   
   
   
2. 有効期限を設定し、訪問者にガイドが表示される回数を繰り返し間隔で制限します。［有効期限のタイプ（Expiration Type）］を選択します。
   • ［なし（Never）］を選択した場合、ガイドがオフになるか、訪問者がガイドのセグメントから外れるまでガイドは繰り返し間隔で再度表示されます。
     
     
     
     
   • ［ガイドを閉じる回数の設定（A set number of dismissals）］を選択した場合、対象となる訪問者に対して自動ガイドが無効になるまでに自動ガイドを何回閉じる必要があるかを入力します。最小値は2回です。
     
     

デバイスを選択する

［ガイドの表示場所（Show Guide On）］のオプションで、特定のデバイスタイプにガイドを表示するかどうかを選択できます。次の3つのオプションから選択します。

• すべてのデバイス（All devices）
• PCとタブレットのみ（Desktop & tablets only）
• モバイルのみ（Mobile only）

ステップ7. ガイドを保存してプレビューする

ガイドの作成と編集が完了したら、次の手順に従います。

1. ［保存（Save）］を選択し、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの右上にある［終了（Exit）］を選択します。ガイドが保存され、ビジュアルデザインスタジオ（Visual Design Studio）が閉じられ、デフォルトで［設定（Settings）］タブが開いてガイドの詳細が表示されます。
2. ガイドの［設定］タブから、［プレビュー（Preview）］を選択します。埋め込みガイドがブラウザの新しいタブで開きます。
3. 完了したら、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーから［プレビューを終了（Exit preview）］を選択します。

次のステップ

ガイドを作成してプレビューした後、テスト、セグメント化、スケジュール設定、公開が可能です。手順については、「ガイドをテストして配信する」を参照してください。