コンテキストイベントとは、ユーザーの行動を推測し、推測した行動の種類ごとにイベントを発生させる機能です。
機能の詳細はこちらの記事をご確認ください。

本記事では、画面の表示テキストに関するコンテキストイベントの設定方法と仕様を説明します。コンテキストイベント全般の設定方法についてはコンテキストイベント（β版） 各イベントの設定方法と仕様をご確認ください。

本機能は開発途中のβ版の機能です。
今後、機能の内容・仕様が大幅に変わったり、機能自体の提供を終了する可能性があります。
機能自体が終了する場合にはあらかじめアナウンス致しますが、使用される際はご注意ください。

表示テキストに関するコンテキストイベントは4種類（入力フォームエラー発生、検索結果0件、アイテム在庫なし、アイテム予約受付中）ありますが、設定方法と動作はすべて同じです。
画面に表示されたエラーメッセージや、検索結果数の文字情報を元に、ユーザーがどういった状況に直面しているかを把握するイベントです。

表示テキストに関するイベントに共通の設定

以下が共通の設定項目です。

• CSSセレクターで取得
  テキストが表示される要素を、CSSセレクターで指定します。
  指定するCSSについては、計測したい要素の親要素を指定しても計測可能です。
  後述のテストコードを使うと、ある要素を指定したときにどんなテキストがとれるかわかるので、まずは一度指定してみてから、後で調整するのがおすすめです。

• テキスト値と判定方法
  「CSSセレクターで指定した要素」のテキストが、どんな値のときにイベントを発火させたいか指定します。
  例えば、

  • 入力フォームエラー発生イベントの場合は、画面上は「XX欄にエラーがあります」と表示されることが多いので、下記のように指定することで、項目名の違いを吸収できます。
    • テキスト値： 「エラーがあります」
    • 判定方法： 「部分一致」
  • 検索結果0件イベントの場合は、画面上の表示と合わせたいので下記のように完全一致で指定します。
    • テキスト値： 「0件」
    • 判定方法： 「完全一致」

• 繰り返しチェック

  • OFFの場合は、画面表示時に一度だけテキストの値をチェックします。画面遷移の最初にもう結果が分かっている「検索結果数」をチェックしたい場合はOFFで大丈夫なケースが多いです。
  • ONの場合は、画面表示後もテキストの値をチェックします。画面遷移をはさまずに表示内容が変わる「入力した値に応じて表示されるエラーメッセージ」を捕捉したい場合はONにします。

設定確認とテストコード

設定を保存すると、下記のように、設定した項目とテストコードが表示されます。

このテストコードは、ChromeのDevTools等、ブラウザ上でスクリプトを実行できる場所で実行していただくことで、この設定で該当ページのどの場所がCSSセレクターで指定できているかと、その要素の文字列が設定と合致するかが確認できます。

• 対象となる要素
  「CSSセレクターで取得」で指定した要素が画面上にいくつあるか。1つ以上あることを確認してください。

• 各要素のテキストの判定結果

  • 1行目は対象となった要素自体です。ホバーして、意図した場所になってるか確認してください
  • 2行目は「 (該当要素のテキスト内容)」：(合致 or 合致しない) です。合致になっていることを確認してください。合致しないになっている場合は、テキスト内容を確認し、設定を見直してください。

ChromeのDevToolを使う場合のテストコード実行方法は下記のとおりです。

1. 動作を確認したいページ（例：アイテムクリックの設定の対象ページ）をChromeでひらく
2. ChromeのDevToolを起動し、Consoleを開く
3. テストコードをコピーし、Consoleに貼り付ける
4. 結果がConsoleに表示される

注意事項

関連記事

• コンテキストイベント（β版） | ドキュメント / ユーザー / イベント | KARTEサポートサイト