1. Pendoヘルプセンター
  2. Pendoのデータ
  3. ページとフィーチャー

フィーチャーのタグ付け（Feature tagging）

最終更新日:

フィーチャーにタグ付けして、アプリケーションの使用パターンを明らかにし、ガイドをターゲティングします。フィーチャーは、左側のナビゲーションの［プロダクト（Product）］>［フィーチャー（Features）］で管理します。Pendoのフィーチャーページの詳細については、タグ付けされたフィーチャーの表示と管理を参照してください。

フィーチャーのタグ付けを理解する

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のインターフェースです。

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

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）］を選択します。

    Adopt_VDS_TagFeature.png

  7. Pendoのフィーチャーに対する貴社の命名規則に従って、わかりやすい名前を作成します。
  8. 説明（最大280文字）を追加し、アプリ内のどの要素を参照しているのかが他の人にもわかるようにします。
  9. ドロップダウンメニューを使用して、プロダクトエリアをフィーチャーに割り当てます。
  10. ［フィーチャー要素のマッチング（Feature Element Matching）］で、ルールを作成するための方法として、一致候補（Suggested Match）、ルールビルダー（Rule Builder）、またはカスタムCSS（Custom CSS）のいずれかを選択します。ガイダンスについては、この記事のフィーチャー要素のマッチングを参照してください。
  11. ［ターゲットページ（Page Location）］で、フィーチャーの追跡方法として、アプリケーション全体（サイト全体（Sitewide））または特定のページ（当該ページのみ（Only on this page））のいずれかを選択します。

    Feature_Element_Matching.png

  12. 訪問者がこのフィーチャーを操作したときに追加データを取得する必要がある場合は、［イベントプロパティ］ドロップダウンを開いてイベントプロパティを追加します。詳しくは、クリックイベントプロパティをご覧ください。
  13. 必要に応じて、［設定（Settings）］セクションを開き、［選択時に動的要素をフィルタリング（Filter Dynamic Elements on Selection）］をオンまたはオフにします。フィーチャーに動的識別子を持つ要素（ページが読み込まれるたびに変化するIDなど）が含まれる場合、この設定によって、Pendoがルール生成プロセスからこの動的要素を除外しようとするかどうかを制御できます。ルール生成の精度を高めるために、この設定をオンのままにしておくことをお勧めします。
  14. ［保存（Save）］を選択し、フィーチャーを「フィーチャー」リストに追加します。

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

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

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

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

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

ヒント：一致候補を最初に選択し、その後にルールビルダーやカスタムCSSを選択して、さらにルールを精密化できます。また、まずはルールビルダーを使用してPendoがフィーチャーのタグ付けに使用するCSS構文を定義し、その後カスタムCSSに切り替えてルールをさらに詳細に編集することもできます。

一致候補

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

右上の矢印を使用して、ページのHTMLドキュメントオブジェクトモデル（DOM）ツリーの選択肢を上下に移動して調整します。

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

UpDown_Arrows.png

ルールビルダー

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

選択肢の下部にあるトグルを使用して、未使用のノードを表示します。ノードはDOMツリーの要素であり、ウェブページの構造、スタイル、コンテンツを階層で表します。灰色の各行は、選択した要素に基づくDOMツリー内のノード（レベル）を表します。

未使用のノードを表示させることは、ルールビルダーに現在表示されているノードが正確なフィーチャールールを作成するのに十分でない場合に役立ちます。

DOMツリーの上位にあるノードを選択すると、DOMツリーの下位にあるノードを選択するよりもクリック可能領域が大きくなります。

ルールビルダー – Show unused nodes.png    Show unused nodes.png

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

Rule builder selection.png

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

色（Color）

HTMLの要素と属性

例

紫

HTMLクラス。通常は優れたセレクターですが、ページ上の複数の要素に同じクラスがある場合があります。

class=“align-center”

 

緑

HTML要素のタイプ

div、p、button、a

黄色

HTML属性

href、src、alt

ピンク

HTML ID。通常、ページ上で最も一意性が高いセレクターです。

id=“myHeader”

ダークブルー

HTMLテキストの「contains」ステートメント。これは、要素に含まれるテキストに基づいて要素にタグを付けることができる、Pendo固有のオプションです。サブスクリプション設定の［ウェブアプリケーションでのテキストキャプチャを許可］がオンになっている場合にのみ使用できます。

 contains('Set up')

