この記事では、Pendoを使用して複数のページでガイドステップを有効化する方法について説明します。これにより、あるページから開始し、別のページでツールチップが表示されるウォークスルー体験を作成できます。
ユースケース:この方法は、あるページでアクションを開始し、別のページで詳細なガイダンスを必要とするマルチステッププロセスでユーザーを導く必要がある場合に活用できます。
ウォークスルーガイドを設定する
- Pendoでウォークスルーガイドを作成します。
- ウォークスルーのターゲットユーザーセグメントを定義して、その関連性を確保します。
- アクティベーション方法を[要素のクリック(Element Click)]に設定し、最初のページでウォークスルーをトリガーする特定のボタンまたは要素を選択します。
- アクティベーションが正しいターゲット要素に対して設定されていることを確認します。
非表示の開始ステップを作成する
- ウォークスルーをトリガーするボタンまたは要素があるページに移動します。
- [バナー(Banner)]タイプを使用して新しいステップを生成し、[ブランク(Blank)]テーマを選択してビューで非表示にします。
- スタイル設定の背景オプションが無効になっていることを確認します。
- ステップにコードブロックを追加します。
- [Javascript]タブで以下のルールを追加します。
pendo.onGuideAdvanced();
- [CSS]タブで以下のルールを追加します。
opacity:0;
- [Javascript]タブで以下のルールを追加します。
表示されるガイドステップを作成する
- ウォークスルーガイドを表示させたいページに移動し、新しいステップを追加します。
- このページのユーザージャーニーに固有のコンテキストに応じて、ステップをカスタマイズします。
ウォークスルーをテストする
上記の手順により、あるページのボタンのクリックから開始し、別のページでも効果的にガイダンスが提供されるようウォークスルーが設定されました。シームレスな体験を確保するために、ウォークスルーおよびページ間の遷移をテストすることを強くお勧めします。