ガイドの作成

最終更新日:

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

権限

ビジュアルデザインスタジオを使用してガイドを作成するには、次のいずれかの権限セットが必要です。

  • Pendoの管理者レベルの権限:これは、ユーザーにガイド関連のすべてのアクティビティを実行する権限を付与する、サブスクリプションレベルの権限セットです。
  • Pendoのデフォルトのアプリレベルの役割:ガイドに関連してユーザーに付与したいアクセスレベルに応じて、次のすべてまたは一部を選択します。
    • ガイド作成者(Guide Creator):この役割には、最初からまたはレイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイド公開者(Guide Publisher):この役割には、ガイドの公開とスケジュール設定の権限、およびステージング中のガイド、ドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイドコンテンツ編集者(Guide Content Editor):この役割には、レイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
  • Pendoのカスタムでのアプリレベルの役割:デフォルトのアプリレベルの役割ではなく、役割をカスタマイズして作成し、以下のガイド権限を付与することもできます。
    • ゼロからのガイドの作成と編集
    • レイアウトからガイドを作成および編集する
    • ガイドを公開する

また、カスタムの役割に以下の権限を含めることもできます。なお、上記3つの権限があれば、ガイドは作成できます。

  • 公開ガイドの編集を許可する(公開ガイドの削除と編集)
  • ドラフト、ステージング中、無効化されたガイドを削除する

ガイドの権限と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)]ボックスでガイドの初期編集を行うことができます。[コンテナを編集]ボックスを使用してガイドのスタイルを設定する方法について詳しくは、ビジュアルデザインスタジオ(Visual Design Studio)を使用するを参照してください。

  1. デザイナーを開いた状態で[ステップを表示(View Steps)]を選択すると、[ステップトレイ(Step Tray)]が表示されます。これには、カスタマイズのオプションとガイドのステップがすべて表示されます。
    create_guide_viewsteps.png


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

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


  6. 新しいビルディングブロックをガイドに追加する必要がある場合は、アイテム間にカーソルを合わせると青い線が表示され、ビルディングブロックを追加できるようになります。ビルディングブロックは、ガイドにコンテンツを追加し、テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画を追加し、フォーマットを設定するために使用します。ビルディングブロックの詳細については、 ビルディングブロックを使用してガイドコンテンツを追加するを参照してください。

    ヒント:MacではOptionキーを長押し、WindowsではAltキーを長押しすると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。

    hover-edit-add-bb.gif

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

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

ガイドのプレビュー

ガイドのプレビューを使用すると、ガイドを公開せずに、またはセグメントの制限を受けずに、ガイドを起動できます。プレビューのUIを見ると、アクティベーションの方法、ターゲット要素、ターゲットページがわかり、そのガイドの表示基準を満たしているかどうかもインジケーターで表示されます。また、そのすべての機能をテストでき、再起動も簡単に実施できます。

上部のナビゲーションバーで [プレビュー(Preview)]を選択します。

preview.png

ガイドの管理

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

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

ガイドのテスト

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

  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つのオプションから選ぶことができます。

  • ガイドのステータスを[公開(Public)]に変更すると、ガイドを今すぐ公開できます。
  • ガイドをいつ公開するか(または、いつ公開を停止するか)をスケジュール設定することもできます。

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

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

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

ガイドのスケジュール

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

:終了日時を設定しない場合は、ガイドが長期間表示されないように手動で削除する必要があります。開始日が設定されたガイドを ステージングステータスのままにしておくと、開始日時になってもガイドは公開になりません。これらの変更は、ステージング環境のみに反映されます。ガイドを[公開(Public)]に設定してから、開始日時を設定する必要があります。そうすると、ステータスが[スケジュール済み(Scheduled)]に変わります。

この記事は役に立ちましたか?
6人中3人がこの記事が役に立ったと言っています