ガイドロジックを使用したガイドのカスタマイズ

最終更新日:

ガイドのProエディションを含むサブスクリプションでは、Pendoユーザーはコードブロックを使用せずに高度なガイドのカスタマイズを実装できます。カスタマイズには次のものが含まれます。

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

前提条件

ガイドロジックを使用するには、以下が必要です。

  • ガイドのProエディションがサブスクリプションに含まれていること。ガイドのProエディションが含まれていることを確認する場合、またはサブスクリプションに含める場合には、アカウント担当者にお問い合わせください。
  • ウェブアプリケーション。モバイルアプリケーションはガイドロジックを使用できません。
  • ビジュアルデザインスタジオ。Adoptスタジオ(Adopt Studio)ではガイドロジックはサポートされていません。Adoptスタジオでガイドロジックを含むガイドを開くと、ガイドロジックはプレーンテキストのままになります。

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

ウォークスルーガイドでガイドロジックを使用すると、ガイドフロー内でレンダリングに失敗する可能性のあるステップを回避できます。たとえば、訪問者の役割やアプリ内設定に基づいて常に表示されるとは限らない要素に紐付けられたステップがガイドに含まれている場合、ガイドロジックを使用してこのステップをスキップできます。

  1. ガイドを見つけて開き、[自分のアプリで管理(Manage in My App)]を選択してビジュアルデザインスタジオを開きます。
  2. スキップする可能性のあるステップの前のガイドステップを開きます。
  3. 以下の表から、ステップのaria-label入力フィールドに適切な構文を入力します。

対象となるステップの確認は、構文を含むステップが追加されたタグ付けされたページで行われます。この確認を別のページで行うには、訪問者が移動したページにステップを追加します。構文は移動を実行しないため、この確認は移動前に実行されます。

以下の構文は、ガイドの最初のステップでは動作しません。表示できない可能性があるステップの前のステップに表示されなければなりません。

構文 説明
{skipStep: auto/}

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

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

{skipStep: [number]/}

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

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

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

skipping_ineligible_guide_steps.png

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

複数選択式の投票とアンケート調査への回答に基づいて、同じガイド内のあるステップから別のステップに訪問者を移動できます。ガイドステップで条件に応じたガイドの分岐を有効にするには、次の2つの構文タグが必要です。この構文は、ラジオボタンを使用する複数選択式の投票とアンケート調査にのみ適用されます。ドロップダウンメニューはサポートしていません。

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

  1. 複数選択式の投票とアンケート調査を含むガイドを作成するか、検索して開き、[自分のアプリで管理(Manage in my app)]を選択してビジュアルデザインスタジオを開きます。
  2. 複数選択式の投票とアンケート調査には、複数選択式ドロップダウンメニューではなくラジオボタンが含まれていることを確認します。条件分岐ではドロップダウンメニューはサポートされていません。
  3. 次の構文を含めます。
    • 条件分岐を実装したい複数選択式の投票とアンケート調査のテキストブロックに{branching/}を追加します。これは、この特定の投票とアンケート調査を条件分岐に利用する必要があることを示しています。投票とアンケート調査の質問の横に分岐アイコン(branchingicon.png)が表示され、分岐が有効であることを示します。ガイドがプレビュー済みまたは公開中になると、このアイコンは消えます。

      edit_text_branching.png

    • 投票とアンケート調査のラジオボタンの回答に{goto- [number]/}を追加して、選択後に投票とアンケート調査を送信した際に訪問者が移動するステップを指定します。たとえば、構文{goto-4/}は、投票とアンケート調査が送信されると、ガイドをステップ4に強制的に進むことができます。

      edit_multiple_choice.png

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

edit_text_branching_error.png

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

自由記入式の投票とアンケート調査、多肢選択式の投票とアンケート調査、または数字による投票とアンケート調査を「必須」としてマークすることで、訪問者は投票とアンケート調査を送信する前に指定された質問を完了する必要があります。

  1. ガイドを作成するか、見つけて開き、[自分のアプリで管理(Manage in My App)]を選択してビジュアルデザインスタジオを開きます。
  2. 「必須({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内で、ガイドロジック構文のハイパーリンクまたはボタンのURLリンクアクションでもこの構文を使用できます。これにより、メタデータに基づいて動的URLを作成できます。詳細と手順については、「Pendoのメタデータをガイド統合で共有」を参照してください。

パーソナライズがアクティブな場合、ガイドのパーソナライズアイコンは、ビジュアルデザインスタジオとガイドのプレビュー時もしくは公開時の両方で表示されます。ガイドのパーソナライズではエージェントメタデータのみがサポートされます。他のメタデータタイプはサポート対象外です。メタデータタイプの詳細については、「訪問者とアカウントのメタデータ設定」を参照してください。

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/}

Ariaラベルの例

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 Launcher 5.26.1がインストールされている必要があります。詳細については、「Pendo Launcherを導入するためのITガイド」を参照してください。

ガイドロジックを使う

  1. PendoでAdoptサブスクリプションを選択します。
  2. 左側のメニューで[ガイド(Guides)]>[ガイド(Guides)]に移動します。
  3. ビジュアルデザインスタジオで作成されたガイドを見つけて開きます。
  4. [自分のアプリで管理(Manage in My App)]を選択します。これにより、ビジュアルデザインスタジオが開きます。
  5. 必要に応じてガイドロジックを追加します。ビジュアルデザインスタジオのプレビューでガイドロジックのアイコンを確認して、すべてが正しく適用されていることを確認できます。

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

  1. ビジュアルデザインスタジオで作成されたガイドを見つけて開きます。
  2. ガイドをAdoptスタジオで作成されたものに変更してください。ビジュアルデザインスタジオで作成したガイド名の横にあるドロップダウンメニューの矢印を選び、Adoptスタジオで作成されたガイドを選択します。
この記事は役に立ちましたか?
20人中16人がこの記事が役に立ったと言っています