高度なフィーチャーのタグ付け

最終更新日: 2024年04月23日 03:53

この記事では、フィーチャーのタグ付け機能を説明し、自動フィーチャールール選択の品質の判断を支援し、カスタムセレクターのテスト方法に関する情報を提供します。

これらのガイドラインは、ある程度の技術的な知識を持つユーザーを対象としており、すべての人に推奨される手法ではありません。この記事の内容についてご質問がある場合や、以降の進め方がわからない場合は、Pendoサポートにお問い合わせください。

前提条件

Pendoにおけるフィーチャー選択は、アプリケーションのコンポーネントを識別する方法としてCSSセレクターのサブセットを使用します。一般的なCSSセレクターの知識と、フィーチャーのタグ付けでの使用が許可されているCSSセレクターの両方に関する知識を習得しておくことをお勧めします。

まず、CSSセレクターに関する知識を深めるのに役立つリソースをいくつか紹介します。

MozillaのCSSセレクター
W3SchoolsのCSSセレクターリファレンス
CSSセレクターの使い方を練習できるゲーム、CSS Diner
フィーチャーのタグ付けでCSSセレクターを使用する

Google ChromeのDevToolsの使用方法に関するリソースをいくつか紹介します。

フィーチャー選択の仕組み

フィーチャータグは、CSSセレクターを使ってユーザーのアクティビティデータを取得することで機能します。これは、ウェブページから要素を直接選択する場合と同様です。これらのイベントは、イベントが記録される各ページ要素の階層表現として取得されます。各セレクターは「フィーチャールール」と呼ばれています。

サポートされているセレクターと構文の一覧を表示するには、フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。

フィーチャールールの仕組み

それぞれのフィーチャールールは、受信した総データに対して処理され、ルールが適用される各イベントを表示します。たとえば、一般的なセレクター（「何らかの送信ボタン」など）は、特殊なセレクター（特定のモーダルの送信ボタンなど）よりも多くの結果を返します。

Pendoは、ページ要素の階層表現の形式でデータを収集します。つまり、フィーチャールールの特異性のレベルは、Pendoアプリケーションで表示される合計数に影響を与える可能性があります。

また、複数のルールを利用して選択を組み合わせることもできます。複数のフィーチャールールを使用しても、結果が重複して表示されることはありません。各ルールはそれぞれのPendoフィーチャーのコンテキスト内で処理されるため、総カウント数には別のルールにすでに含まれているイベントは含まれません。特定のフィーチャーに対してアクティビティを正確に取得するために必要なルールの数は、アプリケーションの実装やタグ付けするフィーチャーの目的に依存します。

フィーチャールールの品質を決定する

ビジュアルデザインスタジオを使用して選択できる最も具体的な要素を特定することで、フィーチャーにタグを付けることができます。ただし、場合によっては、意図したデータが取得されないことがあります。

フィーチャーにタグを付ける際には、ネストされた要素や繰り返される要素に特に注意することが重要です。これらのタイプの要素にタグを付ける際のセレクターの仕組みを理解することで、クリック可能な要素全体と、Pendoフィーチャーとしてタグ付けする要素のすべての繰り返しインスタンスに、より一貫性のあるタグを付けることができます。

ネストされた要素

ネストされた要素の一般的な例としては、<button>または<a>要素に含まれるspanがあります。以下のコード例では、ボタンのテキストはspanで囲まれていますが、ボタンのクリック可能な部分は<a>要素自体です。Pendoでタグ付けする場合、クリック可能な要素全体を取得する必要があります。

<a href="/assets/pages/home.html" class="button>
      <span>Home</span>
</a>

この例では、ボタンのクリック可能な要素は、ボタンの周りの青い領域全体にあります（以下の図を参照）。ただし、ボタンのテキストは<span>で囲まれています。

ビジュアルデザインスタジオでタグ付けする場合、span要素を選択すると、span自体で発生したクリックのみがキャプチャされます。

クリック可能な領域全体を選択すると、<a>と<span>要素の両方のクリックが取得されます。

繰り返し要素

ビジュアルデザインスタジオは、要素をターゲットにする際に、選択した要素に基づいて最も具体的な要素を特定します。ページ上で繰り返される要素のすべてのインスタンスにタグを付ける場合は、CSSセレクターの調整の必要がある可能性があります。

