このバッジガイドはCode Blockを使用します。
Guide Code Blockとは
Pendoのガイドではビルディングブロックとして、Code Blockをガイド内に配置することができます。
Code Blockの中身はHTML/CSS/JSを自由記述でき、配置したガイドステップが表示されている間に実行されます。
HTML/CSS/JSはタブで切り替えられます。
バッジクリック時にURLを開くように設定
まずは新規ウィンドウでダミーページを開くコードをJavascriptタブ内に書いてみます。
window.open('https://example.com', '_blank');
バッジをクリックするとガイドが発火し、新しいウィンドウでexample.comが開きます。
・・・が
VDS起動時にコードブロック内の内容を更新したり、ページを再読み込みするたびにexample.comが開いてしまいます。
編集時にコードが起動しないようにif文を入れましょう。
if(!pendo.designerEnabled) {
window.open('https://example.com', '_blank');
}
このpendo.designerEnabledでVDSが起動しているかを判定しています。
これでVDS起動していないときのみwindow.openが起動します。
挙動の確認
挙動に違和感を感じませんか？
そうなんです、空白のツールチップガイドが表示されたままになっています。
今回のバッジ→新規ウィンドウでページを開くという挙動を実装する際に、実際のガイドウィンドウを表示させる必要はありません。むしろ非表示にしたいですね。
ガイドが表示されないようにコードブロックに一文を加えましょう。
ガイド起動時にガイドをすぐ閉じるコマンド
以下一文でガイドの✗ボタンを押して閉じた時と同じ挙動になります。
pendo.onGuideDimissed();
コードブロック内のコードは挿入されているガイドステップが起動したときに自動でコードも実行されます。
上記コードを入れることによって、ガイドステップ起動と同時にガイドが閉じるという挙動になります。
API仕様書：
Guides | Pendo Agent API
もう一度挙動の確認
今度はちゃんとガイドが開いていない（起動後すぐに閉じる）ので、違和感はない挙動になったかと思います。
まとめ
- バッジをクリックしたらURLに飛ばすためにはコードブロックを追加してJavascriptで処理する必要がある
- コードブロック内にJSを書いた場合、編集時に永遠と実行されてしまうため、VDS起動時には起動しないif文を追加する必要がある
- バッジをクリックすることでガイドが起動してしまうため、APIで強制的にガイドを閉じる必要がある
こちらが完成形のコードです：
if(!pendo.designerEnabled) {
window.open('https://example.com', '_blank');
}
pendo.onGuideDismissed();