1. Pendoヘルプセンター
  2. ガイド
  3. ビジュアルデザインスタジオ（Visual Design Studio）

ガイドをマークダウンテキストでカスタマイズする

最終更新日:

注：マークダウンテキストを使用するには、サブスクリプションでガイドロジックを有効にする必要があります。ガイドロジックは、ウェブアプリでのみサポートされています。モバイルアプリはサポート対象外です。ガイドロジックは、パッケージにガイドのProエディションが含まれているPendoサブスクリプションでのみ利用できます。ご利用のプランにこの機能が含まれているかどうか不明な場合、またはこの機能に関心をお持ちの場合は、Pendoのアカウント担当者にお問い合わせください。

ガイドロジックを使用すると、Pendoユーザーはコードブロックを使用せずに、基本的なマークダウンテキストを使用して高度なガイドのカスタマイズを実装できます。

カスタマイズには次のものが含まれます。

  • 対象外のガイドステップのスキップ
  • 条件に応じたガイドの分岐
  • 必須の質問項目へのマーク
  • ガイドのパーソナライズ（メタデータの置換など）

対象外のガイドステップのスキップ

ウォークスルーガイドでこの動作を使用すると、より大きなガイドフロー内でレンダリングに失敗する可能性のあるステップを回避できます。一般的な例としては、ユーザーの役割やアプリ内の構成によっては存在しない場合がある要素にターゲットを絞ったガイドステップが挙げられます。

ビジュアルデザインスタジオ（Visual Design Studio）で、確認が必要なステップの前のaria-label入力フィールドに次の構文を入力します。

注：この構文はガイドの最初のステップでは機能しないため、表示対象外のステップの前のステップに表示させてください。

構文 説明
{skipStep: auto/}

次のステップあるいは前のステップのアクションによって、ガイドが対象外のステップに移動した場合、代わりに次のあるいは前の対象のステップに進みます。

現在のステップから移動する際に、特定の方向に対象のステップがない場合は、ガイドを閉じます。
{skipStep: [number]/}

次のステップあるいは前のステップのアクションによって、ガイドが対象外のステップに移動した場合、代わりにステップ番号によって示される特定の定められたステップに進みます。

たとえば、ガイドが適さないステップに遭遇した場合、構文{skipStep: 7/}によって、ガイドを強制的にステップ7に移動させることができます。

 

注：対象となるステップの確認は、{skipStep}構文のステップがあるページで行われます。この確認を別のページで行うには、移動後に訪問者に表示されるページにステップを追加します。{skipStep}は移動を実行しないため、この確認は移動前に実行されます。

ガイドのaria-labelにこの構文が設定されると、ガイドステップの右下に所定のアイコンが表示されます。ガイドがプレビューもしくは公開中になると、このアイコンは消えます。

skipping_ineligible_guide_steps.png

条件に応じたガイドの分岐

この動作を使用して、複数選択式の投票とアンケート調査への回答に基づいて、同じガイド内のあるステップから別のステップにユーザーを誘導することができます。

ガイドステップで条件に応じたガイドの分岐を有効にするには、次の2つのマークダウンタグが必要です。

構文 説明
{branching/}

この構文を多項選択式投票とアンケート調査の質問タイトルに追加して、その投票とアンケート調査を条件に応じた分岐で利用することを示します。

投票とアンケート調査の質問の横に大きな分岐アイコンbranchingicon.pngが表示され、分岐が有効であることを示します。ガイドがプレビュー済みまたは公開中になると、このアイコンは消えます。

注：このタグは現在、ラジオボタンによる複数選択式の投票とアンケート調査にのみ対応しており、ドロップダウン式には対応していません。
{goto- [number]/}

特定の多項選択式投票とアンケート調査でこの構文を追加することで、回答の送信時にユーザーを送るガイドステップを指定できます。

たとえば、構文{goto-4/}を追加すると、投票が送信されるときにユーザーをステップ4に強制的に移動させられます。

 

条件に応じた分岐を実装する

  1. ビジュアルデザインスタジオ（Visual Design Studio）で、ラジオボタンを使用した複数選択式の投票とアンケート調査を作成します。ドロップダウン式は現在、条件に応じた分岐ではサポートされていません。
  2. 条件に応じた分岐を実装したい各ガイドステップに対して、適切なマークダウンタグを追加します。
    1. 条件に応じた分岐を実装したい各ガイドステップのテキストブロック内に{branching/}タグを配置します。
    2. ラジオボタンの回答内に{goto- [number]/}タグを挿入して、その回答が選択された際に移動するステップを指定します。

edit_text_branching.png

edit_multiple_choice.png

条件に応じたガイドの投票とアンケート調査を設置できるのは、ガイドステップごとに1つの投票とアンケート調査に限られます。{branching/}タグで複数の投票とアンケート調査を追加した場合、デザイナーはこれがサポートされていないことを示します。

edit_text_branching_error.png

必須の質問項目へのマーク

この動作では、自由記入式の投票とアンケート調査、多項選択式の投票とアンケート調査、もしくは数字による投票とアンケート調査が「必須」とマークされます。これにより、ユーザーは指定された質問を完了しなければ、Pendoガイドの投票とアンケート調査を送信できなくなります。

構文 説明

{required/}

ビジュアルデザインスタジオ内で自由記入式の投票とアンケート調査、多項選択式の投票とアンケート調査、もしくは数字による投票とアンケート調査にこれを追加すると、指定された質問が完了するまで送信やガイドを進めるボタンがすべて無効になります。

 

適切な構文が追加されると、デザイナーと公開中のガイドの両方で、それぞれの質問の横に小さな赤いアスタリスクが表示されます。これは、その問題が必須としてマークされたことを示します。

