このテンプレートは、ユーザーがページ上の指定の要素にマウスを乗せた（hoverした）際にイベントを送信します。接客サービスで配信すると、クリックやページ遷移を伴わないユーザーの関心を可視化できます。

注意点

タッチデバイスでの検知について

このテンプレートは、マウスのポインタが要素に入ったこと（mouseenter）を検知します。

mouseenterはマウス操作を前提としたイベントです。そのため、スマートフォンなどのタッチデバイスではhover相当の挙動がなく、意図通りに計測できない場合があります。

同一要素への複数hoverの挙動について

検知は配信中ずっと有効です。そのため、同じ要素に何度hoverしても、その都度イベントを送信します。イベント数が多くなる可能性があるため、計測対象の要素は必要な範囲に絞ることをおすすめします。

利用するテンプレート

テンプレートの「スクリプト」から「指定の要素をhoverしたらイベントを送信する」を選択します。

設定項目

本テンプレートを配信する前に、接客詳細画面から「CSSセレクタ」と「イベント名」の設定が必要です。

CSSセレクター（必須）

hoverの検知対象にする要素のCSSセレクター名を記載してください。class名を指定する場合は「.」を、id名を指定する場合は「#」を前につけます。

複数指定する場合は「,」でつなげてください。

※内部でquerySelectorAllを使用しているため、一般的なCSSセレクターを利用できます。

例: a, .thumbnail, #image, a, .thumbnail,.box .item,.test:nth-child(2)

イベント名（必須）

送信する任意のイベント名を指定します。

例: hover_link, hover_thumbnail

送信するイベントの形式

tracker.track("イベント名");

このテンプレートは、要素にマウスが乗った（mouseenter）タイミングでのみイベントを送信します。要素からマウスが外れた（hoverが解除された）タイミングではイベントを送信しません。

設定例

ページのHTMLに以下のようなツールチップがあるとします。このツールチップへのhoverでイベントを送信する設定例は、次のとおりです。

<span class="tooltip-icon" data-tooltip="配送について"></span>

  • 入力する設定値

    • CSSセレクター : .tooltip-icon

    • 送信するイベント名 : hover_tooltip

この設定では、ツールチップアイコンにマウスが乗った際に以下のイベントを送信します。

tracker.track("hover_tooltip")

イベントを取得できているか確認する

  1. 接客サービスを作成します。

  2. テスト配信またはKARTE Action Viewerを利用してサイトを表示します。

  3. 指定した要素にマウスを乗せます。

    指定のイベント名でイベントが取得できているか確認できます。

このテンプレートの利用ポイント

特定の要素にhoverしたユーザーをセグメントとして抽出できます。接客サービスの対象イベントに指定すれば、クリックに至る前の関心を起点にした接客が可能になります。

活用例

  • 購入前に迷っているユーザーに背中を押したい：商品サムネイルや価格表示へのhoverを計測し、その商品のクーポンや関連商品を提案するポップアップを表示する

  • 疑問を持ったタイミングでフォローしたい：配送・返品に関するツールチップへのhoverを計測し、詳細情報や問い合わせへの導線を表示して購入の不安を解消する

  • 興味のあるカテゴリに合わせた接客をしたい：ナビゲーションメニューやドロップダウンの特定カテゴリへのhoverを計測し、そのカテゴリの特集ページへ誘導するバナーを表示する

補足

このテンプレートは裏側でスクリプトを配信するため、ポップアップやチャットのようにユーザーの目に触れるアクションではありません。そのため、他の接客サービスと同時に配信しても重複して表示されることはありません。