この記事では、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サポートに連絡してサブスクリプションレベルで無効にするか、インストールスクリプトを更新することでページレベルで無効にできますが、:containsルールを使用している場合、これを行うとフィーチャーのタグ付けが複雑になる可能性があります。拡張アプリの場合、デフォルトではInnerTextは収集されません。個々の拡張アプリでテキスト収集を有効にするには、Pendoサポートにお問い合わせください。特定の要素の追跡を除外する
個人を特定できる情報（PII）やその他の機密情報を保護するために、Pendoが収集する属性を制限したい場合があるとします。Pendoに渡される特定の要素からデータを除外するには、以下のいずれかを実行します。
-
Pendoサポートに、該当するHTML属性をアプリケーションの
htmlAttributeBlacklistに追加するよう依頼します。これにより、Pendoは今後のすべてのクリックイベントやフォーカスイベントにおいて、指定した属性を収集しなくなります。 -
.pendo-ignoreクラスをコード内の任意の要素に追加して、Pendoが該当する要素を収集しないようにします。これはPendo Web SDKバージョン2.9以上で機能します。
例
htmlAttributeBlacklistの例
この例では、最初のhref要素に、Pendoによりキャプチャされるべきではない PII が含まれています。追加のhref要素にPIIが含まれる可能性があり、属性をまったくキャプチャしない方が安全であるという懸念がある場合は、Pendoサポートにhref属性をアプリケーションのhtmlAttributeBlacklistに追加するよう依頼してください。クリックイベントは選択された要素とその親要素もキャプチャするため、スパン要素またはボタン要素のクリックは引き続きPendoによってキャプチャされます。しかし、href属性はキャプチャされたイベントに含まれません。
<div class="payment">
<a href="https://acme.com/patient/id/ExamplePII/submitpayment">
<button class="payment-button">
<span>Submit Payment</span>
</button>
</a>
<a href="https://acme.com/patient/all-invoices">
<button class="cancel-button">
<span>Cancel</span>
</button>
</a>
</div>pendo-ignoreの例
この例では、コードは最初のボタン要素のみを無視します。「決済する（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>