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セレクターリファレンスを参照してください。
サポートされる構文
.class#idelementelement elementelement,elementelement > element-
[attribute]："href"と"value"をサポートします。 -
[attribute="value"]：下の「構文の制限」を参照してください。 [attribute*="value"]-
:nth-child(index)：インデックスは1から始まります。 -
:contains("text")：セレクターのテキストは、HTMLのテキストと完全に一致する必要があります。下の「構文の制限」も参照してください。 ^=$=
構文の制限
フィーチャーのタグ付けの構文には、以下の制限があります。
- 兄弟要素はサポートされていません。
-
[attribute="value"]セレクターの使用では、特定の属性しか許可されません。詳細については、データ収集におけるHTML属性を参照してください。 -
elementのすべてのタイプがサポートされているわけではありません。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で使用する静的セレクターを提供します。
nth-childルールに関する考慮事項
nth-child()ルールでは、ページの構造に基づいて要素を指定します。そのため構造が変更されると、意図した要素が特定できなくなる可能性があります。たとえば、3番目の子である要素が、プロダクトの変更により4番目の子になった場合、nth-childルールでは正しい要素を特定できません。
nth-child()ルールは、特に構造が頻繁に変更される可能性が低い単純なアプリケーションにおいて、親要素内の位置に基づいて要素を指定したい場合に効果的です。また、後でより具体的な属性を追加する予定がある場合に、要素を識別するためのプレースホルダーとしても役立ちます。
フィーチャールールとしてnth-child()を使用する場合、特にアプリケーションが頻繁に更新される環境では、定期的にルールを見直して目的の要素が正確に指定されていることを確認し、必要に応じてルールの更新をお勧めします。
可能な場合は、カスタムHTML属性や、より安定した識別子を使用して、フィーチャーのタグ付けが常に正しく実施されるようにしてください。nth-child()ルールは出発点としては有用ですが、長期的な安定性を図るには、より確実なソリューションを採用することをお勧めします。
その他のリソース
CSSセレクターの詳細については、Pendo Academyで以下の動画をご視聴ください。