概要
特定のユーザーにのみ表示する要素はありますか？ユーザーは、ステータスやレベルに応じてアプリケーションの異なる機能にアクセスできますか？この5つのステップのレシピでは、カスタムコードブロックを実装して、ターゲットセグメントのページに要素が条件付きで存在する場合にステップをスキップする、マルチステップのPendoガイドを構築する方法を説明します。
材料（必要なもの）
- ガイドを作成、管理、公開するためのユーザー権限レベル。
- ユーザー - 公開済みガイドの管理、ユーザー - ガイドとレイアウトをゼロから作成、または管理者
-
Pendo公開GitHubリポジトリのリンク
方法
ステップ1：ガイドに移動する
［ガイド］セクションをクリックして、［新しいガイドを作成（Create New Guide）］をクリックします。
［既存のツールチップタイプのレイアウト（existing Tooltip type Layout）］または［ゼロから開始するツールチップ（Start from Scratch Tooltip）］をクリックします。
［アプリで管理（Manage In-App）］をクリックして、［デザイナーを起動（Launch the Designer）］をクリックします。
ステップ2：最初のステップを作成する
アプリケーションで、Pendoビジュアルデザイナーを使用して、ページの読み込み時にページに表示されるかどうかわからない要素をターゲットにします。
この例では、ページの左上にあるハンバーガーメニューをターゲットにします：
このハンバーガーメニューは、ユーザーがブラウザのウィンドウ幅を狭くした場合にのみ表示されます。ウィンドウ幅が全画面の場合は、以下のように表示されます：
画面が小さい場合は、上のようなハンバーガーメニューが表示されます。
次に、ウォークスルーのステップ1で、［ビルディングブロック（Building Block）］を開き、［カスタムコード（Custom Code）］を選択します：
以下のJavaScriptスニペットをカスタムコードブロックのJSタブに配置します。
// 表示される要素がない場合はステップをスキップ
(function skipStepNoElement() {
// 警告：.getPositionOfStep()は1から始まる番号
var nextStep = guide.steps[guide.getPositionOfStep(step)];
/* ガイドの読み込み時間のために延期する必要がある場合、または要素がまだ表示されていない場合
pendo._.defer(function(){setTimeout(function checkElementAndSkip() {*/
(function checkElementAndSkip() {
var results = pendo.Sizzle(nextStep.elementPathRule);
if (results.length === 0 || !pendo._.some(results, pendo.isElementVisible)){
pendo.log(guide.id + ':advance 2 steps');
pendo.onGuideAdvanced(nextStep);
} else {
pendo.log(guide.id + ':advance 1 step');
pendo.onGuideAdvanced();
}
})();
})();
これは、「見えないステップ」になります。すぐに呼び出される関数を使用して、ページの読み込み時にJavaScript関数を実行するためのコンテナとしてガイドを機能させることができます。
Pendoは、このようにして要素の存在を確認します。要素がない場合、関数により要素検索の結果が返されないため、ガイドはそのステップをスキップしてステップを2つ進めます。
ステップ3：ドロップダウントレイを使用する、他のステップを追加する
訪問者向けの要素が存在する場合、このステップがウォークスルーのステップ1（または条件要素の後のステップ）になります。訪問者向けのページに要素が存在しない場合、このステップはスキップされます。
この段階でのマルチステップウォークスルーは次のようになります：
ステップ4：他のステップを追加する
これは、前のステップの要素にアクセスできない場合に訪問者が見る最初のステップです。訪問者が前のステップの要素にアクセスできる場合、そのユーザーにとってこれはステップ2になります。
ステップ5：ガイドをテストして本番環境に展開する
完了です！
オンボーディング戦略をさらに進化させましょう。
プロフェッショナルサービスエンジニアのチームを活用して、ガイドやリソースセンターにさらなるカスタマイズを加えることができます。
できるだけ早くスコープコールを設定いたします：services@pendo.io