フィーチャーのタグ付けと表示

フィーチャーにタグ付けして、アプリケーションの使用パターンを明らかにし、ガイドをターゲティングします。フィーチャーは、左側のナビゲーションの［プロダクト（Product）］>［フィーチャー（Features）］で管理します。

フィーチャーのタグ付けルール

Pendoでは、ルールに基づいてフィーチャーのタグを作成します（「フィーチャーのタグ付け」）。ルールでは、Pendoがフィーチャーにタグを付けるために解釈するHTMLとCSSを定義します。

HTMLとCSSは、ウェブサイトの基本的な構成要素の2つです。HTMLは、ウェブサイトのコンテンツと構造を決定するために使用するマークアップ言語です。CSSは、HTML要素にスタイルを適用するために使用するマークアップ言語です。CSS構文は、Pendoでのフィーチャーのタグ付けとガイドの配置に使用します。

HTMLは要素タグで構成されています。このタグはウェブブラウザがサイトを表示するために必要なコンテキストを構成します。<button>、<h1>、<p>などがHTML要素の一例です。一般的に、HTML要素にはclassとid属性を含めることもできます。これらの属性のコンテンツであるCSSセレクターは、ウェブサイトの特定の要素を識別し、スタイルを設定します。Pendoはこれらのセレクターによって、フィーチャーのクリックを識別し、ガイドをターゲティングします。

HTMLの要素も属性も、アプリケーションの特定の部分にスタイルを与えるために、CSSで頻繁に使用されます。以下の例では、HTML要素は<div>、HTML属性はclass、属性のコンテンツ（CSSセレクター）はd-sm-flex align-items-centerです。

<div class="d-sm-flex align-items-center">

フィーチャーのタグ付け

ビジュアルデザインスタジオ（Visual Design Studio）を使用して、フィーチャーのタグ付けを行います。ビジュアルデザインスタジオは、ガイドのスタイル設定、ページやフィーチャーのタグ付けを行うためのPendoのインターフェイスです。

フィーチャーにタグ付けするには、まずタグ付けモードを開始します。このモードでは、タグ付け用に選択している要素が、アプリケーション内でマウスに追随する赤い点線の境界ボックスで表示されます。その後、ビジュアルデザインスタジオのフィーチャー要素のマッチングオプションを使用して、この選択範囲を調整できます。

Pendoでフィーチャーにタグ付けするには、［プロダクト］>［フィーチャー］に移動し、右上の ［フィーチャーのタグ付け（Tag Features）］を選択します。

1. アプリケーションの対象ページのURLを入力します。
2. ［並べてタグ付けする（Tag side-by-side）］または［オーバーレイでタグ付けする（Tag in an overlay）］のいずれかのタグ付けモードを選択します。詳細については、ビジュアルデザインスタジオによるタグ付けを参照してください。
3. ［デザイナーを起動（Launch Designer）］を選択し、ビジュアルデザインスタジオを読み込みます。
4. ビジュアルデザインスタジオの［フィーチャー］タブで［フィーチャーのタグ付け］を選択します。
5. ページ内のタグ付けしたい部分にカーソルを合わせて選択します。ドロップダウンメニューの項目にタグ付けするには、ドロップダウンメニューを開きながらALT（Windowsの場合）またはOption（Macの場合）を選択し、ドロップダウンメニューを展開します。
6. ビジュアルデザインスタジオの上部にある［新規フィーチャーを作成（Create New Feature）］を選択します。
   
   
   
   
7. 会社の命名規則に沿ったわかりやすい名前を入力して、何を指しているのか他の人にも分かるようにします。
8. ドロップダウンメニューを使用して、プロダクトエリアをフィーチャーに割り当てます。
9. ［フィーチャー要素のマッチング（Feature Element Matching）］で、ルールを作成するための方法として、一致候補（Suggested Match）、ルールビルダー（Rule Builder）、またはカスタムCSS（Custom CSS）のいずれかを選択します。ガイダンスについては、この記事のフィーチャー要素のマッチングを参照してください。
10. ［ターゲットページ（Page Location）］で、フィーチャーの追跡方法として、アプリケーション全体（サイト全体（Sitewide））または特定のページ（当該ページのみ（Only on this page））のいずれかを選択します。
    
    
    
    
11. ［保存（Save）］を選択し、フィーチャーを「フィーチャー」リストに追加します。

ヒント：ナビゲーションボタンには［サイト全体（Sitewide）］を選択します。考えられるすべてのページのバリエーションにナビゲーション要素をタグ付けする価値はないからです。

フィーチャー要素のマッチング

ビジュアルデザインスタジオでフィーチャーにタグを付ける場合、［フィーチャー要素のマッチング（Feature Element Matching）］でのルールの作成オプションは以下のとおりです。

