Pendo Tagging AidはGoogle Chromeの拡張機能で、特にデフォルトのセレクターが十分に具体的でない場合に、アプリ内でより正確な機能タグやガイドアンカーを作成できます。Pendoビジュアルデザイナーと連携して、タグ付けとガイドアンカリングをより正確に行えます。
Tagging Aidを使うタイミング
ビジュアルデザインスタジオで正しいCSSセレクタを選択・構築できない場合は、Pendo Tagging Aidをご利用ください。これは、動的または複雑なHTMLを含むアプリで、提案される一致結果が一般的すぎる場合に特に役立ちます。
ブラウザ開発者ツールで手動で要素をチェックする代わりに、要素にカーソルを合わせて属性を確認したり、ポイント＆クリックインターフェースでセレクターを作成したり、セレクターがフィーチャーやガイドステップで正しい要素を使用しているかを検証したりできます。
前提条件
Pendo Tagging Aidを使う前に、以下の条件を満たす必要があります。
- ChromeウェブストアからPendo Tagging Aidをブラウザにインストールしていること。
- Pendoにサインインして、適切なサブスクリプションにアクセスしてください。
- Chromeでアプリケーションを開きます。Tagging Aidはアプリ上でビジュアルデザインスタジオを起動させます。
ステップ1. 要素を選択する
- ブラウザのツールバーからPendo Tagging Aid拡張機能を開いてください。
- ［新しい要素を選択］を選択します。
- フィーチャータグまたはガイドアンカーとして使用するアプリケーション内の要素を選択します。
- 矢印を使って選択範囲を調整したり、要素のコンテナを拡大または縮小したりできます。これにより、DOMツリー（ページ上の要素の階層構造）を上下に移動できます。
- 要素の属性はサイドパネルで確認できます。
ステップ2. ルールをテストする
Tagging Aidのルールをテストすることで、タグやガイドアンカーの精度を確認し、意図しないタグ付けを防ぐことができます。
- セレクターを選択したら、 ［ルールをテスト］を選択して、ページ上の要素のうち、ルールに一致する要素の数を確認してください。選ばれた要素がハイライトされ、Tagging Aidにはマッチの総数が表示されます。
- 一致する要素が多すぎる場合は、特定のテキストに一致するように
:contains()ステートメントを追加してセレクターを絞り込みます。
ステップ3. セレクターを絞り込む
- ルールの横にある歯車アイコンを選択してテキスト設定を開いてください。
-
:contains()テキストを編集して不要な文字や空白を削除してください。 - ルールを絞り込んだら、［選択］フィールドの上にある［コピー］を選択して、セレクターの詳細全体をデバイスのクリップボードにコピーします。
ステップ4. セレクターをデザイナーに貼り付ける
- Pendoでセレクターを適用したいフィーチャータグまたはガイドステップを開いてビジュアルデザインスタジオを開きます。
- ステップ3でコピーしたフルセレクターを［カスタムCSS］フィールドに貼り付けます。
- Tagging Aidを閉じます。
- ビジュアルデザインスタジオでフィーチャーまたはガイドを保存します。
デザイナーは、定義したルールに基づいて、カスタムセレクターを使用してフィーチャータグまたはガイドステップを適切な要素に固定します。