モバイルガイドの作成

最終更新日:

この記事では、モバイルガイドの作成方法について説明します。

注:ガイドを公開する前に、ガイドをプレビューしてテストすることを強くお勧めします。

要件

ビジュアルデザインスタジオ(Visual Design Studio)を使用するには、次のいずれかの権限が必要です。

  • Pendo管理者権限
  • 最低でも以下を実施できるPendoユーザー権限
    • レイアウトからガイドを作成する
    • 公開されたガイドを管理する
    • ガイドとレイアウトを最初から作成する

ガイドの作成

モバイルガイドの作成を開始するには、次の操作を行います。

1. モバイルアプリケーションがSDK 2.xと統合されていることを確認してください。確認するには、[サブスクリプション設定(Subscription Settings)]に移動します。統合されたアプリには[統合済み(Integrated)]ラベルが表示されているはずです。

 

Screen_Shot_2019-09-23_at_0.46.26.png

2. 左側のナビゲーションメニューで[ガイド(Guides)]アイコンを選択します。

3. [ガイド]ページで[ビジュアルデザインスタジオ]をクリックし、[新しいガイドを作成(Create New Guide)]を選択します。

4. ドロップダウンメニューから該当するモバイルアプリを選択します。

mceclip2.png

5. 利用可能なモバイルレイアウトテンプレートを選択し、ガイドの名前を変更します。

ヒント:多くの場合、複数のガイドが存在するため、命名規則を設定し、グループを使用して検索を容易にすることをお勧めします。

ガイドコンテンツのカスタマイズ

  • ビジュアルデザインスタジオを開いてガイドを編集するには[自分のアプリで管理(Manage in My App)]をクリックします。

mceclip3.png

ヒント:ガイドのプレビューにカーソルを合わせると、[自分のアプリで管理]オプションが表示され、ビジュアルデザイナーが起動します。

ガイドの編集は、[コンテナを編集(Edit Container)]ボックス内で行うことができます。コンテナのデフォルト設定は、アプリのテーマによって設定されます。

1. コンテナの設定を編集するには、[テーマ(Theme)]を[カスタム(Custom)]に変更します。

image__33_.png

 

2. 最初の編集が完了したら、[適用(Apply)]をクリックします。

3. ガイドのプレビュー内のプレースホルダーアイテムにカーソルを合わせ、クリックして編集します。

4. ガイドに新しいビルディングブロックを追加するには、青い線が表示されるまでアイテム間を移動します。

5.「プラス」記号をクリックして、ビルディングブロックを追加します。

hover-edit-add-bb.gif

ガイドのトランジションアニメーションの選択

ガイドが各ステップに遷移する方法を選択します。これを変更するには、[コンテナの編集(Edit Container)] > [遷移(Transitions)] > [アニメーションタイプ(Animation Type)]に移動し、必要に応じて[アニメーションタイプ(Animation Type)]、[期間(Duration)]、[方向(Direction)]を選択します。

ヒント:デフォルトの遷移タイプは「表示(Appear)」です。マルチステップ、フルスクリーン、またはポップアップガイドの場合は、スライドアニメーションを使用することをお勧めします。

loop-transitions-slide.gif

スライドアニメーションの例

現在、ツールチップの遷移は使用できません。

ガイドのプレビュー

デバイスでのガイドのプレビュー(Preview Guide On Device)」を使用して、ガイドがモバイルデバイスでどのように表示されるかを確認します。デバイスを接続するように指示され、ガイドがデバイスに表示されます。

ビジュアルデザイナーはガイドの「ウェブプレビュー」に過ぎないため、公開前に実際のモバイルデバイスでガイドがどのように見えるかをテストすることが非常に重要です。

mceclip4.png 実機またはエミュレーターでガイドをプレビューする

:「デバイスでのフルフローのテスト」中、Pendoはセグメントとスロットルルールを無視し、毎回ガイドを表示します。ガイドの一部として設定されたターゲット要素、ページ、アクティベーション方法は、このプレビュー方法に対して設定されている必要があります。

ガイドのアクティベーション方法