• 一致候補：これはPendoが作成した自動ルールで、ページ上で選択した要素に基づいて作成されます。上下の矢印を選択することで、より広い範囲や小さい範囲をフィーチャールールに含めるように調整できます。このルールが理想的な内容とは異なっている場合や、ページ内容の特性に合わない場合、または静的でない場合は、次の追加オプションを利用してください。
• ルールビルダー：タグ付けのために選択した領域で利用可能なHTML要素と属性が表示されます。これらの項目を使用して、アプリケーションの選択した領域で機能する具体的なフィーチャールールを作成できます。
• カスタムCSS：Google Chromeの［検証（Inspect）］を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムのフィーチャールールを追加することができます。

CSSセレクタの詳細については、 フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。」

ヒント：一致候補を最初に選択し、その後にルールビルダーやカスタムCSSを選択して、精緻化されたルールを設定することができます。また、ルールビルダーを最初に選択し、Pendoがタグ付けに使用するCSS構文の定義を確認したうえで、、カスタムCSSに切り替えてルールの編集に対しコントロールを強化することもできます。

一致候補

ページ上の要素を選択すると、Pendoが適切な要素にタグを付けるのに役立つルールとデータを表示します。

右上の矢印で、ページのHTMLドキュメントオブジェクトモデル（DOM）の選択範囲を上下に移動して調整できます。DOMツリーは、ページ上のすべての要素、属性、テキストを階層内のオブジェクトとして定義するために、ブラウザによって作成されるページのHTMLの階層表現です。

上矢印を使うと、より広いクリック可能領域（相対的な親要素）を選択でき、下矢印を使うと、より狭いクリック可能領域（相対的な子要素）を選択できます。たとえば、ボタン内のテキストを選択し、そのテキストが含まれるコンテナーを含めることができます。上矢印を使ってDOMツリーを上方向に移動し、DOM内で次に大きな項目をタグ付けに選択できます。

ルールビルダー

ルールビルダーを使用すると、ビジュアルデザインスタジオから移動することなく、アプリケーションのコードに基づいてフィーチャールールを作成できます。ルールビルダーでは、ルールオプションを表示、追加、削除でき、ルールの自動フォーマットにより正確性を確保できます。

ルールビルダーでルールを作成すると、マッチした数がビジュアルデザインスタジオに表示され、タグ付けされた領域がハイライト表示されます。また、ビジュアルデザインスタジオでは、カスタムCSSオプションで作成した場合のルールも表示されます。これは、ルールをしているときに、［選択（Selection）］のすぐ下に表示されます。

ルールビルダーの項目の色は、以下を表しています。

色（Color）	HTMLの要素と属性	例
紫	HTMLクラス。通常は優れたセレクターですが、ページ上の複数の要素に同じクラスがある場合があります。	class=“align-center”
緑	HTML要素のタイプ	div、p、button、a
黄色	HTML属性	href、src、alt
ライトブルー	HTML ID。通常、ページ上で最も一意性が高いセレクターです。	id=“myHeader”
ダークブルー	HTMLテキストにステートメントが含まれています。これは、要素に含まれるテキストに基づいて要素にタグを付けることができる、Pendo固有のオプションです。

 

カスタムCSS

フィーチャー要素のマッチングのカスタムCSSオプションを使用してルールを作成するには、次の手順を実行します。

1. Chromeのでは、タグ付けしようとしている要素を右クリックし、［検証（Inspect）］を選択します。
2. ［要素（Elements）］タブで、ドキュメントオブジェクトモデル（DOM）ツリーを検証します。これにはページデータが含まれます。
3. 検証している要素について、人間が判読できる特定のクラスがないか探します。
4. ［カスタムCSS（Custom CSS）］のテキストボックスに、classの代わりに.を記述し、スペースではなくピリオドを使用して、コード内の文字列をそのままコピーします。たとえば、class="sidebar-item js-sidebar-type-dは、テキストボックスには.sidebar-item.js-sidebar-type-dと記述されます。

フィーチャーのタグ付け用のCSSの詳細については、 フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。

適切なフィーチャールール

このセクションでは、フィーチャールールを作成するためのベストプラクティスをまとめています。CSSセレクターの詳細については、フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。フィーチャーのタグ付けのための適切なルール作りについては、高度なフィーチャーのタグ付けを参照してください。

ガイダンス	例
タグは、具体的で静的なCSS ID（#char）で構成する必要があります。	#saveMessageButton
タグは、オブジェクトを一意に識別するCSSクラスに含める必要があります。	.emailSettingsSubmit
タグには、要素を一意に識別する文字列を含むテキストを含める必要があります。	A:contains("Log Out")
タグは具体的すぎてはいけません。また、セッションごとまたはユーザーごとに変更してはいけません。	使用不可： A:contains(You have 16 new messages) 使用： A:contains(message)
タグには、CSSセレクターに一見ランダムな文字列を含めることで示されるような、動的に変化する要素を含めないでください。	使用不可： <div class=“sc-element-6gY8Tkk” 開始点のみを取得する場合は^記号を使用します。 <div class^=“sc-element”>

