この記事では、モバイル用のビジュアルデザインスタジオ(Visual Design Studio)を使用してモバイルガイドを作成する方法について説明します。
ガイドの作成方法については、Pendo Academyに掲載している動画をご視聴ください。
要件
ビジュアルデザインスタジオ(Visual Design Studio)を使用するには、次のいずれかの権限が必要です。
- Pendo管理者権限
- 最低でも以下のうち1つを実施できるPendoユーザー権限
- レイアウトからガイドを作成する
- 公開されたガイドを管理する
- ガイドとレイアウトを最初から作成する
ガイドの作成
-
モバイルアプリケーションがSDK 2.xと統合されていることを確認してください。確認するには、[サブスクリプション設定(Subscription Settings)]に移動します。統合されたアプリには[統合済み(Integrated)]ラベルが表示されているはずです。
- 左側のナビゲーションメニューで[ガイド(Guides)]を選択します。
- [ガイド]ページで、[ガイドを作成(Create Guide)]を選択します。
- ドロップダウンメニューから該当するモバイルアプリを選択します。
- 利用可能なモバイルレイアウトテンプレートを選択し、ガイドの名前を変更します。
ヒント:多くの場合、複数のガイドが存在するため、命名規則を設定し、グループを使用して検索しやすくすることをお勧めします。
ガイドコンテンツのカスタマイズ
- ビジュアルデザインスタジオを開いてガイドを編集するには[自分のアプリで管理(Manage in My App)]を選択します。
ヒント:ガイドのプレビューにカーソルを合わせると、[自分のアプリで管理(Manage in My App)]が表示され、ビジュアルデザインスタジオ(Visual Design Studio)が起動します。
ガイドの編集は、[コンテナを編集(Edit Container)]ボックス内で行うことができます。コンテナのデフォルト設定は、アプリのテーマによって設定されます。
- コンテナの設定を編集するには、[テーマ(Theme)]を[カスタム(Custom)]に変更します。
- 最初の編集が完了したら、[適用(Apply)]を選択します。
- ガイドのプレビュー内のプレースホルダーアイテムにカーソルを合わせて選択し、編集します。
- ガイドに新しいビルディングブロック(ボタン、タイトル、画像、文字、投票とアンケート調査など)を追加するには、アイテム間にマウスポインタを合わせ、青い線を表示させます。
- 「プラス」記号を選択して、ビルディングブロックを追加します。
ガイドのトランジションアニメーションの選択
ガイドが各ステップに遷移する方法を選択します。
トランジションを変更するには、[コンテナを編集]>[遷移(Transitions)]>[アニメーションタイプ(Animation Type)]に移動し、必要に応じて[アニメーションタイプ]、[期間(Duration)]、[方向(Direction)]を選択します。
ヒント:デフォルトの遷移タイプは[なし(None)]です。マルチステップ、フルスクリーン、またはポップアップガイドの場合は、スライドアニメーションを使用することをお勧めします。
スライドアニメーションの例
注:現在、ツールチップの遷移は使用できません。
ガイドのアクティベーション方法
ガイドを作成するときは、ガイドをアクティブにする方法を決定する必要があります。 利用可能なアクティベーションオプションは以下のとおりで、これらは[アクティベーション設定(Activation Settings)]のアクションバーにあります。
- アプリの起動(App Launch):アプリ起動時にアクティベーションします。
- ページの閲覧(Page View):ユーザーが定義したページを表示したときにアクティベーションします。
- ターゲット要素(Target Element):定義したフィーチャーをユーザーがクリックしたときにアクティベーションします。
-
トラックイベント(Track Events):
- トラックイベントに基づく(Based on track event ):指定したトラックイベントと一致するトラックイベントが呼び出されたときにアクティベーションします。
- トラックイベントプロパティに基づく(Based on track event property):指定したトラックイベントと一致するトラックイベントおよび指定した条件と一致するプロパティ値が呼び出されたときにアクティベーションします(SDK 2.22以降)。
-
ガイドからガイドを起動(Launch Guide From Guide):他のガイドからガイドを起動するには、特定のアクティベーション方法を設定する必要はなく、すべてのアクティベーション方法を未選択のままにしておきます。またこのオプションは、他のアクティベーション方法と組み合わせることができます。
アクティベーション方法の詳細
アプリの起動(App Launch) - startSessionメソッドが呼び出され、モバイルセッションが開始されると同時に、セグメントされた訪問者にガイドが開始されます。
一般的なユースケース:
- アプリの新しいバージョンで「新機能」を表示する
- 新しいユーザーのオンボーディングを開始する
- バージョンを廃止する
ページビュー(Page View) - ガイドが表示されるアプリ内のページを選択します。すでにタグ付けされているページを選択するか、[新しいページをタグ付け(Tag New Page)]ボタンを選択して新しいページをタグ付けします。この場合、新しいページをキャプチャするためには、デバイスを接続する必要があります(デバイスを接続)。複数のページを選択した場合、いずれかのページを最初に見たときにガイドが起動します。
注:ガイドのステップによって、アクティベーション用に設定されるページが異なる場合があります。別のページにあるガイドの次のステップにユーザーを誘導するには、ディープリンクまたはツールチップを使用したオーガニックなユーザーナビゲーションをお勧めします。
一般的なユースケース:
ターゲット要素(Target Element) - 目的のページを選択した後、スクリーンショットでガイドを選択してアクティブにする要素を選択します。UI要素が保存されていない場合は、新しいUI要素を保存するように求められます。
一般的なユースケース:
- コンテキストヘルプを表示するためにアプリにヘルプボタンを追加する。表示頻度を毎回設定する。
- 特定のフィーチャーのオンボーディングをする
トラックイベント:
- トラックイベントに基づく:ガイドのトリガーとして使用するトラックイベントを選択します。トラックイベントが呼び出されると、セグメント化された訪問者にガイドが表示されます。このオプションを選択すると、プロセスが完了したときや、サーバーが応答したときなど、独自のタイミングでガイドをアクティベーションできるようになります。
-
トラックイベントプロパティに基づく:以下のように、ガイドの起動に使用するトラックイベントプロパティのタイプ、演算子、値を選択します。
詳細については、トラックイベントを参照してください。
ガイドのアクティベーション方法については、Pendo Academyに掲載している動画をご視聴ください。
デバイスでガイドをテストする
ビジュアルデザインスタジオが提供するのはガイドの「ウェブプレビュー」に過ぎないため、公開前に必ず実際のモバイルデバイスでガイドの見え方をテストする必要があります。ガイドをテストするには、[テスト(Test)]を選択します。
注:デバイスが接続されていない場合は、デバイスを接続する必要があります。
テスト中、Pendoはセグメントとスロットルルールを無視し、毎回ガイドを表示します。ガイドの一部として設定されたターゲット要素、ページ、アクティベーション方法は、このプレビュー方法に対して設定されている必要があります。
ガイドの作業が終わったら、右上の[保存(Save)]ボタンで変更内容を保存し、[終了(Exit)]を選択してデザイナーを終了するか、[保存]の横にある下向きアイコンを選択して[保存して終了(Save and Exit)]を選択します。
ガイドのテストについては、Pendo Academyに掲載している動画をご視聴ください。
ガイドのセグメント化とスケジュール
ガイドに問題がなければ、ガイドの詳細ページに移動して、ガイドのセグメントとスケジュールを調整します。
- ガイドを受け取るユーザーのセグメントを選択します。デフォルトのセグメントは[全員(Everyone)]です。選択したセグメントに含まれているユーザーの数と、対象となる訪問者の数を確認できます。
- ガイドがいつ公開されるか(必要であれば、いつ公開を停止するか)をスケジュールします。
対象となる訪問者の数がセグメントよりも少ないことがあります。この要因としては、ユーザーの中に旧バージョンのアプリとSDKを継続して使っている人がいることが考えられます。この場合、これらのユーザーはPendoの新機能を利用できない可能性があります。
重要:ガイドセグメントには、セグメントに明示的に含まれていない場合を除き、アナリティクスから除外された訪問者が含まれます。
ガイドのセグメント化については、Pendo Academyに掲載している動画をご視聴ください。
ガイドの公開と検証
ガイドを公開するには、ガイドのステータスを[公開(Public)]にします。モバイルには「ステージング」オプションがないため、モバイルデバイスでフロー全体をテストせずにモバイルガイドを公開しないようにしてください。もしお客様が当該ガイドのセグメント対象であり、公開した後にご自身のデバイスでガイドを確認したい場合は、以下の操作を行います。
- Pendoとお使いのデバイスとの接続を解除します。具体的には、デバイスで[Pendo FAB]を選択し、[ペアリングモードを終了(Exit Pairing Mode)]を選択します。
- アプリを閉じて再起動します(ガイドは「セッション」の開始時にデバイスに送信されます)。
- ガイドのセグメントに含まれている場合は、ガイドの「アクティベーション(activation)」基準をトリガーすることで、アプリでガイドを表示できます。
- 「毎回表示する(show every time)」に設定されていない限り、ユーザーが一度ガイドを表示した後に、再度表示されることはありません。
よくある質問
テストデバイスと本番環境の両方で同じSDKを使用する必要がありますか?
必須ではありませんが、将来のリリースをテストする場合を除いて、全く同じ顧客体験を再現することをお勧めします。モバイルアプリケーションは、(Pendoで別の開発アプリケーションを作成しない限り)テストと本番環境で同じAPIキーを使用し、同じSDK/APIキーを使用した場合に収集されるデータに違いはありません。これは、アナリティクスに影響を与える可能性があります。ただし、除外リストを利用して、アナリティクスから自分のデータをフィルタリングするオプションがあります。
開発環境と本番環境それぞれでSDKを用意した方がよいのでしょうか?
お客様のビジネスニーズによって異なりますので、詳しくは担当のアカウントマネージャーまでお問い合わせください。
IPアドレスだけでモバイルガイドをテストできますか?
できません。現在、これを行うためのすぐに使用できるオプションはありません。代わりに、ユーザーを開発アプリのバージョンにセグメント化するテストセグメントを作成することができます。
ガイドが閉じられ、再表示の対象ではなくなったとみなされるのは、どのような場合ですか?
場合によっては、ユーザーがスマートフォンのバックグラウンドでアプリを実行していることがあります。Androidではホームボタンを押すか、iOSでは上にスワイプ/Touch IDボタンを押します。この場合、ガイドが表示されていれば、ガイドは閉じられず、アプリを再度起動したときに再び表示されることが予想されます。閉じるアクションのボタンをクリックする、角にある[x]ボタンをクリックする、またはガイドの最後のステップを完了すると、ガイドは閉じられたと見なされます(再び表示されることはありません)。
注:Androidデバイスで[戻る(Back)]ボタンを選択すると、ポップアップガイドが閉じます。