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

フィーチャーにタグ付けして、アプリケーションの使用パターンを明らかにし、ガイドをターゲティングします。フィーチャーは、左側のナビゲーションの［プロダクト（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でフィーチャーにタグ付けするには、［プロダクト（Product）］>［フィーチャー（Features）］に移動し、右上の ［アプリ内フィーチャーの管理（Manage Features In-App）］を選択します。

1. アプリケーションの対象ページのURLを入力します。

2. ［デザイナーを起動（Launch Designer）］を選択します。これにより、ビジュアルデザインスタジオ（Visual Design Studio）がアプリケーションのページに読み込まれます。

3. ビジュアルデザインスタジオの［ページ］タブで、［フィーチャーのタグ付け（Tag Feature）］を選択します。

4. ページ内のタグ付けしたい部分にカーソルを合わせて選択します。ドロップダウンメニューにタグ付けするには、ドロップダウンメニューを開きながらALT（Windowsの場合）またはOption（Macの場合）を選択し、ドロップダウンメニューを展開します。

5. ビジュアルデザインスタジオの上部にある［新規フィーチャーを作成（Create New Feature）］を選択します。

6. 企業の命名規則に沿ったわかりやすい名前を入力して、何を指しているのか他の人にも分かるようにします。

7. ドロップダウンメニューを使用して、プロダクトエリアをフィーチャーに割り当てます。

8. ［フィーチャー要素のマッチング（Feature Element Matching）］で、ルールを作成するための方法として、［一致候補（Suggested Match）］、［ルールビルダー（Rule Builder）］、［カスタムCSS（Custom CSS）］のいずれかを選択します。ガイダンスについては、この記事のフィーチャー要素のマッチングを参照してください。

9. ［ページの場所（Page Location）］で、アプリケーション全体（サイト全体（Sitewide））または特定のページ（当該ページのみ（Only on this page））のどちらでフィーチャーを追跡するかを選択します。

10. ［保存（Save）］を選択し、フィーチャーを「フィーチャー」リストに追加します。

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

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

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

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

 

動的CSSセレクターの処理

一般的には、タグ付けしようとしているUI要素に対して、最も具体的なCSSセレクターを探す必要があります。使用しようとしているHTML属性が動的である場合は、CSSセレクターの一貫性が保たれている部分のみを取得するために、特異性と柔軟性のバランスを見つける必要があります。

多くのウェブサイトは、動的に生成されたCSSセレクターに依存しています。CSSセレクターは、フィーチャーのタグ付けやガイドのターゲティングに影響するため、タグ付けするCSSセレクターが、時間の経過とともに変化する可能性のない安定した識別子であることを確認することが重要です。

動的なCSSセレクターは通常、ユーザーがマウスを合わせると色が変わるテキスト見出しや、アプリケーションの新しいバージョンなど、アプリケーションでのアクティビティによって変更される可能性のあるクラス名または要素IDです。

CSSセレクター内の一見ランダムな文字列を探すことで、動的CSSセレクターを識別することができます。動的CSSセレクターを見つけたら、次のことができます。

• Pendoでのフィーチャーのタグ付けは、start-with (^)、ends-with ($)、contains (*) ルールにより、CSSセレクターの動的な部分を無視するように設定されています。これにより、Pendoは一貫性のある属性の部分のみにマッチングするようになります。詳しくは、高度なフィーチャーのタグ付けをご覧ください。
• アプリケーションの要素に静的なクラスとIDを追加して、フィーチャーのタグ付けとガイドのターゲティングに対してコードをより安定させます。
• カスタムのHTML要素を使用して、Pendoで使用する静的セレクターを提供します。

Pendo Academyにアクセスできる方は、動的なCSSセレクターによるフィーチャーのタグ付けの動画で、動的に変化する要素への対応方法をご覧ください。

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

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

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

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

タグ付けされたフィーチャーのリストを表示するには、左側のナビゲーションから［Pendo］ > ［フィーチャー］に移動します。フィーチャーリストには、タグ付けされたフィーチャーの概要が表形式で表示されます。このリストには、タグ付けされたすべてのフィーチャーと、選択した列に応じて、これらのフィーチャーに関する次の情報が表示されます。

• 名前（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. 右上の［アプリ内フィーチャーの管理（Manage Features In-App）］を選択します。
3. ［デザイナーを起動（Launch Designer）］を選択します。これにより、ビジュアルデザインスタジオが開きます。
4. ヒートマップを切り替えます。
5. 興味のあるセグメントを設定します。

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

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

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