タグ付けされたフィーチャーを表示する

Pendoでタグ付けされたフィーチャーを表示するには、次の2つの方法があります。

• Pendo UIで［プロダクト（Product）］>［フィーチャー（Features）］に移動します。
• ビジュアルデザインスタジオのヒートマップに、別のフィーチャーへのタグ付けが表示されます。

Pendo UIでのフィーチャーリスト

タグ付けされたフィーチャーのリストを表示するには、左側のナビゲーションから［Pendo］ > ［フィーチャー］に移動します。フィーチャーリストの上にはフィルターがあり、テーブルビューのリストを変更することができます。

フィルター（Filter）	説明
セグメント	デフォルトは［全員（Everyone）］です。ドロップダウンを使用してセグメントを選択するか、メニューの下部にある［+ 新規セグメントを作成（+ Create New Segment）］を選択します。
日付範囲	ドロップダウンを使用して事前定義された値から選択するか、特定の期間を指定するカスタム範囲を選択します。
アカウント	ドロップダウンを使用して、アカウントに関係なくすべてのフィーチャーを表示するか、アカウントごとにフィーチャーを表示するかを選択します。
アプリ	ドロップダウンを使用して、アプリケーションに関係なくすべてのフィーチャーを表示するか、アプリケーションごとにフィーチャーを表示するかを選択します。
スターアイコン	4つのメインフィルターの隣にあるスターアイコンを使うと、お気に入りに登録したフィーチャーだけを表示できます。
プロダクトエリア	4つのメインフィルターの下にある選択リストを使うと、アプリケーションの特定のプロダクトエリアに属するフィーチャーのみを表示できます。

フィーチャーリストには、タグ付けされたフィーチャーの概要が表形式で表示されます。このリストには、タグ付けされたすべてのフィーチャーと、テーブルに対して選択した列に応じて、これらのフィーチャーに関する次の情報が表示されます。

• 名前（Name）：フィーチャー名。フィーチャー詳細で、フィーチャー名を選択すると編集できます。
• ルール（Rules）： フィーチャータグのルール。
• ページ（Page）：フィーチャーに割り当てられたページタグ、もしくはフィーチャーがサイト全体にわたる場合は「すべてのページ」。
• 作成日時（Created Time）：フィーチャーが最初にタグ付けされた日付と時間。
• 作成者（Created By）：フィーチャーに最初にタグ付けしたPendoユーザー。
• アプリ（App）：フィーチャーが割り当てられているアプリケーション。
• プロダクトエリア（Product Area）：フィーチャーが割り当てられているプロダクトエリア。何も割り当てられていない場合は「プロダクトエリアなし」と表示されます。
• 最終更新日時（Last Updated Time）：フィーチャールールの最終更新日時。フィーチャールールを変更すると、最終更新日時が修正されます。
• 最終更新者（Last Updated By）：フィーチャーを最後に更新したPendoユーザー。
• 訪問者数（Number of Visitors）。ページ上部で指定したセグメントと日付範囲内でフィーチャーをクリックした一意の訪問者の数。
• アカウント数（Number of Accounts）：ページ上部で指定したセグメントと日付範囲内でフィーチャーをクリックした一意のアカウントの数。
• クリック数（Number of Clicks）。ページ上部で指定されたセグメントと日付範囲内の、すべての訪問者がフィーチャーをクリックした合計数。
• フィーチャーのクリック数の割合。ページの上部に指定されたセグメントと日付範囲内でフィーチャーをクリックした訪問者の割合。
• 1日のフィーチャークリック数の平均割合（%）。ページ上部で指定されたセグメントと日付範囲内で、フィーチャーをクリックした訪問者の1日あたりの平均割合。
• イベントプロパティの設定数（Number of Event Properties Setup）：フィーチャーに設定されているフィーチャーでのクリックイベントプロパティの数（最大5個）。詳細については、 フィーチャーでのクリックイベントプロパティについてを参照してください。
• コアイベント。機能がコアイベントとして選択されている場合、ここに「Core」というラベルが表示されます。コアイベントの詳細については、コアイベントのセットアップを参照してください。

列をカスタマイズするには、リストの右上にある［列の管理（Manage Columns）］アイコンを選択します。開いたウィンドウで、表の列の追加、削除、並び替えができます。

