ガイドの作成

この記事では、ビジュアルデザインスタジオ(Visual Design Studio)でガイドを作成する方法について詳しく説明します。新機能の紹介や、好ましい動作についての説明、また状況に応じたサポートを提供します。

簡単な概要はこちらのビデオをご覧ください。

 

要件

ビジュアルデザインスタジオを使用するには、Pendoユーザーは以下の2つの権限のいずれかが必要です。

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

はじめに

  1. ナビゲーションバーで[ガイド(Guides)]>[ガイド]と進み、 [+ガイドの作成(+Create Guide)]を選択します。
  2. Pendoアカウントに複数のウェブアプリケーションを設定している場合は、[ガイドの作成]ページで、ガイドを表示するアプリケーションを選択します。

    Create_Guide_page.png

  3. ガイドのカテゴリーを選択します。すると、デフォルトのPendoレイアウトもしくは[保存済みレイアウト(Saved Layouts)]のいずれかから、選択したカテゴリーの推奨レイアウトが表示されます。

    :ガイドは、1つのアプリにしか割り当てられません。

  4. [レイアウト(Layouts)]セクションで、レイアウトを選択します 。用意されているデフォルトのレイアウト、または過去にガイド作成に使用した保存済みのレイアウトから選択できます。レイアウトを選択すると、ガイドの詳細ページが表示されます。
  5. ガイドに名前を付け、ガイドを表示するアプリのプロダクトエリアを選択します。

    ヒント:すぐに複数のガイドを持つことになるので、検索しやすいように命名規則を設け、識別しやすいように色分けされたグループを用意することをお勧めします。詳細については、命名のベストプラクティスに関するヘルプ記事をご覧ください
  6. 必要に応じて、新しいプロダクトエリアを作成するには [+プロダクトエリアの作成(+Create Product Area)] を選択し、名前を付けて、 [プロダクトエリアの作成]を選択してください。
  7. [コンテンツ(Content)]エリアをクリックし、ビジュアルデザインスタジオを開きたいアプリケーションのURLを入力し、[デザイナーを起動(Launch Designer)]をクリックします。デザイナーが新しいタブで開かれます。

ガイドのデザイン

初めてビジュアルデザインスタジオを開くと、アプリケーションの上に[ガイドデザイナー(Guide Designer)]が起動されます。ガイドデザイナーには複数のツールが用意されており、ガイドのプレビューも可能です。[読み取り専用(Read Only)]に設定されているユーザーを除き、すべてのPendoユーザーがアクセスできます。

詳細については、ビジュアルデザインスタジオについてを参照してください。

[コンテナの編集(Edit Container)]ボックス内で、ガイドの初期編集を行うことができます。

  1. デザイナーを開いた状態で[ステップの表示(View Steps)]をクリックすると、 [ステップトレイ(Step Tray)](1)が表示されます。これには、カスタマイズのオプションとガイドの手順がすべて表示されます。要素をターゲットにしたいのに[アクションバー(Action Bar)](2)がそれを覆っている場合は、画面右上の両矢印ボタンをクリックして、画面下に移動させてください。
    open-step-tray.png


    ヒント:要素をターゲットにしたいのに[アクションバー]がそれを覆っている場合は、画面右上の両矢印ボタンをクリックして、画面下に移動させてください。

  2. ガイドにステップを追加するには、[ステップトレイ]で [+ステップの追加(+ Add Step)]をクリックします。
  3. ステップのガイド設定を編集するには、ステップを選択しプレビューの上にカーソルを合わせると[コンテナの編集(Edit Container)]ボックスが開きます。
  4. [コンテナの編集] ボックスで[スタイル(Styling)]、[場所(Location)]、および[動作(Behavior)]タブを移動して、設定に必要な変更を加えます。
    edit-container-settings.png 
  5. ガイドコンテナを編集するには、設定を編集するステップでガイドコンテナ(ガイドの端)にカーソルを合わせます。ガイドコンテナの端をクリックすると、[スタイル]、[場所]、[動作]のオプションが表示され、さらにカスタマイズできます。

     

    hover-guide-container.gif


    edit-container-settings.png
  6. 新しいビルディングブロックをガイドに追加する必要がある場合は、項目の間にカーソルを置くと青い線が表示されるので、希望のビルディングブロックを追加してください。

    hover-edit-add-bb.gif

    ヒント:ガイドを編集する際には、定期的に変更内容を保存してください。これは、作成途中の内容を保存するのに役立ちます。

  7. 終了するには、 [完了(Done)]を選択します。
  8. 終了したら、[保存(Save)]選択して変更内容を保存し、[終了(Exit)]選択してデザイナーを終了します。

