ほとんどの場合、ガイドは有効化されたページに表示されます。この場合、あるページでの操作が終わった後にガイドを有効化して、ユーザーが別のページにアクセスしたときに表示されるようにします。このアプローチを行うと、あるページで始まり、別のページに続くマルチステッププロセスでユーザーを誘導しやすくなります。
異なるページでガイドステップを有効化する方法については、Pendo Academyに掲載している動画をご視聴ください。
ガイドのセグメントとアクティベーションを設定する
まず、ガイドを作成して設定します。
- Pendoでガイドを作成します。
- ガイドのターゲットユーザーセグメントを定義して、その関連性を確保します。
- ガイドを有効にしたいプロダクト内の最初のページに移動します。
- [ステップを表示(View Steps)]を選択し、[アクティベーション(Activation)]ステップの[編集(Edit)]アイコンを選択します。
- アクティベーション方法を[ターゲット要素(Target element)]に設定し、ガイドを開始する最初のページ上の特定のボタンまたは要素を選択します。
- アクティベーションが正しいターゲット要素に対して設定されていることを確認します。
非表示の開始ステップを設定する
最初のガイドステップを、ガイドを2番目のページに進めるための非表示ステップとして設定します。ガイドには最初のステップが既に作成されており、ユーザーはまだガイドを有効化したいプロダクトの最初のページにいます。
- [スタイリング(Styling)]の背景オプションがオフになっていることを確認します。
- [場所(Location)]タブで、ターゲットページ(Page Location)を[当該ページのみ(Only on this page)]に設定します。
- ステップにコードブロックを追加します。
- ユーザーのアクションなしで非表示のガイドステップを進めるために、[Javascript]タブで次のルールを追加します。
pendo.onGuideAdvanced();
- ガイドを非表示にするために、[CSS]タブで次のルールを追加します。
opacity:0;
- ユーザーのアクションなしで非表示のガイドステップを進めるために、[Javascript]タブで次のルールを追加します。
- [完了(Done)]を選択して終了します。非表示のステップは表示されず、ガイドのステップでのみ確認できます。
表示されるガイドステップを作成する
ガイドに新しいステップを追加します。これはガイドの2番目のステップですが、ユーザーにとっては最初に目にするステップです。
- ビジュアルデザインスタジオ(Visual Design Studio)で[移動(Navigate)]を選択し、最初に目にするガイドステップを表示するページに移動します。
- [ステップを表示(View Steps)]を選択し、次に[ステップを追加(Add Step)]を選択します。
- [新しいステップを追加(Add New Step)]ページで、新しいステップに必要なレイアウトを選択します。
- ターゲット要素を選択します。
- [場所(Location)]タブで、ターゲットページ(Page Location)を[当該ページのみ(Only on this page)]に設定します。
- このページのユーザージャーニーに固有のコンテキストに応じて、ステップをカスタマイズします。
- 必要に応じて、ガイドステップを追加しします。
ガイドをテストする
上記の手順により、あるページのボタンの選択から開始し、別のページでガイダンスが提供されるようガイドが設定されました。滞りなく利用できるよう、ガイドとページ間の遷移をテストすることを強くお勧めします。