ガイドをどのようにアクティベートするかを選択します。利用可能なアクティベーションオプションは、アクションバー > [アクティベーション設定(Activation Settings)]で確認できます。

  • アプリの起動(App Launch):アプリ起動時にアクティベーションします。
  • ページの閲覧(Page View):ユーザーが定義したページを表示したときにアクティベーションします。
  • ターゲット要素(Target Element):定義したフィーチャーをユーザーがクリックしたときにアクティベーションします。
  • トラックイベント(Track Event):定義したトラックイベントが呼び出されたときにアクティベーションします(SDK 2.7以降)。
  • ガイドからガイドを起動(Launch Guide From Guide):他のガイド(SDK 2.10以降)からガイドを起動するために、特定のアクティベーション方法を設定する必要はありません(すべてのアクティベーション方法を選択しないでおくことができます)。このオプションは、他のアクティベーション方法と組み合わせることもできます。

Screen_Shot_2021-02-24_at_15.18.39.png
モバイルガイドのアクティベーションタイプを選択

 

アプリの起動(App Launch) - startSessionメソッドが呼び出され、モバイルセッションが開始されると同時に、セグメントされた訪問者にガイドが開始されます。

一般的なユースケース:

  • アプリの新しいバージョンで「新機能」を表示する
  • 新しいユーザーのオンボーディングを開始する
  • バージョンを廃止する

ページビュー(Page View) - ガイドが表示されるアプリ内のページを選択します。すでにタグ付けされているページを選択するか、[新しいページをタグ付け(Tag New Page)]ボタンを選択して新しいページをタグ付けします。この場合、新しいページをキャプチャするためには、デバイスを接続する必要があります(デバイスを接続)。複数のページを選択した場合、いずれかのページを最初に見たときにガイドが起動します。


注:ガイドのステップによって、アクティベーション用に設定されるページが異なる場合があります。別のページのガイドの次のステップにユーザーを誘導するには、ディープリンクまたはツールチップを使用したオーガニックなユーザーナビゲーションをお勧めします。

mceclip6.png

すでにタグ付けされているモバイルページを選択してガイドをアクティベーションするか、新しいページをタグ付けします

一般的なユースケース:

  • 新規訪問者にアプリ内の特定のセクションを案内する
  • 特定のアプリ画面がメンテナンス中であることを訪問者に通知する
 

ターゲット要素(Target Element) - 目的のページを選択した後、スクリーンショットでガイドをクリックしてアクティブにする要素を選択します。UI要素が保存されていない場合は、新しいUI要素を保存するように求められます。

mceclip7.png
ターゲットモード - 要素を選択する

一般的なユースケース:

  • コンテキストヘルプを表示するためにアプリにヘルプボタンを追加する、表示頻度を毎回設定する。
  • 特定のフィーチャーのオンボーディングをする

トラックイベント(Track Event):ガイドのトリガーとして使用するトラックイベントを選択します。トラックイベントが呼び出されると、セグメント化された訪問者にガイドが表示されます。詳細については、トラックイベントを参照してください。

  • これにより、プロセスの完了やサーバーの応答の際など、いつでもどこでも好きなときにガイドを起動できるようになります。

デバイス上のガイドのテスト

選択したアクティベーションが期待どおりに動作しているかどうかを確認するには、「デバイスでのガイドのプレビュー(Preview Guide On Device)」をご利用ください。

ガイドのテストでは次の2つのオプションを使用できます。

  • ステップデザインを表示(View Step Design)- モバイルデバイスでガイドステップがどのように表示されるかを確認できます。
  • アクティベーションしてガイド全体をテストする(Test Full Guide With Activation)-これにより、ガイド用に設計したアクティベーション方法とフローをテストできます。
:「デバイスでのガイドのプレビュー」では、セグメントとスロットリングのルールが無視されます。モバイルガイドには、ガイドをテストする際の「ステージング」環境の概念もありません。模擬ライブシナリオでガイドをテストする場合、ほとんどのユーザーは、テストに使用している現在の訪問者IDにガイドをセグメント化します。