ヒント：テーブルビューにページ列を追加すると、タグ付けしたフィーチャーがページ固有のものであるかどうかを、タグ付けした各フィーチャーの詳細を開かなくても確認することができます。

ビジュアルデザインスタジオのヒートマップ

ビジュアルデザインスタジオのヒートマップは、別のフィーチャーにタグを付けるときに、既にタグ付けされているフィーチャーの色分けされたビューを生成します。

ヒートマップを使用して、過去30日間のフィーチャーの使用状況を表示します。フィーチャーが「ホット」な（赤に近い）ほど、多く使用されていることを示します。ヒートマップを表示するには、

1. Pendoで、［プロダクト］>［フィーチャー］に移動します。
2. 右上の［フィーチャーのタグ付け］を選択します。
3. ［デザイナーを起動（Launch Designer）］を選択します。これにより、ビジュアルデザインスタジオが開きます。
4. ヒートマップを切り替えます。
5. 興味のあるセグメントを設定します。

ヒートマップをオンにした状態で、ビジュアルデザインスタジオのリストから個々のフィーチャーを開いて、左の青から右の赤まで視覚的な尺度に沿ってマッピングを表示することもできます。このビューでは、合計クリック数、ユニーク訪問者クリック数、アカウントなどの追加の指標が表示されます。

フィーチャーをお気に入りに追加する

フィーチャーをお気に入りに追加し、フィルターセクションのスターアイコンを使用して、お気に入りフィーチャーのリストを表示できます。お気に入りフィーチャーのリストは自分にのみ表示され、自分だけが編集できます。

フィーチャーをお気に入りに追加するには、［フィーチャー］のテーブルビューで、フィーチャーの横にあるスターアイコンを選択します。フィーチャーの詳細ページ内からフィーチャーにスターを付けることもできます。テーブルビューからフィーチャーを開き、詳細ページ上部のゴミ箱アイコンの隣にあるスターアイコンを選択します。

フィーチャーの詳細を表示する

［フィーチャー］リストからフィーチャーを選択すると、使用状況統計など、そのフィーチャーに関する詳細が表示されます。［詳細（Details）］セクションのヘッダーを選択すると、このページの［詳細］セクションを最小化したり展開したりできます。このセクションでは、フィーチャーの名前、プロダクトエリア、アプリ、ページの場所、CSSターゲティングルールを編集できます。

タグ付けされたフィーチャーの編集

Pendoで既存のフィーチャーを編集するには、次の2つの方法があります。

• フィーチャーの詳細から。これは［プロダクト］>［フィーチャー］のリストからフィーチャーを開くと表示されます。
• ビジュアルデザインスタジオ（Visual Design Studio）の起動時に、リストからフィーチャーを選択することで、フィーチャーが表示されます。

フィーチャーの詳細から編集

1. ［プロダクト］>［フィーチャー］に移動します。
2. 編集するフィーチャーを見つけて開きます。
3. 必要に応じて、名前、プロダクトエリア、アプリケーション、ルールを変更します。

ビジュアルデザインスタジオ

1. ［プロダクト（Product）］>［フィーチャー（Features）］>［フィーチャーのタグ付け（Tag Features）］に移動します。
2. タグ付けしたいUI要素があるアプリケーションのページのURLを入力します。
3. ［並べてタグ付けする（Tag side-by-side）］または［オーバーレイでタグ付けする（Tag in an overlay）］のいずれかのタグ付けモードを選択します。詳細については、ビジュアルデザインスタジオによるタグ付けを参照してください。
4. ［デザイナーを起動（Launch Designer）］を選択し、ビジュアルデザインスタジオを読み込みます。
5. ［フィーチャー］タブで、編集するフィーチャーを選択します。
6. 右下の［フィーチャーを編集（Edit Feature）］を選択します。
7. 以下の設定は任意です。
   • フィーチャー名の編集
   • フィーチャーが割り当てられているプロダクトエリアの変更
   • フィーチャーに関連付けられているUI要素のターゲット再設定
   • ［ターゲットページ］の変更
   • イベントプロパティの追加
   • ［選択時に動的要素をフィルタリング（Filter Dynamic Elements on Selection）］のオン/オフ
8. 右下の［変更を保存（Save Changes）］を選択します。

タグ付けされたフィーチャーの削除

タグ付けされたフィーチャーを削除するには、削除するフィーチャーの行にカーソルを合わせ、行の最後にあるゴミ箱アイコンを選択します。

フィーチャーのCSVファイルのダウンロード

ページもしくはフィーチャーの表データをカンマ区切り値（CSV）ファイルでダウンロードするには、［プロダクト］>［フィーチャー］に移動し、リストの右上隅にある［列の管理］アイコンの隣にある［ダウンロード（Download）］アイコンを選択します。これにより、フィーチャーのCSVファイルが自動的にダウンロードされます。