アプリケーション内での使用パターンを理解し、ガイドのターゲットを設定するために、フィーチャーにタグを付けます。Pendoの［フィーチャー］ページについての詳細は、「タグ付けされたフィーチャーの表示と管理（View and manage tagged Features）」を参照してください。
この記事では、フィーチャーにタグを付けるさまざまな方法について説明します（別の記事「AIタグ付け（AI tagging）」で説明されているAIタグ付けを除きます）。
タグ付けの基礎について詳しく知りたい方は、Pendo Academyで関連するビデオチュートリアルをご覧ください。
概要
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">
フィーチャーのタグ付け
ビジュアルデザインスタジオを使用してフィーチャーのタグ付けを行います。ビジュアルデザインスタジオは、ガイドのスタイル設定だけでなく、ページやフィーチャーのタグ付けを行うためのPendoのインターフェースです。以下の方法でフィーチャーにタグを付けることができます：
- ビジュアルデザインスタジオでのAIタグ付け。サブスクリプション設定でAIタグ付けを有効にしている場合、AIタグ付けがデフォルトで開きます。デザイナーで従来のモードに切り替えて、フィーチャーに手動でタグ付けできます。詳細はAIタグ付けをご覧ください。
- ビジュアルデザインスタジオでの従来のタグ付け。このセクションでは、従来のタグ付けを使用してフィーチャーにタグを付ける方法について説明します。
従来のタグ付けでは、アプリケーション内でマウスカーソルに沿って動く赤い点線の枠で、タグ付けする要素が示されます。その後、ビジュアルデザインスタジオの［フィーチャー要素のマッチング（Feature Element Matching）］オプションを使用して選択範囲を調整できます。フィーチャーとしてタグ付けするUI要素を選択すると、赤い点線が赤い実線に変わります。紫色の実線で囲まれたフィーチャーは、すでにタグ付けされています。
Pendoでフィーチャーにタグ付けするには、［プロダクト］>［フィーチャー］に移動し、右上にある［フィーチャーのタグ付け（Tag Features）］を選択します。
- アプリケーションの該当ページのURLを入力してください。
-
タグ付けモードを選択します：
- 横並びでタグ付け。別のブラウザウィンドウでタグ付けを行います。
- オーバーレイでタグ付け。アプリケーションの上に表示される移動可能なウィンドウ内でタグ付けを行います。
詳細については、ビジュアルデザインスタジオによるタグ付けを参照してください。
- ［デザイナーを起動（Launch Designer）］を選択します。これにより、ビジュアルデザインスタジオが読み込まれます。
- ビジュアルデザインスタジオの［フィーチャー］タブで［フィーチャーのタグ付け］を選択します。
- ページ内のタグ付けする部分にカーソルを合わせて選択します。ドロップダウンメニューの項目にタグ付けするには、ドロップダウンメニューを開きながらALT（Windowsの場合）またはOption（Macの場合）を選択し、ドロップダウンメニューを展開します。
- Pendoのフィーチャーに対する貴社の命名規則に従った、わかりやすいフィーチャー名を作成します。
- 説明（最大280文字）を追加し、アプリ内のどの要素を参照しているのかが他の人にもわかるようにします。
- ドロップダウンメニューを使用して、プロダクトエリアをフィーチャーに割り当てます。
- ［ページの場所（Page Location）］で、フィーチャーをアプリケーション全体（［サイト全体（Sitewide）］）でトラッキングするか、特定のページ（［このページのみ（Only on this page）］）でトラッキングするかを選択します。
- ［フィーチャー要素のマッチング（Feature element matching）］で、ルールを作成するための以下の方法のいずれかを選択します：［一致候補（Suggested Match）］、［ルールビルダー（Rule Builder）］、または［カスタムCSS（Custom CSS）］。詳細な手順については、この記事の「フィーチャー要素のマッチング（Feature element matching）」を参照してください。
- サブスクリプション管理者で、アプリケーションでセッションリプレイが有効になっている場合は、「リプレイプライバシー設定」のドロップダウンからプライバシールールを選択できます。Pendoはフィーチャーのタグルールをセレクターとして使用するため、プライバシールールはタグ付けしている同じ要素に適用されます。
- 要素のマスク解除。セッションリプレイは、やり取りを記録し、訪問者に見せるテキストを表示します。
- 要素をマスク。セッションリプレイはやり取りを記録しますが、テキストはアスタリスク（*）に置き換えられます。
- 要素をブロック。セッションリプレイはその要素をプレースホルダーブロックに置き換え、インタラクションを記録しません。
- 詳細については、セッションリプレイのプライバシーを参照してください。
- 訪問者がこのフィーチャーを操作したときに追加データを取得する必要がある場合は、［イベントプロパティ］ドロップダウンを開いてイベントプロパティを追加します。詳しくは、クリックイベントプロパティをご覧ください。
- 必要に応じて、［設定（Settings）］セクションを開き、ルール生成中の動的フィルタリングを管理します。Pendoでは、自動生成されているように見えたり、セッション間を通して安定しない可能性が高い属性値（例：主に数字や記号を含む値、不自然な文字の組み合わせ、母音のない値など）を「動的（dynamic）」と定義しています。詳細については、「カスタムHTML属性（Custom HTML attributes）」を参照してください。以下の設定は、不安定なルールを防ぐために連携して機能します。ターゲット要素がロードごとに変化する値に依存している場合は、これらの設定をオフにしてください：
- 動的カスタムHTML属性値をフィルタリング。サブスクリプション管理者がアプリケーション設定のカスタムHTML属性を収集で定義したカスタム属性の動的な値を除外します。
-
選択時に他の動的要素をフィルタリング。Pendoが収集する標準HTML属性（
idやclassなど）の動的な値を除外します。
- ［保存（Save）］を選択し、フィーチャーを「フィーチャー」リストに追加します。
ヒント：考えられるすべてのページバリエーションにナビゲーション要素をタグ付けしても価値は付加されないため、ナビゲーションボタンはサイト全体を選択します。
フィーチャー要素のマッチング
ビジュアルデザインスタジオでフィーチャーにタグを付ける場合、［フィーチャー要素のマッチング］でのルールの作成オプションは以下の通りです。
- 推奨マッチ。ページ上で選択した要素に基づいてPendoが作成する自動ルールです。上矢印と下矢印を使用して選択範囲を調整し、フィーチャールールに含める範囲を広げたり狭めたりできます。これでは必要な情報を収集できない、ページ上で一意に一致しない、または静的でない場合は、次の追加オプションを利用してください。
- ルールビルダー。タグ付けのために選択した領域で利用可能なHTML要素と属性が表示されます。これらの項目を使用して、アプリケーションの選択した領域で機能する具体的なフィーチャールールを作成できます。
- カスタムCSS（Custom CSS）：Google Chromeの［検証（Inspect）］を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムのフィーチャールールを追加することができます。
CSSセレクタの詳細については、 フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。」
ヒント：［推奨される一致（Suggested Match）］を出発点として使用し、［ルールビルダー（Rule Builder）］または［カスタムCSS（Custom CSS）］を選択して、ルールをさらに調整できます。また、Pendoがフィーチャーのタグ付けに使用するCSS構文を定義する際は、［ルールビルダー（Rule Builder）］を出発点として使用し、ルールをより細かく編集する場合は［カスタムCSS（Custom CSS）］に切り替えることもできます。
一致候補
ページ上の要素を選択すると、Pendoが適切な要素にタグを付けるのに役立つルールとデータを表示します。
右上の矢印を使用して、ページのHTMLドキュメントオブジェクトモデル（DOM）ツリーの選択肢を上下に移動して調整します。
上矢印を使うと、より広いクリック可能領域（相対的な親要素）を選択でき、下矢印を使うと、より狭いクリック可能領域（相対的な子要素）を選択できます。たとえば、ボタン内のテキストを選択し、そのテキストが含まれるコンテナーを含めることができます。上矢印を使ってDOMツリーを上方向に移動し、DOM内で次に大きな項目をタグ付けに選択できます。
ルールビルダー
ルールビルダーを使用すると、ビジュアルデザインスタジオから移動することなく、アプリケーションのコードに基づいてフィーチャールールを作成できます。ルールビルダーでは、ルールオプションを表示、追加、削除でき、ルールの自動フォーマットにより正確性を確保できます。
選択肢の下部にあるトグルを使用して、未使用のノードを表示します。ノードはDOMツリーの要素であり、ウェブページの構造、スタイル、コンテンツを階層で表します。灰色の各行は、選択した要素に基づくDOMツリー内のノード（レベル）を表します。
未使用のノードを表示させることは、ルールビルダーに現在表示されているノードが正確なフィーチャールールを作成するのに十分でない場合に役立ちます。
DOMツリーの上位にあるノードを選択すると、DOMツリーの下位にあるノードを選択するよりもクリック可能領域が大きくなります。
ルールビルダーでルールを作成すると、マッチした要素の数がビジュアルデザインスタジオに表示され、タグ付けされた領域が強調表示されます。ビジュアルデザインスタジオでは、［カスタムCSS（Custom CSS）］オプションで作成した場合のルールも表示されます。これは、ルールの作成中に［選択（Selection）］の下に表示されます。
ルールビルダーの項目の色は、以下を表しています。
| 色（Color） | HTMLの要素と属性 | 例 |
| 紫 | HTMLクラス。通常は優れたセレクターですが、ページ上の複数の要素に同じクラスがある場合があります。 |
|
| 緑 | HTML要素のタイプ |
div、p、button、a
|
| 黄色 | HTML属性 |
href、src、alt
|
| ピンク | HTML ID。通常、ページ上で最も一意性が高いセレクターです。 | id="myHeader" |
| ダークブルー | HTMLテキストの「contains」ステートメント。これはPendo固有のオプションで、要素内に含まれるテキストに基づいて要素をタグ付けできます。サブスクリプション設定の［Webアプリケーションでのテキストキャプチャを許可（Allow Text Capture in Web Applications）］がオンになっている場合にのみ使用できます。 | contains('Set up') |
ルールビルダーでフィーチャールールをさらに調整するには、ルールの横にある歯車アイコンを選択します。
歯車の有無や設定オプションは、属性の種類によって異なります。
-
#idでは、［デフォルト（Default）］、［次で始まる（Starts With）］、［次で終わる（Ends With）］、［次を含む（Contains）］のオプションを使用できます。 -
.classでは、［デフォルト（Default）］と［次を含む（Contains）］のオプションを使用できます。 - ［
attribute］では、［デフォルト］、［属性が存在（Attribute Exists）］、［次で始まる］、［次で終わる］、［次を含む］のオプションを使用できます。 - 要素のタイプを特定できない場合、または要素が値のない属性（
h2、div、inputなど）の場合は、デフォルト（Default）ルールが適用され、歯車はそれ以上の設定に利用することはできません。
各設定オプションは以下のように定義されています。
- Default。ルールビルダーに表示されるCSSセレクターで、編集することはできません。これは、最初にキャプチャされたセレクターの生の表現で、最も具体的な特定が可能となります。
- ［属性が存在（Attribute Exists）］。属性値（等号[=]の後に続くテキスト）を考慮せず、属性が一致する要素を特定します。このオプションは、属性値に関係なく、特定の属性が存在するかどうかに基づいて要素をターゲットにする場合に便利です。
- ［次で始まる（Starts With）］。入力したテキストで始まる要素の値を特定します。このオプションは、属性値に共通のプレフィックスを持つ要素を取得する場合に便利です。
- Ends With。入力したテキストで終わる要素値を特定します。このオプションは、属性値に共通のサフィックスを共有する要素をキャプチャしたい場合に便利です。
- ［次を含む（Contains）］。入力したテキストを含む要素の値を特定します。このオプションは、属性値に共通の部分文字列を持つ要素を取得する場合に便利です。
上記の設定オプションのいずれかを選択すると、ルールが修飾子付きの属性に変更され、必要に応じてテキストを選択し、ルールの具体性を調整できるようになります。
たとえば、ユーザーがオンラインショッピングカートに商品を追加した後に開くモーダルをアプリに含めたいとします。「カートに追加」ボタンにタグを付ける際に、id="product-id-1245628-add-to-cart"としてボタンに最適なセレクターがランダムに生成される場合は、ルールを絞り込む必要があります。このフィーチャーの各クリックを正確にキャプチャするためには、ニーズに最も適したオプションを使用してルールを設定しなければなりません。
-
Starts With
[id^=product-id]. -
Ends With
[id$=add-to-cart]. -
Contains
[id*=add-to].
カスタムCSS
［カスタムCSS（Custom CSS）］オプションを選択すると、［一致候補（Suggested Match）］の値があらかじめ入力されます。フィーチャー要素のマッチングにカスタムCSSを使用してルールを作成するには、以下の手順に従います。
- Google Chromeで、タグ付けしようとしている要素を右クリックし、［検証（Inspect）］を選択します。
- ［要素（Elements）］タブで、ドキュメントオブジェクトモデル（DOM）ツリーを検証します。これにはページデータが含まれます。
- 検証している要素について、人間が判読できる特定のクラスがないか探します。
-
［カスタムCSS］のテキストボックスに、
classの代わりに.を記述し、スペースではなくピリオドを使用して、コード内の文字列をそのままコピーします。たとえば、class="sidebar-item js-sidebar-type-dは、テキストボックスには.sidebar-item.js-sidebar-type-dと記述されます。
フィーチャーのタグ付け用のCSSの詳細については、 フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。
適切なフィーチャールールを理解する
このセクションでは、フィーチャールールを作成するためのベストプラクティスをまとめています。CSSセレクターの詳細については、「フィーチャーのタグ付けでのCSSセレクターの使用（Using CSS selectors in Feature tagging）」を参照してください。フィーチャーのタグ付けに関する適切なルール作成のより詳細なガイダンスについては、「高度なフィーチャーのタグ付け（Advanced Feature Tagging）」を参照してください。
| ガイダンス | 例 |
| タグは、具体的で静的なCSS ID（#char）で構成する必要があります。 | #saveMessageButton |
| タグは、オブジェクトを一意に識別するCSSクラスに含める必要があります。 | .emailSettingsSubmit |
| タグには、要素を一意に識別する文字列を含むテキストを含める必要があります。 | A:contains("Log Out") |
| タグは具体的すぎたり、セッションごとやユーザーごとに変化しないようにする必要があります。 |
使用不可：
使用可：
|
| タグには、CSSセレクター内に一見ランダムな文字列が含まれていることで示されるような、動的に変化する要素を含めないようにしてください。 |
使用不可：
先頭部分のみをキャプチャするには「^」記号を使用します：
|
タグ付けされたフィーチャーを表示する
Pendoでタグ付けされたフィーチャーを表示および編集する方法はいくつかあります。
- 別のフィーチャーにタグ付けしている間に、ビジュアルデザインスタジオのヒートマップで表示します。
- ビジュアルデザインスタジオの起動時に、リストからフィーチャーを選択することで、フィーチャーが表示されます。
- ［プロダクト］>［フィーチャー］のリストからフィーチャーを開くと表示されるPendo UIの「フィーチャーの詳細」ページで表示できます。このオプションの詳細については、タグ付けされたフィーチャーの表示と管理を参照してください。
ビジュアルデザインスタジオのヒートマップ
ビジュアルデザインスタジオのヒートマップは、別のフィーチャーにタグを付けている間に、すでにタグ付けされているフィーチャーを色分けして可視化します。詳細については、「フィーチャーヒートマップ（Feature heatmap）」を参照してください。
ヒートマップを使用して、過去30日間のフィーチャーの使用状況を表示します。フィーチャーが「熱い」（赤に近い）ほど、その機能がより多く使用されていることを示します。ヒートマップを表示するには：
- Pendoの［プロダクト］>［フィーチャー］に移動します。
- 右上の［フィーチャーのタグ付け（Tag Feature）］を選択します。
- ［デザイナーを起動（Launch Designer）］を選択します。れにより、ビジュアルデザインスタジオが開きます。
- モーダルの下部にあるヒートマップをオンにします。
- 必要に応じて、ヒートマップトグルの右側にあるプラス（+）アイコンを使用してヒートマップ設定を展開します。ここでヒートマップを更新し、特定の［セグメント（Segment）］の使用状況を反映させることができます。デフォルトでは、セグメントは［全員（Everyone）］に設定されています。
ヒートマップをオンにした状態で、ビジュアルデザインスタジオのリストから個々のフィーチャーを開いて、左の青から右の赤まで視覚的な尺度に沿ってマッピングを表示することもできます。このビューでは、合計クリック数、一意の訪問者クリック数、アカウントなどの追加の指標が表示されます。
ビジュアルデザインスタジオ
- Pendo で［プロダクト（Product）］＞［フィーチャー（Features）］＞［タグ付け（Tag Features）］に移動します。
- タグ付けされたUI要素があるアプリケーションのページのURLを入力します。
- ［並べてタグ付けする（Tag side-by-side）］または［オーバーレイでタグ付けする（Tag in an overlay）］のいずれかのタグ付けモードを選択します。 詳細については、ビジュアルデザインスタジオによるタグ付けを参照してください。
- ［デザイナーを起動（Launch Designer）］を選択し、ビジュアルデザインスタジオを開きます。
- ［フィーチャー］タブでは、デフォルトで［タグ付けされたフィーチャー（Tagged Features）］が開きます。表示または編集するフィーチャーを選択します。モーダルには、イベント名、関連アプリ、プロダクトエリア、ターゲットページ、タグを作成したユーザー名と最終更新者名が表示されます。
- このフィーチャーの最近の指標を表示するには、モーダルの下部にある［指標（Metrics）］を選択します。［セグメント（Segment）］を選択して、特定のユーザーグループの指標を表示します。
- フィーチャーを編集するには、右下の ［フィーチャーを編集（Edit Feature）］ を選択します。
- 以下の設定は任意です。
- フィーチャー名の編集
- フィーチャーの説明の追加、または既存の説明の更新。説明は280文字以内にする必要があります。
- ィーチャーが割り当てられているプロダクトエリアを変更します。
- ターゲットページを変更します。
- フィーチャーに関連付けられたUIエレメントを更新します。
- サブスクリプション管理者で、アプリケーションでセッションリプレイを有効にしている場合は、リプレイプライバシールールを選択してください。Pendoはフィーチャーのタグルールをセレクターとして使用するため、プライバシールールはタグ付けしている同じ要素に適用されます。詳細については、「セッションリプレイのプライバシー」を参照してください。
- イベントプロパティの追加
-
動的カスタムHTML属性値をフィルタリングのオンとオフを切り替えて、カスタムHTML属性を収集で定義されているカスタム属性の動的外観値を制御し、選択時に他の動的要素をフィルタリングを使用して、
idやclassなどの既定の属性の動的外観値を制御します。
- 変更を加えた場合は、右下の［変更を保存（Save Changes）］を選択します。