ガイドの作業が終わったら、右上の[保存(Save)]ボタンで変更内容を保存し、[終了(Exit)]を選択してデザイナーを終了するか、[保存]の横にある下向きアイコンを選択して[保存して終了(Save and Exit)]を選択します。

ガイドのセグメント化とスケジュール

ガイドに問題がなければ、ガイドの詳細ページに移動して、ガイドのセグメントとスケジュールを調整します。

  • ガイドを受け取るユーザーのセグメントを選択します。デフォルトのセグメントは「全員(Everyone)」です。選択したセグメントに含まれているユーザーの数と、対象となる訪問者の数を確認できます。
  • ガイドがいつ公開されるか(必要であれば、いつ公開を停止するか)をスケジュールします。
  • 対象となる訪問者:対象となる訪問者の数がセグメントよりも少ないことがあります。これは、ユーザーの中に、まだアプリの古いバージョンとSDKの古いバージョンを使っている人がいる可能性があるためです。この場合、これらのユーザーはPendoの新機能をまだ利用できないことがあります。

重要:ガイドセグメントには、セグメントに明示的に含まれていない場合を除き、アナリティクスから除外された訪問者が含まれます。

ガイドの公開と検証

ガイドを公開するには、ガイドのステータスを [公開(Public)]に更新します。モバイルには「ステージング」オプションがないため、モバイルデバイスでフロー全体をテストせずにモバイルガイドを公開しないでください。

注: ガイドのセグメントに含まれている場合に、公開後に自分のデバイスでガイドを表示したい場合は、次のことを行う必要があります。
  1. デバイスをPendoから切断します(デバイスのPendo FABをクリックし、[切断(Disconnect)] -> [完全に切断(Permanently Disconnect)]を選択します)
  2. アプリを閉じて再起動します(ガイドは「セッション」の開始時にデバイスに送信されます)。
  3. ガイドのセグメントに含まれている場合は、ガイドの「アクティベーション」基準をトリガーすることで、アプリでガイドを表示できます。
  4. 「毎回表示する(show every time)」に設定されていない限り、ユーザーが一度ガイドを表示した後に、再度表示されることはありません。
ヒント:広範なユーザーセグメントにガイドを公開する前に、小規模な「テストグループ」に公開することをお勧めします。チームのユーザーのテストセグメントを作成し(訪問者IDまたはアカウントIDを使用)、このテストセグメントにガイドを公開することができます。結果に問題が無ければ、より広いユーザーセグメントに向けてガイドを公開します。

よくある質問

テストデバイスと本番環境の両方で同じSDKを使用する必要がありますか?

必須ではありませんが、将来のリリースをテストする場合を除いて、全く同じ顧客体験を再現することをお勧めします。モバイルアプリケーションは、(Pendoで別の開発アプリケーションを作成しない限り)テストと本番環境で同じAPIキーを使用し、同じSDK/APIキーを使用した場合に収集されるデータに違いはありません。これは、アナリティクスに影響を与える可能性があります。ただし、除外リストを利用して、アナリティクスから自分のデータをフィルタリングするオプションがあります。

開発環境と本番環境それぞれでSDKを用意した方がよいのでしょうか?

お客様のビジネスニーズによって異なりますので、詳しくは担当のアカウントマネージャーまでお問い合わせください。

IPアドレスだけでモバイルガイドをテストできますか?

できません。現在、これを行うためのすぐに使用できるオプションはありません。代わりに、ユーザーを開発アプリのバージョンにセグメント化するテストセグメントを作成することができます。

ガイドが閉じられ、再表示の対象ではなくなったとみなされるのは、どのような場合ですか?

場合によっては、ユーザーがスマートフォンのバックグラウンドでアプリを実行することがあります。Androidではホームボタンを押すか、iOSでは上にスワイプ/Touch IDボタンを押します。この場合、ガイドが表示されていれば、ガイドは閉じられず、アプリを再度起動したときに再び表示されるものと期待されます。閉じるアクションのボタンをクリックする、角にある[x]ボタンをクリックする、またはガイドの最後のステップを完了すると、ガイドは閉じられたと見なされます(再び表示されることはありません)。

注:Androidデバイスの[戻る(Back)]ボタンをクリックすると、ガイドが閉じます。