ルールビルダーでフィーチャールールをさらに調整するには、ルールの横にある歯車アイコンを選択します。

VDS_RuleBuilder_Cog.png

歯車の有無や設定オプションは、属性の種類によって異なります。

  • #idの場合、オプションにはDefault 、 Starts With 、 Ends With 、およびContainsが含まれます。
  • .classの場合、オプションにはDefaultおよびContainsが含まれます。
  • [attribute]の場合、オプションにはDefault、Attribute Exists、Starts With、Ends With、Containsが含まれます。
  • 要素のタイプを特定できない場合、または要素が値のない属性（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オプションを選択すると、一致候補値が事前に入力されます。フィーチャー要素のマッチングにカスタムCSSを使用してルールを作成するには、以下の手順に従います。

  1. Google Chromeで、タグ付けしようとしている要素を右クリックし、［検証（Inspect）］を選択します。
  2. ［要素（Elements）］タブで、ドキュメントオブジェクトモデル（DOM）ツリーを検証します。これにはページデータが含まれます。
  3. 検証している要素について、人間が判読できる特定のクラスがないか探します。
  4. ［カスタム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でタグ付けされたフィーチャーを表示および編集する方法はいくつかあります。

  • 別のフィーチャーにタグ付けしている間に、ビジュアルデザインスタジオのヒートマップで表示します。
  • ビジュアルデザインスタジオ（Visual Design Studio）の起動時に、リストからフィーチャーを選択することで、フィーチャーが表示されます。
  • ［プロダクト］>［フィーチャー］のリストからフィーチャーを開くと表示されるPendo UIの「フィーチャーの詳細」ページで表示できます。このオプションの詳細については、タグ付けされたフィーチャーの表示と管理を参照してください。

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

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

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

  1. Pendoの［プロダクト］>［フィーチャー］に移動します。
  2. 右上の［フィーチャーのタグ付け（Tag Feature）］を選択します。
  3. ［デザイナーを起動（Launch Designer）］を選択します。れにより、ビジュアルデザインスタジオが開きます。
  4. モーダルの下部にある［ヒートマップ］をオンにします。

    VDS_FeatureTagging_Heatmap.png

  5. 必要に応じて、ヒートマップトグルの右側にあるプラス（+）アイコンを使用して、ヒートマップの設定を展開します。ここでは、ヒートマップを更新して、特定のセグメントの使用状況を反映させることができます。デフォルトでは、セグメントは［全員（Everyone）］に設定されています。

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

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

  1. Pendoで、［プロダクト］>［フィーチャー］>［フィーチャーのタグ付け］に移動します。

    Features_TagFeatures.png

  2. タグ付けされたUI要素があるアプリケーションのページのURLを入力します。
  3. ［並べてタグ付けする（Tag side-by-side）］または［オーバーレイでタグ付けする（Tag in an overlay）］のいずれかのタグ付けモードを選択します。詳細については、ビジュアルデザインスタジオによるタグ付けを参照してください。
  4. ［デザイナーを起動］を選択し、ビジュアルデザインスタジオを開きます。
  5. ［フィーチャー］タブでは、デフォルトで［タグ付けされたフィーチャー（Tagged Features）］が開きます。表示または編集するフィーチャーを選択します。モーダルには、イベント名、関連アプリ、プロダクトエリア、ターゲットページ、タグを作成したユーザー名と最終更新者名が表示されます。
  6. このフィーチャーの最近の指標を表示するには、モーダルの下部にある［指標（Metrics）］を選択します。［セグメント（Segment）］を選択して、特定のユーザーグループの指標を表示します。
  7. フィーチャーを編集するには、右下の［フィーチャーを編集（Edit Feature）］を選択します。

    VDS_FeatureTagging_EditFeature.png

  8. 以下の設定は任意です。
    • フィーチャー名の編集
    • フィーチャーの説明の追加、または既存の説明の更新。説明は280文字以内にする必要があります。
    • フィーチャーが割り当てられているプロダクトエリアの変更
    • フィーチャーに関連付けられているUI要素のターゲット再設定
    • ［ターゲットページ］の変更
    • イベントプロパティの追加
    • ［選択時に動的要素をフィルタリング（Filter Dynamic Elements on Selection）］のオン/オフ
  9. 変更を加えた場合は、右下の［変更を保存（Save Changes）］を選択します。
この記事は役に立ちましたか？
21人中7人がこの記事が役に立ったと言っています

このセクションの記事

もっと見る