ガイドの作成

注:この記事では、2019年2月18日にリリースされた新しいビジュアルデザインスタジオ(Visual Design Studio)ガイドの操作性を取り上げます。この日付以前からのお客様で、クラシックデザイナーを使用したいとお考えの場合は、前のバージョンを参照してください

 

概要

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

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

要件

Visual Design Studioを使用するには、Pendoユーザーは以下の2つの権限のいずれかが必要です。

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

作成

ビジュアルデザインスタジオでガイドの作成を開始するには、左側のナビゲーションメニューから [ガイド] を選択し、右上の [新しいガイドの作成(Create New Guide)] または[ビジュアルデザインスタジオ] を選択します。

create-guide-buttons.png

 

注:Pendo管理者にはこの領域に、現在ベータ版の[デフォルトテーマの管理(Manage Default Theme)] という追加オプションが表示されます。

 

  1. Pendoアカウントに複数のウェブアプリケーションを設定している場合、ガイドを表示したいアプリを選択します。
  2. ガイドのカテゴリーを選択します。すると、デフォルトのPendoレイアウトまたは保存済みレイアウトのいずれかから、選択したカテゴリーの推奨レイアウトが表示されます
  3. オプションからレイアウトを選択します。この例では、Pendoが提供する「新機能のお知らせ(New Feature Announcement)」というレイアウトを選択します。
 

 

choose-a-layout.png

 

注:Pendoの管理者が必要に応じて追加/削除できるため、利用可能なレイアウトはこれらのスクリーンショットとは異なる場合があります。このオプションが利用できない場合は、ご希望のものを選択してください。

 

レイアウトを選択すると、ガイドの名前を変更するよう求められます。ご希望のガイド名を入力してください。

 

ヒント:すぐに複数のガイドを持つことになるので、検索しやすいように命名規則を設け、識別しやすいように色分けされたグループを用意することをお勧めします。詳細については、命名のベストプラクティスに関するヘルプ記事をご覧ください

 

[アプリで管理する(Manage in App)](1または2)をクリックしてビジュアルデザインスタジオを開き、ガイドを編集して、ガイドを表示するページのURLを追加します。

manage-in-app.png

 

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

 

デザイナーが読み込まれたら、必ず「ステップトレイ」(1)を開いて、すべてのカスタマイズオプションとガイドステップを確認してください。要素をターゲットにしたいのに「アクションバー」(2)がそれを覆っている場合は、画面右上の両矢印ボタンをクリックして、画面下に移動させてください。

open-step-tray.png

[コンテナの編集(Edit Container)]ボックス内で、ガイドの初期編集を行うことができます。[適用(Apply)]をクリックすると、ガイドのプレビュー内のプレースホルダー項目にカーソルを合わせ、クリックして編集できるようになります。新しいビルディングブロックをガイドに追加する必要がある場合は、項目の間にカーソルを置くと青い線が表示されるので、希望のビルディングブロックを追加してください。

hover-edit-add-bb.gif

 

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

 

ガイドにステップを追加する場合は、ステップトレイの[+ステップの追加(+ Add Step)]オプションをクリックすると、最初からやり直すことなく新しいステップを追加できます。

add-a-step.png

ガイド(1つまたはすべてのガイドステップ)に問題がなければ、ステップ内のガイドコンテナ(ガイドの端)にカーソルを合わせて、その設定を編集することができます。

hover-guide-container.gif

ガイドコンテナの端をクリックすると、[スタイル(Styling)]、[場所(Location)]、[動作(Behavior)]のオプションが表示され、さらにカスタマイズできます。

edit-container-settings.png

完了したら、[適用]をクリックします。

最後に、アクションバーで、希望するガイドのアクティベーション方法を使用していることを確認してください。

choose-activation-method.png

3つのオプションがあります。

  1. 自動(Automatic)(1):ガイドは、終了または続行されるまで自動的に1回表示されます。
  2. バッジ(Badge)(2):訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。
  3. ターゲット要素(Target Element)(3):訪問者が対象となる要素をクリックした後に表示されるガイドです。
activation-options.png

この中の1つだけを選択することも、「自動+バッジ」または「自動+ターゲット要素」の2つを組み合わせて適用することもできます。「バッジ+ターゲット要素」は選択できません。詳細については、ガイドのアクティベーションオプションの記事をご覧ください。

作業が終わったら、左上の[保存(Save)]ボタンで変更内容を保存し、[終了(Exit)]をクリックしてデザイナーを終了します。

テスト

ガイドをテストするには、自分自身に対してガイドをセグメントします。

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

たとえば、訪問者IDがメールアドレスの場合、ルールは次のようになります。

segment-example.png

完了したら、[カスタムセグメントを保存(Save Custom Segment)]を選択し、[セグメント]タイル内の[保存]をクリックします。ガイドの詳細を確認し、ガイドのステータスを[ステージング(Staging)]に更新して(ステージング設定がある場合)、ステージング環境でガイドをプレビューします。ステージング設定がない場合は、ステータスを[公開(Public)]に更新します。このガイドは自分自身にセグメントされているので、見ることができるのは自分のみです。

公開

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

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

  • ガイドのステータスを[公開]に更新すると、ガイドを今すぐ公開できます。

publish.png

  • ガイドがいつ公開されるか(必要であれば、いつ公開を停止するか)をスケジュールします。

ガイドのステータス

公開

ガイドのセグメントで対象とするすべての訪問者に公開され、Pendoがインストールされているすべての環境で、指定した「場所」に表示されます。公開ガイドは、指定したステージングサーバーに継続して表示されます。

ステージング

このガイドは、指定したステージングサーバーにのみ表示されます。ステージングサーバーは、お客様のサブスクリプション管理者がこちらから管理できます。ステージングの詳細については、こちらをご覧ください。

ドラフトおよび無効

ガイドはどの環境にも表示されませんが、編集は可能です。ドラフトと無効に機能的な違いはありませんが、これらのステータスはガイドの整理に役立ちます。

削除

ガイドとそのすべてのデータが完全に削除されます。

 

関連記事

ビジュアルデザインスタジオでのガイドの作成に関する詳細は、こちらをご覧ください。