この記事では、訪問者がアプリのフィーチャーを操作したときにコンテキストデータを収集できるカスタムイベントプロパティの一種であるクリックイベントプロパティの使用方法について説明します。クリックイベントプロパティは、インタラクションの瞬間に追加の詳細を収集し、開発者のリソースやトラックイベントを必要とせずに、Pendoでより正確なセグメントと分析をサポートします。
サブスクリプション管理者は、CSSセレクターまたはJavaScriptを使用して、各フィーチャーに最大5つのクリックイベントプロパティをタグ付けできます。これらのプロパティは、ビジュアルデザインスタジオでプロパティが追加された後に訪問者がタグ付き要素を選択した場合にのみ収集されます。
重要：クリックイベントプロパティは、Web SDKでテキスト収集が無効になっている場合でも、ユーザーが入力した値を含み表示されたUIテキストを収集できます。アプリに表示される内容によっては、個人を特定できる情報が公開される可能性があります。Pendoは、管理者がフィーチャーに対して明示的にタグ付けした後にのみ、クリックイベントプロパティデータの収集を開始します。
ユースケース
クリックイベントプロパティは、Pendoのアナリティクスに表示されないコンテキストの詳細を収集するのに役立ちます。これらは、ユーザー入力やシステムの状態に応じて画面上の値が変化するワークフローで特に役立ちます。
一般的なユースケースには、以下のようなものがあります。
- フォームが送信された際にドロップダウンまたはテキストフィールドの値を収集。
- カートに追加された項目の名前またはSKUを識別。
- 訪問者が送信ボタンを使用した際に検索バーから検索用語を収集。
- ボタンをクリックした時点でアクティブな選択フィルターまたはオプションを保存。
クリックイベントプロパティは、セグメントやデータエクスプローラで特定の値で分析をフィルタリングまたはグループ化するためによく使用されます。収集された値はフィーチャーの詳細ページでも閲覧できます。
要件
下記の手順に進む前に、以下の要件に注意してください。
- クリックイベントプロパティを有効化してタグ付けするためのサブスクリプション管理者権限。
- Web SDKバージョン2.45.0以降。
クリックイベントプロパティがタグ付けされると、Pendoユーザーであれば誰でもクリックイベントプロパティを使ってセグメントを作成したり、データエクスプローラレポートを実行したりできます。サブスクリプションでは、トラックイベントプロパティを含む、最大10,000個の個別のカスタムイベントプロパティキーを持つことができます。
クリックイベントプロパティを有効にする
クリックイベントプロパティをオンまたはオフにするには、［設定（Settings）］ > ［サブスクリプション設定（Subscription Settings）］に移動し、［情報（Information）］セクション内の［クリックイベントプロパティ（Click event properties）］のチェックボックスを選択します。この設定は、サブスクリプション内のすべてのアプリのクリックイベントプロパティを制御します。
サブスクリプションを有効にするには、空のチェックボックスを選択し、開示内容を読み、クリックイベントプロパティを有効にするかどうかを決定します。［理解しました（I understand）］と入力して確認し、［有効にする（Enable）］を選択します。
有効にすると、Pendoの管理者は、Visual Designed Studio（ビジュアルデザインスタジオ）でフィーチャーにタグを付ける際に、クリックイベントプロパティにタグを付けることができます。
クリックイベントのプロパティを無効にする必要がある場合は、［クリックイベントプロパティ］チェックボックスを選択し、確認ダイアログで［無効にする（Disable）］を選択します。 この変更は、サブスクリプションのすべてのアプリに影響します。
クリックイベントプロパティをオフにすると、クリックイベントプロパティのデータ収集がすべて停止し、Pendo UIからクリックイベントプロパティが削除されます。ただし、以前に収集されたデータは引き続き表示されます。クリックイベントプロパティを再度有効にすると、データ収集と以前にタグ付けされたクリックイベントプロパティに対するアクセスが再開されますが、無効にしたクリックイベントプロパティに対する遡及分析は行われません。
注：クリックイベントプロパティデータを永久に削除したい場合は、Pendoサポートに連絡してください。
クリックイベントプロパティを追加する
ビジュアルデザインスタジオで新しいフィーチャーにタグを付けたり既存のフィーチャーを編集したりするときに、クリックイベントプロパティを追加できます。各フィーチャーに対して、最大5つのイベントプロパティをタグ付けすることができます。
注：クリックイベントプロパティは、同一フレーム内でのみサポートされます。 プロパティが設定されているフレームの外でクリックイベントが発生した場合、値は収集されません。
- ［プロダクト（Product）］>［フィーチャー（Features）］に移動し、［フィーチャーのタグ付け（Tag Features）］を選択します。
- アプリのURLを入力し、［並べてタグ付けする（Tag side-by-side）］または［オーバーレイでタグ付けする（Tag in an overlay）］のいずれかのタグ付けモードを選択します。
- ［デザイナーを起動（Launch Designer）］を選択し、ビジュアルデザインスタジオを開きます。
- イベントプロパティを定義するフィーチャーがまだタグ付けされていない場合は、［フィーチャーをタグ付け（Tag Feature）］を選択し、アプリで適切な要素を選択します。選択したら、ステップ6に進みます。より詳細なタグ付けのガイドラインについては、フィーチャーのタグ付けと表示を参照してください。
- イベントプロパティを定義したいフィーチャーがすでにタグ付けされている場合は、［タグ付けされたフィーチャー（Tagged Features）］を選択し、関連するフィーチャーを見つけて、フィーチャー名にカーソルを合わせて編集アイコンを選択します。
- ウィンドウの下部にある［イベントプロパティ（Event Properties）］ドロップダウンを選択し、［＋イベントプロパティ（+ Event Properties）］を選択します。
- 収集する属性の名前を入力します。これは必須フィールドで、すべてのアプリで一意である必要があります。以下に、命名に関するヒントをいくつか挙げます。
- 名前には小文字、数字、またはアンダースコアのみを使用する必要があり、 __name__のように2つのアンダースコアで開始または終了することはできません。この形式の場合、エラーメッセージが表示されます。
- 「Language selector」のように複数の単語を使用しているフィーチャーは、「language_selector」と入力してください。
- 異なるアプリで「country」のように同じ属性名を使用している場合、複数のアプリのデータを適切にレポートできるように、「app1_country」のように、イベントプロパティにはそのアプリに対応した固有の名前を付けるようにします。
- 次に、ソースにタグ付けします。CSSターゲティングを使用して値のプロパティを絞り込むか、［詳細（JS）（Advanced (JS)）］を選択してJavascriptを使用し、プロパティを直接指定します。値にはタグ付けされたフィーチャーまたはターゲットのCSS要素で使用可能なプロパティのリストが表示されます。以下で、いくつかのヒントを紹介します。
- ブラウザの開発者向けコンソールの使用に慣れていない場合は［標準（CSS）（Standard (CSS)）］を使用して要素をターゲットにすることをお勧めします。このオプションを使用すると、入力フィールドなどの適切なプロパティを簡単に選択できるからです。カスタムCSSのタグ付けに関する詳細は、高度なフィーチャーのタグ付けを参照してください。
- 入力フィールドのプロパティを収集している場合、実際のフィールドに何かが入力されると、プレビューでドロップダウンに収集されるものが表示されるので、正しい値を選択するのが簡単になります。
- ［value］や［innerText］などの最も一般的に使用される値オプションは、リストの上部に表示されます。収集したいものに一致するプレビューを提供するオプションを選択します。
-
［要素の値を選択（Select a value for the element）］フィールドは、選択されたプロパティに対する修飾子をサポートしています。たとえば、innerTextは要素に含まれるテキストを返し、innerText.lengthではテキストの文字数が返されます。
- テキスト収集の一般的な要素の値は、innerTextまたはtextContentです。
- ［詳細設定（JS）］オプションを使用する場合は、ウィンドウオブジェクトのプロパティを参照する値へのパスを指定する必要があります。関数を呼び出すことはできません。値はすでに入力されているはずです。
- プレビューを表示して、選択した属性によって収集された値の例を確認します（その時点でビジュアルデザインスタジオに表示されている場合）。
- イベントプロパティを保存するには、［適用（Apply）］を選択します。イベントプロパティ名は、［フィーチャーを編集（Edit Feature）］ウィンドウに既存のイベントプロパティとして入力されます。
次のサンプル画像では、クリックイベントプロパティとして#add-new-select-typeを収集するように［タイプ（Type）］フィールドを設定すると、訪問者が［新規追加（Add New）］フォームを送信した後にこのドロップダウンの選択が取得されます。
- フィーチャーに別のイベントプロパティを追加するには、ステップ6～10を繰り返します。各フィーチャーに対して、最大5つのイベントプロパティを追加できます。
- 必要なクリックイベントプロパティをすべて追加したら、［保存（Save）］もしくは［変更を保存（Save Changes）］を選択し、追加したイベントプロパティのデータ収集を開始します。
注：512バイトを超える値は、Pendo UIにevent properties JSON too largeと表示されます。この制限は、単一のイベントプロパティの値ではなく、JSONのプロパティ全体に適用されます。サブスクリプションでは、トラックイベントプロパティを含む、最大10,000個の個別のカスタムイベントプロパティキーを持つことができます。
既存のクリックイベントプロパティを編集もしくは削除する
ビジュアルデザインスタジオでタグ付けされたフィーチャーを編集するときに、上記で確認したのと同じ［イベントプロパティ］セクションからクリックイベントプロパティを編集または削除できます。
- 関連するイベントプロパティの横にある編集アイコンを選択して詳細を開き、必要な変更を加えます。
- 関連するイベントプロパティの横にある削除アイコンを選択すると、永久に削除されます。イベントプロパティを削除すると、そのデータはアナリティクスで利用できなくなります。
誤って削除してしまった場合は、［元に戻す（Restore）］を選択して、削除を元に戻します。このオプションは、変更を保存すると使用できなくなります。
イベントプロパティを編集または削除した後は、［変更を保存（Save Changes）］を選択してフィーチャーを更新します。
イベントプロパティを分類する
正確なセグメンテーションとレポーティングを行うためには、イベントのプロパティを正しく分類することが不可欠です。クリックイベントのプロパティでは、ブール値、リスト、数値、文字列、時刻/日付を含むすべてのデータ形式がサポートされています。デフォルトでは、クリックイベントプロパティは文字列として収集されます。
イベントプロパティのフィールドタイプを変更すると、PendoがUIでその値をどのように解釈するかを定義することになります。以下はその例です。
- プロパティを数値に変更すると、［次のものより大きい（greater than）］や［次のものより小さい（less than）］」といったフィルタリングロジックをサポートできます。
- プロパティをリスト に変更すると、［次のものを含む（contains）］や［次のものを含まない（does not contain）］といったオプションを使用できるようになります。
この調整は、レポートやセグメントでプロパティを操作する方法に影響しますが、バックエンドの基になるデータは変更されません。
データの誤解を避けるため、［設定（Settings）］>［イベントプロパティ（Event Properties）］でプロパティにタグを付けた直後に適切なフィールドタイプを設定してください。
すべてのカスタムイベントプロパティは、［イベントプロパティ］ページで検索および分類できます。イベントプロパティの名前を選択すると、それに関連付けられているフィーチャーまたはトラックイベントが表示されます。
イベントプ属性の種類を更新するには、テーブルで関連するイベントプロパティを見つけて、［タイプ（Type）］列で対応するドロップダウンメニューを選択し、ドロップダウンリストから正しい分類値を選択します。
重要：最初に正しいカテゴリーを選択するようにしてください。カテゴリーを変更すると、それまでに収集したプロパティデータが上書きされます。このため、初めてタグを付けた直後にイベントプロパティを適切に分類することをお勧めします。
クリックイベントプロパティを含むセグメント
クリックイベントプロパティにタグ付けした後、これをセグメントに追加するには、Pendoの任意の場所でセグメントビルダーを開き、以下の手順に従います。
- 必要に応じて［名前（Name）］と［可視性（Visibility）］を更新します。
- ［+ルールを追加（+Add Rules）］を選択し、［フィルター条件（Filter by）］で［フィーチャー（Feature）］を選択します。
- ［フィーチャーを選択（Select Feature）］ドロップダウンメニューを開き、クエリを実行するクリックイベントプロパティに関連付けられているフィーチャーを選択します。
- ［クリック数（Number of Clicks）］を指定します。一定期間内にそのフィーチャーを操作したすべての訪問者をセグメント化する場合は［1以上（greater or equal to 1）］に設定します。
- フィーチャーがクリックされた日付範囲を指定し、 ［+イベントプロパティを使用（+ Use Event Property）］を選択します。
- ドロップダウンメニューからイベントプロパティを選択し、［オプションを選択（Select Option）］ドロップダウンメニューから適切な値を選択します。
- ［セグメントを作成（Create Segment）］をクリックしてセグメントを保存します。
レポートでクリックイベントプロパティのデータを表示する
データエクスプローラでクリックイベントプロパティの値をクリックすると、使用状況データをフィルタリングおよびグループ化できます。 データエクスプローラでイベントプロパティデータを使用する方法について詳しくは、イベントプロパティとデータエクスプローラに関する記事を参照してください。
よくある質問
クリックイベントプロパティとトラックイベントプロパティの違いは何ですか？
クリックイベントプロパティとトラックイベントプロパティでは、関連付けられているイベントの種類が異なります。主な違いは以下のとおりです。
- クリックイベント：［送信（Submit）］ボタンやメニュー選択などのフィーチャーのクリックに関連します。フィーチャーはビジュアルデザインスタジオでタグ付けする必要があります。フィーチャーをクリックした時点でプロパティが取得されます。
- トラックイベント：APIコールやエラーなど、カスタム時点のイベントに関連します。トラックイベントは開発者が設定する必要があります。プロパティはプログラムで取得されます。詳細については、トラックイベントを参照してください。
ガイドターゲティングに使用しているセグメントで、イベントプロパティを使用できますか？
現時点ではご利用いただけません。セグメントとガイドの対象について詳しくは、 セグメントをご覧ください。
クリックイベントプロパティは遡及的に分析できますか？
いいえ。ビジュアルデザインスタジオがタグ付けを行うまで、Pendoはクリックイベントプロパティを収集しません。これにより、機密データや個人データを除外して目的のプロパティを収集することができます。