ガイドをユーザーに表示する際には、自動、バッジ、ターゲット要素、プログラムによるアクティブ化など、いくつかの異なる方法を使用できます。ガイドは、目的の動作を実現するために複数の方法でアクティブ化できます。たとえば、バッジによってアクティベーションされたツールチップはユーザーが最初に表示したときには自動で開きますが、その後はバッジをクリックしたときにのみアクティベーションされます。アクティベーションオプションが何も選択されていない場合、デフォルト値は[プログラムによるアクティベーション(programmatic activation)]になります。つまりガイドは、リソースセンターから、別のガイドによってまたはパーマリンクを使用して、あるいはエージェントAPIによってアクティベーションできます。他のアクティベーションオプションが選択されている場合でも、プログラムによるアクティベーションオプションは使用できます。
アクションバーで、[自動(Automatic)]、[バッジ(Badge)]、および[ターゲット要素(Target Element)]のアクティベーション、デバイスタイプなどのアクティベーション設定を行います。要素を含むルールは、最初のガイドステップの[場所(Location)]の設定で設定します。
ガイドを表示するための要件
ガイドには、表示するタイミングと表示するかどうかを制御するいくつかのトリガーがあります。これらのアクションを組み合わせることで、ガイドの表示タイミングを細かく調整することができます。これらのアクションを使用すれば、固有の状況下でターゲットを絞ったセグメントに、一貫性をもってガイドを正確かつ確実に示すことができます。ガイドが期待どおりに表示されない場合は、最初に以下の設定のトラブルシューティングを行ってください。
- ステータス(Status):ガイドを「公開」に設定する必要があります。「ステージング」は、ステージング環境のみにガイドを展開します。
- セグメント(Segment):現在の訪問者がターゲットセグメントに含まれている必要があります。これは、テストをしていてターゲットセグメントにいない場合に問題となることがあります。
- ターゲットページ(Page Location):現在のURLがタグ付きページのルールと一致している必要があります。サイト全体で、Pendoエージェントが実行されている場所にガイドを展開します。
- ステップ1のターゲット要素(Target element for step 1):ガイドのステップ1のターゲット要素は、UIで表示されている必要があります。ユーザーがアクションを実行しない限り表示されない要素を使用して、ガイドが表示されるタイミングを条件付きで制御できます。要素が見えるようになると同時にガイドが表示されます。
- アクティベーションのターゲット要素(Target element for activation):アクティベーションのターゲット要素の設定では、ステップ1とは異なる要素を使用できます。この要素は、ページ上に表示され、使用されている必要があります。
- デバイスタイプ(Device type):Pendoエージェントによって識別されるデバイスは、[アクティベーション(Activation)]の設定で選択したデバイスタイプのカテゴリ(すべてのデバイス、デスクトップとタブレット、またはモバイルウェブのみ)と一致している必要があります。
- スロットリング(Throttling):スロットリングと順序付けにより、他の公開されたガイドが優先され、自動ガイドの表示頻度が制限される場合があります。
- ローカライズ(Localization):ローカライズ設定により、現在の訪問者の言語に翻訳されていないガイドを表示しないようにすることができます。
- コードブロック(Code blocks):コードブロックを使用すると、任意のカスタムコードをガイドに追加できます。一部のカスタムコードでは、ガイドの表示タイミングを意図的に制限し、ガイドの設定で利用可能な範囲を超えたガイド表示を制御できます。Javascriptの構文エラーなどのコードブロックのバグにより、ガイドが完全にレンダリングされない場合があります。
ガイドのプレビュー
ガイドのプレビューは、ガイドの動作を公開せずにテストするために使用します。ガイドのプレビューでは、ステータス、セグメント、スロットリング、ローカライズの設定を無視して、ビジュアルデザインスタジオ(Visual Design Studio)のプレビューウィンドウに即座にガイドを表示します。
ガイドのプレビューを起動する
-
[アプリで管理(Manage in App)]の横にある[プレビュー(Preview)]ボタンを使用して、[ガイドの詳細(Guide Details)]ページからガイドのプレビューを起動します。
- アクションバーの[プレビュー]ボタンを使用してガイドを編集しながら、ビジュアルデザインスタジオでガイドのプレビューを起動します。プレビューは、同じブラウザまたは新しいタブで起動することができます。ガイドのプレビューを行うと、ビジュアルデザインスタジオでのガイド編集に戻ります。
ガイドのプレビューを使用する
ガイドのプレビューのアクションバーには、アクティベーション設定やターゲットなど、ガイドのアクティベーション基準が表示されます。ターゲット要素が表示されている場合、ターゲット要素のルールは緑色になっています。表示されない場合は、赤になります。現在ターゲットページを表示している場合、ページターゲットは緑色になっています。ターゲットページにいない場合は、赤で表示されます。
ターゲット要素とターゲットページのルールが緑色になるまでアプリ内を移動し、期待どおりにガイドをアクティベーションします。アプリを使い、ガイドのステップをナビゲートすると、複数ステップのガイドで各ステップをプレビューできます。ガイドが期待どおりに機能しない場合は、ビジュアルデザインスタジオに戻り、ターゲット、アクション、およびガイドの動作に影響を与えるその他の設定のトラブルシューティングを行って、希望のガイド体験を得られるようにしてください。
必要に応じてプレビューを再開します。ビジュアルデザインスタジオに戻ってガイドを編集するか、終了します。
自動
[自動]アクティベーションでは、ガイドを表示するためのすべての条件が満たされるとガイドが表示されます。ガイドを表示するには、アクティベーションのすべての要件を満たす必要があります。
自動ガイドは、ユーザーが右上の「X」(閉じる)ボタン、またはガイド内の[閉じる(Dismiss)]ボタン、あるいはキーボードナビゲーション使用時のEscキーで閉じるまで表示されます。自動アクティベーションに設定されたガイドは、ユーザーが閉じるまで何度も表示されることを想定しておく必要があります。ガイドの表示を繰り返す機能により、一度ガイドを閉じたユーザーにも自動ガイドを自動的に再開させることができます。
別のアクティベーション方法でアクティベーションが自動に設定されている場合は、自動アクティベーションが優先されます。他のアクティベーションの頻度設定でガイドを複数回表示できる場合は、他のアクティベーションを使用してもガイドを表示することができます。
ガイドの繰り返し表示
ガイドの繰り返し表示では、訪問者が完了または却下したガイドでも訪問者に表示されます。設定により、訪問者にガイドを表示する頻度や回数を制御できます。アクティベーションの条件に従って、訪問者にガイドを再度表示することができます。ガイドの表示は、引き続きスヌーズ、スロットリング、スケジュールされた有効期限の設定に従います。
ガイドを自動でアクティベーションされるように設定する場合は、ビジュアルデザインスタジオ(Visual Design Studio)の[アクティベーション設定(Activation Settings)]でガイドの繰り返し表示を設定します。
- 繰り返し間隔(Repeat every):訪問者にガイドを表示させる頻度を設定します。繰り返し間隔は、訪問者のガイド閲覧時に開始されます。この時間が経過した時点で、再度ガイドが表示されます。間隔は1~10,000時間、もしくは日単位で設定可能です。
-
有効期限のタイプ(Expiration Type):訪問者にガイドを表示させる総回数の制限、有効期限の設定を行うことができます。繰り返し回数では、繰り返し間隔で訪問者にガイドが表示される最大の回数を制御します。ガイドの動作は、引き続き通常のガイド自動アクティベーションの設定に従います。ユーザーがガイドを操作しない場合は追加のビューが可能です。ガイドがアクティブになっている場合は、訪問者がガイドを完了するか閉じるまで、ガイドは表示され続けます。有効期限のない繰り返しガイドは、ガイドが無効になるか、訪問者がターゲットセグメントから外れるまで、繰り返し間隔で再び表示されます。
-
ガイドを閉じる回数の設定(デフォルトのオプション):ガイドが再び表示されなくなるまでの、ガイドを閉じる最大回数。設定できる回数は、2回以上です(デフォルト)。
- ガイドを閉じるアクションには、以下が含まれます。
-
- [閉じる(Close)]を選択
- [ガイドを閉じる(Dismiss)]アクションのあるボタンを選択
-
pendo.onGuideDismissed()
を呼び出す - 最後のステップまたは唯一のステップでの次のステップ(Next Step)アクション
- ガイドが最後のステップ、あるいは唯一のステップであるときは
pendo.onGuideAdvanced()
を呼び出す - 投票調査が最後のステップまたは唯一のステップである場合の投票を送信+ガイドを進めるアクション
- なし:ガイドを閉じるまで、表示され続けます
-
バッジ
[バッジ]を使用すると、ページ内の要素の横に小さいアイコンを配置できます。訪問者がその要素を選択すると、ガイドが表示されます。バッジを使えば、お客様のウェブアプリケーションにインラインサポートを簡単に追加できます。ユーザーは必要に応じて情報を参照できます。
注:バッジはガイドレベルで追加され、最初のステップでのみ表示されます。マルチステップガイドでは、ステップごとに変更することはできません。
バッジターゲット要素
[バッジ]オプションを選択すると、[ターゲットモード(Target Mode)]になり、要素を選択します。選択した要素の横にバッジが表示されます。
ガイドがウォークスルーの場合、バッジの位置はガイドの最初のステップで決定されたターゲット要素と位置によって決定されるため、次の警告メッセージが表示されます。
バッジアイコン
Pendoが提供するバッジアイコンの中から選択するか、お客様が作成したアイコンをアップロードしてください。Pendoが提供するアイコンの色は、アイコンのドロップダウンの下にある色入力で変更できます。
バッジの位置
ターゲット要素に対するバッジの表示位置([右上(Top-right)]、[左上(Top-left)]、または[インライン(inline)])を設定できます。
バッジオフセット
[上(Top)]および[右(Right)]のオフセットを使用すると、ターゲット要素に対するバッジの位置を調整できます。正と負の両方のピクセル値が設定できます。
ガイドの動作
- バッジの上にカーソルを合わせるか、クリックして表示(Show on badge hover or click):バッジアイコンの上にカーソルを合わせるか、クリックするとガイドが表示されます。
- バッジのクリック時のみ表示(Show only on badge click):バッジアイコンの上にカーソルを合わせてもガイドは表示されません。
バッジの動作
- 常にバッジを表示(Always show badge):ユーザーが何にカーソルを合わせても、ターゲット要素の横にバッジが表示されます。
- 要素にカーソルを合わせた時のみバッジを表示(Show badge only on element hover):ターゲット要素の上にカーソルを合わせた時だけバッジが表示されます。
バッジの頻度
- 毎回表示(Show every time):ユーザーがガイドを表示するたびにバッジを表示します。
- 一度だけ表示(Show only once):ユーザーが過去にガイドを参照している場合は、バッジが表示されません。
ターゲット要素
ターゲット要素のアクティベーションにより、ユーザーがアプリケーション内の特定の要素を選択すると、ガイドが起動します。これはバッジのアクティベーションと同様に機能しますが、Pendoによって作成されたバッジの代わりにアプリの要素を使用します。
場所
ターゲットページは、ガイドのステップ1から引き継がれます。ターゲット要素のターゲットページを変更するには、ステップ1でターゲットページを変更する必要があります。
ターゲット要素は、ステップ1から継承することも、別の要素に設定することもできます。ガイドのアクティベーションもできますが、ステップ1のガイドコンテンツを別の要素にターゲティングします。たとえば、ボタンがクリックされたときにガイドを起動しますが、入力フィールドにはツールチップをターゲティングします。
行動(Behavior)
[行動(Behavior)]タブは、ターゲット要素の起動に関するガイドの動作を制御します。
デバイスの選択
起動時にガイドを表示するデバイスを選択することができます。
- すべてのデバイス(All devices)
- デスクトップとタブレットのみ(Desktop and tablets only)
- モバイルのみ(Mobile only)
アクティベーション方法の非適用
アクティベーション方法を選択しない場合、API経由でガイドを起動するという方法をとることもできます。
ガイドは、ガイドのパーマリンク経由でも、リソースセンターに追加されている場合でも起動できます。
スケジューリング
アクティベーション方法に関係なく、特定の期間ガイドを表示する場合は、ガイドの設定ページでガイドの開始と終了の日時をスケジュールできます。
ガイドの開始日を選択した場合、選択した日付にガイドを表示するには、ガイドのステータスをスケジュール済みに設定する必要があります。
ガイドが有効期限に達すると、ガイドがまだ[公開(Public)]として表示されている場合でも、ユーザーへの表示はすぐに停止されます。有効期限が切れるとすぐに、ガイドのステータスが[公開]から[無効(Disabled)]に変更されます。
要素包含判定ルール
ガイドは、要素包含判定ルールを使用して、ターゲット要素の内容に基づいて条件に応じて表示されます。要素包含判定ルールはテキストまたは数字を判定するもので、ガイドの最初のステップでのみ設定できます。1つのガイドに設定できる要素包含判定ルールは、1つのみです。
要素包含判定ルールの設定
- ステップ1の[場所(Location)]タブで、検証する値を含む要素をターゲットにします。
- 動的またはユーザーが入力したコンテンツ(input、div、spanなど)を含むセレクタを使用します。
:contains()
ルールは避けてください。この設定により、内容が完全に一致するとガイドステップが強制的に表示され、要素包含判定ルールが意図したとおりに動作しなくなる場合があります。
-
[要素包含判定ルールの有効化(Enable Element Contains Rule)]をオンにして、ルールを設定します。この設定により、ターゲット要素に含まれる現在のコンテンツが表示されます。ターゲット要素の調整は必要に応じて行います。
-
コンテンツタイプ、一致オプション、値を選択します。ここでは、それぞれ異なる一致条件をテキストまたは数値で設定できます。
テキストの大文字と小文字は区別されません。ルールには、句読点や記号も設定できます。テキストは、ユーザーがフォームに入力した内容に対しても使用できます。たとえば、メールフィールドに対して、[次のものを含まない(Does Not Contain)]ルールで「@」を指定すると、ユーザーが有効なメールアドレスを入力したかどうかを検証し、そうでなかった場合にガイドを表示できます。
検証オプションは要素の内容を文字列として扱い、対象の値の中で一致するものを検索します。-
- [次のものを含む(Contains)]
- [次のものを含まない(Does Not Contain)]
- [次のものと完全一致する(Exactly Matches)]
- [次のものと一致しない(Does Not Match)]
数値は浮動小数点として認識し、日付、時刻、通貨、または小数点以外のピリオドといった特定の形式は認識しません。値を比較する場合、数字に続く1つのピリオドと、負の数を示す先頭のマイナス記号が認識されます。カンマは無視されます。その他の先頭のピリオドは無視されます。数値の後のピリオドまたは記号は、その数値の終了を意味するものとして扱われます。
-
- [次のものと等しい(Equals)]
- [次のものと等しくない(Not Equal To)]
- [次のものより大きい(Is Greater Than)]
- [次のものより小さい(Is Less Than)]
サポートしている形式
要素コンテンツ 比較に使用する値 1234 1234 -1234 -1234 12.34 12.34 0.1234 0.1234 値無し $1234 1234 12.34% 12.34 1,234 1234 001234 1234 サポートしていない形式
要素コンテンツ 比較に使用する値 .1234 (先頭の0なし) 1234 12/34 (分数) 12 12:34AM (時間) 12 12/12/21 (日付) 12 1.2.3.4 (IPアドレス) 1.2 €12,34 (国際通貨でのカンマの使用) 1234 (123)456-7890 (電話番号) 123 12, 34, 56 (スペース区切り) 12 ルールビルダーは、ターゲット要素の現在のコンテンツを現在のルールで検証します。現在のコンテンツは動的な値でなければならないことに注意してください。設定している時にルールを通過しなくても問題ありません。そうしたことが起きても、ルールが意図したとおりに機能することの確認にもなります。
- ルールを通過した場合、ガイドが表示される
- ルールを通過しなかった場合、ガイドは表示されない
[値(Value)]は必須のフィールドです。値が入力されないと、要素包含判定ルールは保存できません。
-
-
[完了(Done)]を選択して、要素包含判定ルールを保存します。アクションバーのガイドへの変更を忘れずに保存してください。
ガイドの持続性
[ガイドの持続性(Guide Persistence)]を使用して、特定の要素がページに表示されたときにガイドを有効にし、その要素が消えてもガイドが持続するようにします。ガイドの持続性は、ガイドのどのステップでも有効にすることができます。
ガイドを作成したら、以下の手順を実行します。
- ガイドでステップを選択します。
- 「コンテナを編集」ダイアログで「場所」タブを選択します。
- [ガイドの持続性(Guide Persistence)]をオンにします。
- [完了(Done)]を選択して終了し、[保存(Save)]を選択してガイドを保存します。