ガイドの管理

ガイドの作成が完了したら、次の操作を実行できます。

  • ガイドのテスト
  • ガイドのアクティベーション
  • セグメント化と即時の公開
  • ガイドの公開時期の設定

ガイドのテスト

ガイドをテストするには、以下を実行してください。

  1. 自分自身に対してガイドをセグメントします。
  2. [ガイドの詳細(Guide Details)]ページの[セグメント(Segment)]タイルで、[編集(Edit)]アイコンを選択します。
  3. ドロップダウンを選択して、[カスタムセグメント(Custom Segment)]を選択し、[訪問者ID(Visitor ID)]が自分自身と同じになるようにセグメントルールを追加します。

    たとえば、訪問者IDがメールアドレスの場合、ルールは次のようになります。
    segment-example.png
  4. 完了したら、[カスタムセグメントを保存(Save Custom Segment)]を選択し、[セグメント]タイル内の[保存]を選択します。
  5. ガイドの詳細を確認し、ガイドのステータスを[ステージング(Staging)]に更新して(ステージング設定がある場合)、ステージング環境でガイドをプレビューします。
  6. ステージング設定がない場合は、ステータスを[公開(Public)]に更新します。このガイドは自分自身にセグメントされているので、自分のみに表示されます。

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

ガイド作成時にアクティベーション方法を設定していない場合は、すぐに設定できます。

  1. [ガイド(Guide)]ページの[アクティベーション(Activation)]タイルで[自分のアプリで管理する(Manage in My App)]を選択すると、ガイドを表示するアプリに戻り、[アクティベーション設定(Activation Settings)]ボックスが表示されます。device_type.png
  2. ガイドをアクティベーションするには、アクティベーションオプションを選択します。
    • [自動(Automatic)]:ガイドは、閉じるまたは次に進むまで自動的に1回表示されます。
    • バッジ(Badge):訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。詳細については、ガイドのアクティベーションオプションを参照してください
    • ターゲット要素(Target Element):訪問者が対象となる要素をクリックした後に表示されるガイドです。詳細については、ガイドのアクティベーションオプションを参照してください
    • ガイドの表示場所(Show my guide on):起動時にガイドを表示するデバイスを選択します。

ガイドのセグメントと公開

作成したガイドに問題がなければ、ガイドの詳細ページに戻って、セグメントを正しいオーディエンスに再調整します。

ガイドを公開するには、2つのオプションから選ぶことができます。

  • ガイドのステータスを[公開]に更新すると、ガイドを今すぐ公開できます。
  • ガイドがいつ公開されるか(必要であれば、いつ公開を停止するか)をスケジュールします。

ガイドのステータスを設定する

詳しくは、ガイドのステータスを変更するをご覧ください。

  • ドラフト(Draft) - ガイドはどの環境にも表示されませんが、編集は可能です。
  • レビュー待ち(Pending Review)- ガイドの作成者と投稿者は、このステータスで、ガイドがレビュー待ちであることを示すことができます。公開担当者やレビュー担当者は、このステータスでガイドリストをフィルタリングし、レビュー待ちのガイドを確認できます。ガイドのステータスを「レビュー待ち」に設定しても、ガイドはステージングにプッシュされません。
  • ステージング(Staged) - このガイドは、テストと検証の準備が整った、指定したステージングサーバーにのみ表示されます。ステージングサーバーは、お客様のサブスクリプション管理者がこちらから管理できます。ステージングの詳細については、こちらをご覧ください
  • 公開(Public) - ガイドのセグメントで対象とするすべての訪問者に公開され、Pendoがインストールされているすべての環境で、指定した「場所」に表示されます。公開ガイドは、指定したステージングサーバーに継続して表示されます。
  • 無効(Disabled)- ガイドを非公開にします。これを使用して、公開するガイドをフィルターできます。
  • 削除(Delete) - ガイドとそのすべてのデータが完全に削除されます。

ガイドのスケジュール

  1. [ガイドの詳細]ページの[スケジューリング(Scheduling)]タイルで、[編集]を選択します。
  2. [開始日時(Start Date/Time)]ボタンを切り替えて、必要な設定を定義します。
  3. [終了日時(Expiration Date/Time)]ボタンを切り替えて、必要な設定を定義します。

:終了日時を設定しない場合は、ガイドが長期間表示されないように手動で削除する必要があります。