この記事では、Pendoがデフォルトでアナリティクス用に収集するHTML属性と、デフォルトのデータ収集を変更する方法をまとめています。
HTML属性
HTML属性は、フォーム入力値や画像のURLなど、HTML要素に関する追加情報を提供するものです。一般的なHTML属性には、src、href、class、idなどがあります。これらの属性のコンテンツであるCSSセレクターは、ウェブサイトの特定の要素を識別し、スタイルを設定します。Pendoはこれらのセレクターによって、フィーチャーのクリックを識別し、ガイドをターゲティングします。このため、CSSセレクターは静的かつ一意で、安定的である必要があります。
デフォルトで収集されるイベント
アナリティクスに使用するクリックイベントやフォーカスイベントについて、Pendoはデフォルトで特定の属性やプロパティを収集します。
<div>、<p>、<button>などのクリックされた要素の種類<a>、<span>、<div>などの要素内のテキスト- 要素の
idまたはclass - 要素の他の属性（存在する場合）
title、href、tabindexなど <button>については、value（ボタンのテキスト）およびnameを収集。<img>については、srcおよびaltを収集。<select>については、typeおよびselectedIndexを収集。<textarea>および<input>については、nameを収集。
プライバシー保護の観点から、ユーザーが入力したテキストを<input>や<textarea>のフィールド内で収集したり、読み込みイベントでドキュメント<title>を収集したりすることはありません。
クリックされた要素のすべての親要素について同じデータを収集し、HTML階層（またはドキュメントオブジェクトモデル：DOM）を経て、<body>タグまでのデータを収集します。
カスタムHTML属性を追加したり、特定の要素に対してPendoのデータ収集を制限したりすることで、Pendoがクリックイベントやフォーカスイベントで収集するデータを調整することができます。
innerTextを含むページ上のすべてのテキストが、フィーチャークリックアクティビティと追加のフィーチャーのタグ付け設定に基づいてデフォルトで収集されます。この自動テキスト収集は、Pendoサポートに連絡してサブスクリプションレベルでオフにしたり、インストールスクリプトを更新してページレベルでオフにしたりできますが、これを行うとフィーチャーのタグ付けが複雑になる可能性があります。拡張アプリの場合、デフォルトではInnerTextは収集されません。個々の拡張アプリでテキスト収集を有効にするには、Pendoサポートにお問い合わせください。特定の要素の追跡を除外する
個人を特定できる情報（PII）やその他の機密情報を保護するために、Pendoが収集する属性を制限したい場合があるとします。Pendoに渡される特定の要素からデータを除外するには、以下のいずれかを実行します。
- Pendoサポートに、該当するHTML属性をアプリケーションの
htmlAttributeBlacklistに追加するよう依頼します。これにより、Pendoは今後のすべてのクリックイベントやフォーカスイベントにおいて、指定した属性を収集しなくなります。 .pendo-ignoreクラスをコード内の任意の要素に追加して、Pendoが該当する要素を収集しないようにします。この方法は、Pendoエージェントバージョン2.9以降で機能します。
以下の例は、最初のボタン要素のみを無視するコードです。「決済する（Submit Payment）」というテキストを含むスパンまたは「決済する」ボタン要素自体のクリックは、クリックイベントが選択された要素とその親要素を収集するため、Pendoによって無視されます。つまり、スパンまたは特定のボタンをクリックすると、イベント内の.pendo-ignoreクラスが収集され、そのイベントは無視されます。
<div class="payment">
<button class="pendo-ignore payment-button">
<span>Submit Payment</span>
</button>
<button class="cancel-button">
<span>Cancel</span>
</button>
</div>
以下の例は、div全体を無視するコードです。.pendo-ignoreクラスを両方のボタンの親要素に追加したため、該当するdiv内のどこをクリックしても、Pendoによって無視されます。
<div class="pendo-ignore payment">
<button class="payment-button">
<span>Submit Payment</span>
</button>
<button class="cancel-button">
<span>Cancel</span>
</button>
</div>