たとえば、ユーザーがテーブルの行を選択できるチェックボックスのあるテーブルについて考えてみます。チェックボックスのタグ付けにデザイナーを使用する場合、最も具体的な要素、つまり選択されている1つのチェックボックスを特定します。

以下の図の例では、選択された要素の一致はspan > .pendo-checkbox > .pendo-checkbox__input > .pendo-checkbox__innerです。

代わりにテーブル内のチェックボックスのいずれかにタグを付ける場合は、要素クラスのみを使用するようにセレクターを更新する必要があります。これにより、テーブル内のチェックボックスのクリック数を取得して、このフィーチャーに関連付けることが可能になります。この例では、カスタムフィーチャールールとして.pendo-chckbox__innerを使用します。

フィーチャールールをテストする

注：Pendoには、ウェブページから要素を読み込んで選択するためのSizzleライブラリが実装されています。Sizzleはテストに適していますが、フィーチャーに許可されたものよりも多くのセレクターに対応しています。iframeレベルでコンソールを照会しない限り、Sizzleはiframe内の要素を検出できません。詳細については、フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。

ルールをテストするには、フィーチャーが存在するページ（デザイナーの外）に直接移動し、Chrome DevToolsを開き、コンソールに次のように入力し、_FEATURE_RULE_HEREをフィーチャールールに置き換えます。

pendo.Sizzle('FEATURE_RULE_HERE')

コマンドを実行すると、セレクターの結果を含むドロップダウンが表示されます。

これらの結果にマウスを合わせると、アプリケーション内の項目がハイライト表示されます。

また、結果をダブルクリックすると、「要素（Elements）」ペインにその要素が表示されます。この情報とハイライト表示部分を組み合わせると、ルールの効果がわかります。

動的にレンダリングされたフレームワーク

クラスやIDなどの動的に生成される属性は、React.js、EXT.js、またはEmberなどのフレームワークでは一般的です。Pendoではいくつかの自動除外が作成され、一致候補はこれらの除外を回避しようとします。ただし、すべてのデータを取得したり毎回ツールチップを表示したりするためには、ルールの変更が必要になる場合があります。

以下に、動的に生成される属性の例をいくつか示します。

.nav_bar__2RnO8

#ember123

#btn-1050-el

これらの例の数値は、ページが読み込まれるたびにランダムに生成されるので、別の何か、もしくはワイルドカード（*）一致を選択する必要があります。ワイルドカード（*）を使用して取得されるものより具体的なものをクエリ文字列で取得する場合は、:containsを使用してください。:containsルールは、リーフの末端（最後）のノードでのみ使用できます。たとえば、.rule:contains("stuff") .another-ruleでは、:containsはセット内の最後のルールの一部ではないため機能しません。

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

ビジュアルデザインスタジオで新しいフィーチャーにタグを付けたり、既存のフィーチャールールを編集したりしながらルールを変更するには［フィーチャー要素のマッチング（Feature Element Matching）］セクションを見つけて、［カスタムCSS（Custom CSS）］を選択します。

たとえば、一致候補が.nav_bar__2RnO8だった場合、「〜で始まる属性」を意味する^を使ってルールを修正することができます。これは、React.jsクラスでタグ付けするのに便利なオプションです。.nav_bar__2RnO8を修正する際にこれを使用するには、フィーチャールールのカスタムCSSとして以下を入力します。

[class^=“nav_bar__”]

ヒント：正しい構文で適切な要素が選択されたことを示すために、要素の周りに赤いボックスが表示されます。

この例では、一致候補にピリオド（.）があるため、classが正しい属性です。この同じ構文は、（#で示される）idやhrefなどの他の属性にも適用されます。

Pendoがサポートするルール

[attribute^=“what it begins with”]

[attribute$=“what it ends with”]

[attribute*=“what it contains”]

注：より適したカスタム属性が使われているかどうかを開発者に確認してください。Pendoはデフォルトではカスタム属性を取得しませんが、フィーチャールールとして追加することができます。これにより、一致候補がより正確になり、カスタマイズの必要性も少なくなります。詳細については、データ収集におけるHTML属性を参照してください。

その他のリソース

CSSセレクターの詳細については、Pendo Academyで以下の動画をご視聴ください。