ほとんどの場合、ガイドは有効化されたページに表示されます。この記事では、ガイドをアクティベーションが発生したページとは別のページに表示する方法について説明します。たとえば、訪問者があるページで何らかのアクションを完了した後、別のページに移動した際にガイドを表示させたい場合などです。このアプローチは、あるページで開始して別のページで続く複数ステップのワークフローに役立ちます。この記事を動画形式でご覧になりたい場合は、Pendo Academyをご覧ください。
もし目的が複数のページを一つのガイド内で段階的に案内することなら、これは正しいアプローチではありません。その用途については、Pendo Academy の別の動画で複数ページにわたるウォークスルーの作成をご覧ください。ガイドボタンのアクションを使用して訪問者を次のページに誘導する方法、またはツールチップを使用して訪問者にページ間の移動方法を説明する方法について説明します。
ガイドのセグメントとアクティベーションを設定する
まず、ガイドを作成して設定します。
- Pendoでガイドを作成します。
- ガイドのターゲットユーザーセグメントを定義して、その関連性を確保します。
- ガイドを有効にしたいプロダクト内の最初のページに移動します。
- ［ステップを表示（View Steps）］を選択し、［アクティベーション（Activation）］ステップの［編集（Edit）］アイコンを選択します。
- アクティベーション方法を［ターゲット要素（Target element）］に設定し、ガイドを開始する最初のページ上の特定のボタンまたは要素を選択します。
- アクティベーションが正しいターゲット要素に対して設定されていることを確認します。
非表示の開始ステップを設定する
最初のガイドステップを、ガイドを2番目のページに進めるための非表示ステップとして設定します。ガイドには最初のステップが既に作成されており、ユーザーはまだガイドを有効化したいプロダクトの最初のページにいます。
- ［スタイリング（Styling）］の背景オプションがオフになっていることを確認します。
- ［場所（Location）］タブで、ターゲットページ（Page Location）を［当該ページのみ（Only on this page）］に設定します。
- ステップにコードブロックを追加します。
-
ユーザーのアクションなしで非表示のガイドステップを進めるために、［Javascript］タブで次のルールを追加します。
pendo.onGuideAdvanced(); -
ガイドを非表示にするために、［CSS］タブで次のルールを追加します。
if (!pendo.designerEnabled){ opacity:0; }
-
- ［完了（Done）］を選択して終了します。ガイドステップはデザイナーに表示されますが、ガイドが表示されると非表示になります。
表示されるガイドステップを作成する
ガイドに新しいステップを追加します。これはガイドの2番目のステップですが、ユーザーにとっては最初に目にするステップです。
- ビジュアルデザインスタジオ（Visual Design Studio）で［移動（Navigate）］を選択し、最初に目にするガイドステップを表示するページに移動します。
- ［ステップを表示（View Steps）］を選択し、次に［ステップを追加（Add Step）］を選択します。
- ［新しいステップを追加（Add New Step）］ページで、新しいステップに必要なレイアウトを選択します。
- ターゲット要素を選択します。
- ［場所（Location）］タブで、ターゲットページ（Page Location）を［当該ページのみ（Only on this page）］に設定します。
- このページのユーザージャーニーに固有のコンテキストに応じて、ステップをカスタマイズします。
- 必要に応じて、ガイドステップを追加しします。
ガイドをテストする
上記の手順により、あるページのボタンの選択から開始し、別のページでガイダンスが提供されるようガイドが設定されました。滞りなく利用できるよう、ガイドとページ間の遷移をテストすることを強くお勧めします。