フィーチャーのタグ付けでCSSセレクターを使用する

Pendoでは、フィーチャーを作成するためのタグ付けルールにCSSセレクターを使用します。このルールにより、アプリケーション内の特定の要素を識別することができ、訪問者とそれらの要素に接点ができたときに、名前を付けておいたPendoのフィーチャーにその要素を取り込むことができます。この記事では、サポートされているCSSセレクターと動的CSSセレクターの使い方をまとめています。Pendoでのフィーチャーのタグ付けの詳細については、 フィーチャーのタグ付けと表示を参照してください。

CSSセレクターを使用したフィーチャーのタグ付け

フィーチャーにタグ付けする際、Pendoでは ［一致候補（Suggested Match）］の下に候補となるCSSセレクターが表示されます。別のCSSセレクターを選択したい場合は、［ルールビルダー（Rule Builder）］を使用して、ガイドに従ってアプリケーションのコードに基づくルールを作成するか、［カスタムCSS（Custom CSS）］オプションを使用して、独自のルールでCSSセレクターを作成します。

たとえば、button:contains(Next)というルールでは、具体的に「Next」というテキストが含まれるボタンをターゲットにしています。CSSセレクターで使用される構文のその他の例については、W3SchoolsのCSSセレクターリファレンスを参照してください。

CSSセレクターを使用したフィーチャーのタグ付けの詳細については、Pendo Academyに掲載している動画「PendoでHTMLおよびCSSを使用する（Using HTML and CSS with Pendo）」をご視聴ください。

サポートされる構文

• .class
• #id
• element
• element element
• element,element
• element > element
• [attribute]："href"と"value"をサポートします。
• [attribute="value"]：下の「構文の制限」を参照してください。
• [attribute*="value"]
• :nth-child(index)：インデックスは1から始まります。
• :contains("text")：セレクターのテキストは、HTMLのテキストと完全に一致する必要があります。下の「構文の制限」も参照してください。
• ^=
• $=

構文の制限

フィーチャーのタグ付けの構文には、以下の制限があります。

• 兄弟要素はサポートされていません。
• [attribute="value"]セレクターの使用では、特定の属性しか許可されません。詳細については、データ収集におけるHTML属性を参照してください。
• 要素 のすべてのタイプがサポートされているわけではありません。selectおよびoptionは使用できません。詳しくは、トラブルシューティング記事「タグ付きドロップダウンメニュー項目のクリックイベントがありません」を参照してください。
• クラスを別のクラスに入れるなど、要素をネストしている場合、フィーチャーのタグ付けでcontainsルールを複数使用することはできません。
• 複数のルールを使用している場合は、そのフィーチャーの最後のルールであるcontainsのみ使用できます。たとえば、.rule:contains("stuff") .another-ruleでは、:containsはセット内の最後のルールの一部ではないため機能しません。

動的CSSセレクターの処理

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

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

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

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

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

その他のリソース

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

• PendoでHTMLおよびCSSを使用する（Using HTML and CSS with Pendo）
• 動的CSSセレクターを識別する（Identifying Dynamic CSS Selectors）
• 動的CSSセレクターでフィーチャーをタグ付けする（Tagging Features with Dynamic CSS Selectors）