edit_text_required.png

ガイドがプレビューでレンダリング中、もしくは公開中の場合、ガイドの投票とアンケート調査を送信するボタンは、表示されたすべての質問が完了するまで無効になります。

poll_disabled.png poll_enabled.png

ガイドのパーソナライズ

ビジュアルデザインスタジオ内のいずれかのガイドでこの動作を使用すると、Pendoエージェントのメタデータ値をガイドのテキストに動的に挿入することができます。これは、ガイドのレンダリング時にユーザーに表示される訪問者もしくはアカウントオブジェクトのあらゆるメタデータをサポートします。

構文 説明

{[visitor/account].[fieldName]|[optionalFallback]/}

たとえば...

{visitor.name|Gary/}

ガイドのパーソナライズ構文は、訪問者もしくはアカウントオブジェクトの指定の後に、そのメタデータオブジェクトに存在する任意のフィールド名を指定できます。たとえば、アカウントのメタデータオブジェクトにcountryというフィールドがある場合、{account.country/}を指定すると、メタデータからその値を動的に挿入することができます。

この構文では、オプションでフォールバックパラメータも使用できます。したがって、上記の例でガイドを閲覧している特定のアカウントに国名が定義されていない場合、そのアカウントの国名メタデータフィールドが空白であれば、{account.country|your country/}と入力すると、「あなたの国名」という単語が表示されます。

この構文は、ガイドのURL内で、Markdown構文のハイパーリンクまたはボタンのURLリンクアクションでも使用できます。これにより、メタデータに基づいて動的URLを作成できます。

パーソナライズがアクティブな場合、ガイドのパーソナライズアイコンが表示されます。パーソナライズ効果は、ビジュアルデザインスタジオとガイドのプレビュー時もしくは公開時の両方で発生するためです。

guide_personalization.png

ローカリゼーションとガイドのマークダウン

すべてのマークダウン構文は、XLIFFファイルやPendoのローカリゼーション機能と互換性があります。ガイドを翻訳するときは、英語のマークダウンをそのまま残すようにしてください。

必須の質問の例

  • en_us: この機能を改善するには？{required/}
  • es-419: ¿Cómo podemos mejorar esta característica? {required/}

ガイドのパーソナライズの例

  • 英語（米国）：Please tell us about your experience in {account.country|your country/}
  • es-419: Cuéntame sobre su experiencia en {account.country| España/}/}

注：ガイドのパーソナライズ向けのoptionalFallbackのマークダウンは、翻訳間で同じである必要はありません。

条件に応じた分岐の例

  • en_us: あなたの役割は？{branching/}
    • プロダクトマネージャー
    • エンジニア {goto-3/}
    • マーケティング {goto-4/}
  • es-419: ¿Cuál es tu papel? {branching/}
    • Gerente de Producto
    • Ingeniero {goto-3/}
    • Mercadeo {goto-4/}

ステップをスキップする例

ビジュアルデザインスタジオ（Visual Design Studio）でAriaラベルの英語テキストを追加できます（Ariaラベルの例：{skipStep: auto/}）。

Ariaラベルを翻訳するには、必要な言語のXLIFFファイルを開き、trans-unitがその言語に対して適切に更新されていることを確認してください。

trans-unit id="e637cba3-d392-4274-a4ec-54a6a39b7dfa|ariaLabel"><source><![CDATA[{skipStep:auto/}Aria
  Label Example]]></source><target><![CDATA[{skipStep:auto/}Ejemplo
  de etiqueta Aria]]></target><note>LinearLayout</note></trans-unit&gt

ビジュアルデザインスタジオの例

designer_example.png

プレビューの例

preview_example.png

ガイドロジックを拡張機能アプリで使用する

ガイドロジックは、Pendo Oneプラットフォームのサブスクリプションで有効になっていれば、拡張アプリで使用することができます。これにより、ガイドビルダーはビジュアルデザインスタジオ（Visual Design Studio）で作成されたガイドをそのサブスクリプションで開き、ガイドでガイドロジックのマークダウンテキストを使用できます。

注：Adopt Studioでは、ガイドロジックのマークダウンテキストはサポートされていません。すべてのマークダウンテキストをビジュアルデザインスタジオで管理する必要があります。Adopt Studioでガイドロジックのマークダウンテキストがあるガイドを開くと、マークダウンテキストは取り除かれ、プレーンテキストとして残されます。

要件

拡張アプリでガイドロジックを使用するには、Pendo Launcher 5.26.1がインストールされている必要があります。詳細については、Pendo Launcherを導入するためのITガイドを参照してください。

ガイドロジックのマークダウンテキストを使用する

  1. Pendo OneでAdoptサブスクリプションを選択します。
  2. 左側のナビゲーションで［ガイド（Guides）］>［ガイド（Guides）］に移動します。
  3. ビジュアルデザインスタジオで作成されたガイドを選択します。
  4. ［自分のアプリで管理（Manage in My App）］を選択します。ビジュアルデザインスタジオが開きます。
  5. 必要に応じて、ガイドロジックのマークダウンテキストを追加します。デザイナーのプレビューでマークダウンテキストのアイコンを確認して、すべてが正しく適用されていることを確認できます。

以前にAdopt Studioで作成したガイドでガイドロジックを使用する方法は以下のとおりです。

  • ビジュアルデザインスタジオのヘッダーバーでドロップダウン矢印を選択し、Adopt Studioで作成されたガイドを選択します。


この記事は役に立ちましたか？
20人中16人がこの記事が役に立ったと言っています

このセクションの記事

もっと見る