データ収集におけるHTML属性

最終更新日: 2023年08月07日 03:47

この記事では、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エージェントを設定することもできますが、その場合、フィーチャーのタグ付けが難しくなる可能性があります。

カスタムHTML属性

すでに収集されているデフォルトの属性に加えて、Pendo用のカスタムHTML属性を追加してイベントの生データを記録することができます。これには、デフォルトでは収集されない訪問者、アカウント、イベントに関する特定の情報など、アナリティクスや自動化のテストに使用するカスタム属性も含めることが可能です。

注：カスタム属性はPendoのアナリティクスのみに影響します。Pendoガイドにおける要素のターゲティングは、DOM全体を読み込み、ガイドのターゲティングに使用するために識別されるカスタム属性には依存しません。

以下の例では、フィーチャーのタグ付けのためにデフォルトで使える属性は、class="block-list"だけです。このクラスは、ページやアプリをとおして固有のものではない可能性があり、ある固有のフィーチャーを切り分ける必要がある場合には、十分に特定できないかもしれません。

<a class="block-list" target="_blank" data-id="1.0-Nav-Home.Dashboard">

上記の例ではdata-idという追加の属性が含まれています。この属性には、コンテンツの特定に役立つ要素が含まれています。具体的には、この<a>タグのdata-idの値が1.0-Nav-Home.Dashboardであるという点です。

PendoにカスタムHTML属性を追加して、この情報を追跡することができます。

カスタムHTML属性を追加する

Pendoエージェントバージョン2.3.0以降を使用するPendo管理者ユーザーは、PendoにカスタムHTML属性を追加できます。カスタムHTML属性にアクセスする手順は、以下のとおりです。

［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
［アプリケーション（Applications）］タブを開きます。
［アプリケーション］リストから該当するアプリを見つけて開きます。
ページの上部にある［タグ付けとガイドの設定（Tagging and Guide Settings）］ タブを開きます。

次に、カスタム属性を追加する手順は、以下のとおりです。

［カスタムHTML属性（Custom HTML Attributes）］に追加する属性を入力します。
［+属性を追加（+ Add Attribute）］を選択します。

必要に応じて、［エージェント設定（Agent Settings）］タブからカスタムHTML属性を追加することもできます。

カスタムHTML属性を例にとると、data-id属性の収集を開始する場合、data-で始まり、ワイルドカード（*）のルールを含むすべての属性（data-*）を追跡します。つまり、data-で始まるすべての属性が記録されます。もしくは、data-idの特定の属性をターゲットにすることもできます。

Pendoは、設定で新しいカスタム属性を保存してから15～30分後に、イベントの生データで属性の収集を開始します。ルールでカスタム属性がタグ付けされたフィーチャーは、カスタム属性が追加された時点よりも前に遡って分析することはできません。Pendoは、お客様がカスタム属性を特定するまで、イベントの生データでカスタム属性を収集しません。

カスタムHTML属性による自動タグ付け（クローズドベータ版）

注：自動タグ付けは現在クローズドベータ版であり、一部のお客様にのみテスト提供されています。以下の情報は、誓約、保証、法的義務を伴うものではありません。このセクションに記載されているフィーチャーの開発、リリース、およびタイミングは、Pendoの裁量により予告なく変更される場合があります。

カスタムHTML属性を追加すると、Pendoでフィーチャーを作成するための自動タグ付けを有効にできます。自動タグ付けにより、カスタムHTML属性に関連する要素がクリックされると、フィーチャーリストに新しいPendoフィーチャーが追加されます。

自動タグ付けを有効にする手順は、以下のとおりです。

［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
［アプリケーション（Applications）］タブを開きます。
［アプリケーション］リストから該当するアプリを見つけて開きます。
ページの上部にある［タグ付けとガイドの設定］タブを開きます。
［カスタムHTML属性による自動タグ付け（Automatic Tagging with Custom HTML Attributes）］をオンに切り替えます。
フィーチャーの自動タグ付けに使用するカスタムHTML属性を選択します。

これを設定すると、自動的に作成されたフィーチャーがPendoのフィーチャーリストに表示され、［タイプ（Type）］列の下に［自動（Automatic）］というラベルが付けられます。ページ上部のドロップダウンメニューを使用して、［タイプ］別にフィーチャーをフィルタリングできます。

デフォルトでは、自動的に作成されたフィーチャーは［サイト全体（Sitewide）］に設定されます。これは、ビジュアルデザインスタジオ（Visual Design Studio）を使用して作成されたフィーチャーと同様に編集できます。フィーチャーを編集するには、［フィーチャー］テーブルから該当するフィーチャーを選択します。これにより、フィーチャーの詳細ページが開き、名前、プロダクトエリア、アプリケーション、ページ情報、およびタグ付けルールを編集できるようになります。

特定の要素の追跡を除外する

個人を特定できる情報（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>

カスタムHTML属性とTagging Aid

Pendo Tagging Aidは、Pendoプロフェッショナルサービスチームが構築・保守するChrome拡張機能で、タグ付けしようとしているUI要素のHTMLや属性により関連性の高いフィーチャータグを作成するのに役立ちます。フィーチャータグの作成については、フィーチャーのタグ付けと表示および高度なフィーチャーのタグ付けを参照してください。

Pendo Tagging AidでカスタムHTML属性がグレー表示されている場合、いくつかの追加設定を行わないとタグ付けルールで使用することはできません。

これは次の2つのステップで行います。まず、Pendo管理者ユーザーは、本記事のカスタムHTML属性の追加にあるように、PendoのサブスクリプションにカスタムHTML属性が追加されていることを確認します。

次に、カスタムHTML属性を使用するTagging Aidユーザーは全員、以下の手順を行う必要があります。

Tagging Aid Chrome拡張機能で、ツールの下部にある設定の歯車アイコンを開きます。
管理者がPendoサブスクリプションに追加したカスタムHTML属性名を追加します。追加するカスタムHTML属性が複数ある場合は、別々の行に追加するか、カンマで区切って追加します。
［属性を保存（Save Attributes）］を選択し、［X］を選択して設定を終了します。

このステップが必要なのは、Tagging Aid拡張機能がPendoサブスクリプションと通信して、管理者ユーザーによって追加されたカスタムHTML属性が正常に構成されているかどうかを判断できないためです。

よくある質問

エージェントをセルフホストする場合、カスタムHTML属性の収集を開始するにはどうすればよいですか？

Pendoエージェントは、どの要素をイベントの生データに保存するかを制御します。インストール設定を含むサブスクリプションおよびアプリ設定の変更は、一般的にエージェントの機能に影響を与えます。エージェントがセルフホスト型の場合、最新の変更を有効にするためには、設定変更後にエージェントをダウンロードしてインストールする必要があります。エージェントがセルフホストでない場合、ユーザーがPendoを初期化したときにダウンロードされるエージェントには、現在のサブスクリプション設定が自動的に含まれます。

PendoがカスタムHTML属性を提案しないのはなぜですか？

タグ付けしようとしているカスタム属性が、Pendoの動的フィルタリングアルゴリズムによって除外されている可能性があります。動的フィルタリングは、デザイナーを開くたびにデフォルトでオンになります。ビジュアルデザインスタジオ（Visual Design Studio）の動的フィルタリングをオフにするには、デザイナーの下部にある折りたたみ可能な［設定（Settings）］セクションの下にあるトグルを使用します。デザイナーを起動するたびに動的フィルタリングを能動的にオフにする必要があります。これにより、動的セレクタのタグ付けを回避することができます。動的セレクタの詳細については、フィーチャーのタグ付けと表示を参照してください。