1. Pendo Adoptヘルプセンター
  2. トラッキングとフィルタリング
  3. ページとフィーチャーのタグ付け

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

最終更新日:

フィーチャーは、左側のナビゲーションにあるUIの［アナリティクス（Analytics）］ページで管理します。アプリケーションの使用パターンを明らかにし、ガイドを配置するために、フィーチャーにタグを付けます。

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

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でFeatureにタグを付けるには、［アナリティクス（Analytics）］>［フィーチャー（Features）］に移動し、次の操作を行います。

  1. ページ右上の［フィーチャーのタグ付け（Tag Features）］を選択します。
  2. アプリケーションの対象ページのURLを入力します。

    Adopt_VDS_EnterURL.png
  3. ［ビジュアルデザインスタジオを起動（Launch Visual Design Studio）］を選択します。これにより、ビジュアルデザインスタジオがアプリケーションのページに読み込まれます。
  4. ［フィーチャー（Features）］タブで、［フィーチャーのタグ付け（Tag Feature）］を選択します。

    VDS_TagFeature.png
  5. ページ内のタグ付けしたい部分にカーソルを合わせて選択します。ドロップダウンメニューの項目にタグ付けするには、ドロップダウンメニューを開きながらALT（Windowsの場合）またはOption（Macの場合）を選択し、ドロップダウンメニューを展開します。
  6. 上部の［新規フィーチャーを作成（Create New Feature）］オプションを選択します。
  7. 会社の命名規則に沿った分かりやすい名前を入力して、何を指しているのか他の人にも分かるようにします。

    Adopt_VDS_TagFeature.png
  8. ［フィーチャー要素のマッチング（Feature Element Matching）］で、ルールを作成するための方法として、一致候補（Suggested Match）、ルールビルダー（Rule Builder）、またはカスタムCSS（Custom CSS）のいずれかを選択します。ガイダンスについては、この記事のフィーチャー要素のマッチングを参照してください。
  9. ［ページの場所（Page Location）］で、アプリケーション全体（サイト全体（Sitewide））または特定のページ（当該ページのみ（Only on this page））のどちらでフィーチャーを追跡するかを選択します。

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

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

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

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

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

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

一致候補

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

右上の矢印で、ページのHTMLドキュメントオブジェクトモデル（DOM）の選択範囲を上下に移動して調整できます。上矢印を使うと、より広いクリック可能領域（相対的な親要素）を選択でき、下矢印を使うと、より狭いクリック可能領域（相対的な子要素）を選択できます。

注：DOMツリーは、ページ上のすべての要素、属性、テキストを階層内のオブジェクトとして定義するために、ブラウザによって作成されるページのHTMLの階層表現です。

たとえば、ボタン内のテキストを選択し、そのテキストが含まれるコンテナを含めることができます。上矢印を使ってDOMツリーを上方向に移動し、DOM内で次に大きな項目をタグ付けに選択できます。

UpDown_Arrows.png

ルールビルダー

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

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

AdoptRuleBuilder.png

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

色（Color）

HTMLの要素と属性

例

紫

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

class=“align-center”

緑

HTML要素のタイプ

<div>、<button>、<a>、<p>

黄色

HTML属性

href、src、alt

ライトブルー

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

id=“myHeader”

ダークブルー

HTMLテキストにステートメントが含まれています。これは、要素に含まれるテキストに基づいて要素にタグを付けることができる、Pendo固有のオプションです。

 

 

カスタムCSS

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

1. Chromeで、タグ付けする要素を右クリックし、［検証（Inspect）］を選択します。

2. ［要素（Elements）］タブで、ドキュメントオブジェクトモデル（DOM）ツリーを検証します。これにはページデータが含まれます。

3. 検証している要素について、人間が判読できる特定のクラスがないか探します。

4. カスタム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(「16件の新しいメッセージがあります」)

使用：

A:contains("メッセージ")

タグには、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でタグ付けされたフィーチャーを表示するには、次の2つの方法があります。

アナリティクスのフィーチャーリスト

タグ付けされたフィーチャーを表示するには、［アナリティクス］に移動し、上部にある［フィーチャー］タブを開きます。

Adopt_Analytics_Features.png

ページの上部に3つのフィルターがあります。これらのフィルターは、テーブルビューのフィーチャーのリストを変更します。

フィルター（Filter） 説明
セグメント

デフォルトは［全員（Everyone）］です。ドロップダウンを使用して、定義済みのセグメントまたは［カスタムセグメント（Custom Segment）］のいずれかを選択します。新しいカスタムセグメントを作成するには、ドロップダウンメニューの一番下にある［＋カスタムセグメント（+ Custom Segment）］を選択します。
日付範囲 ドロップダウンを使用して事前定義された値から選択するか、カスタム範囲の特定の期間を選択します。
アプリケーション ドロップダウンを使用して、すべてのページを表示するか、アプリケーションごとにページを表示するかを選択します。

 

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

列 説明
フィーチャー名

フィーチャーに付けられたタイトル。フィーチャーの名前を選択するとこのタイトルを編集できます。
タイプ

フィーチャーのタイプ。カスタム（自分やチームが作成）、継承（Pendoや親アカウントが作成）、非アクティブ（一部のアナリティクスが収集されないまま継承されるが、そのフィーチャーはまだガイドで使用可能）のいずれかになります。
アプリケーション

フィーチャーが割り当てられているアプリケーション。
訪問者数

ページ上部で指定したセグメントと日付範囲内でフィーチャーをクリックした一意の訪問者の数。
クリック数

ページ上部で指定されたセグメントと日付範囲内のすべての訪問者がフィーチャーをクリックした総数。
ページ名

フィーチャーに割り当てられたページ、またはフィーチャーがサイト全体にわたる場合は「すべてのページ」。
ルール

フィーチャータグのルール。

 

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

Adopt_Analytics_Features_ManageColumns.png

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

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

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

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

  1. Pendoで、［アナリティクス（Analytics）］>［フィーチャー（Features）］に移動します。
  2. 右上の［フィーチャーのタグ付け（Tag Feature）］を選択します。
  3. ［ビジュアルデザインスタジオを起動（Launch Visual Design Studio）］を選択します。
  4. デザイナーの下部にあるヒートマップをオンに切り替えます。
  5. 興味のあるセグメントを設定します。

AdoptHeatmap.png

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

フィーチャーの詳細を表示および編集する

タグ付けされたフィーチャーの詳細を表示および編集するには、次の2つの方法があります。

詳細サイドバー

ビジュアルデザインスタジオを開かなくても、詳細サイドバーからフィーチャーの基本情報を表示・編集できます。［アナリティクス（Analytics）］>［フィーチャー（Features）］に移動し、表示または編集するフィーチャーを選択します。サイドバーが開き、次の操作ができます。

  • フィーチャーの名前を更新する
  • フィーチャールールを表示、編集、追加、削除する。フィーチャーには少なくとも1つのルールが必要です。
  • 誰がいつルールを作成したか、または最近更新したかを確認する
  • フィーチャーが存在するページを追加または編集する
  • フィーチャーを削除する

AdoptPageDetails.png

ビジュアルデザインスタジオ（Visual Design Studio）

ビジュアルデザインスタジオからページの名前とルールを編集するには、［アナリティクス］>［フィーチャー］に移動し、次の手順を実行します。

  1. ページ右上の［フィーチャーのタグ付け（Tag Features）］を選択します。
  2. テキストフィールドに、アプリケーションの対象ページのURLを入力します。
  3. ［ビジュアルデザインスタジオを起動（Launch Visual Design Studio）］を選択します。これにより、ビジュアルデザインスタジオがアプリケーションのページに読み込まれます。
  4. ［フィーチャー］タブで、編集するフィーチャーにカーソルを合わせ、表示される編集アイコンを選択します。

    Adopt_VDS_Feature_Edit.png
  5. 右下の［フィーチャーを編集（Edit Feature）］を選択します。
  6. 必要に応じてフィーチャーを編集し、右下の［変更を保存（Save Changes）］を選択します。

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

タグ付けされたフィーチャーを削除するには、削除するフィーチャーの行にカーソルを合わせ、行の最後にあるゴミ箱アイコンを選択します。また、詳細サイドバーにあるゴミ箱アイコンを使用して、そのフィーチャーを削除することもできます。

Adopt_Analytics_Features_Delete.png

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

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

Adopt_Analytics_Features_Download.png

関連記事