このテンプレートを接客サービスで配信することで、ユーザーがページ上の任意の要素をクリックした際にイベントを送信する事ができるようになります。

こちらのテンプレートは、ポップアップやチャット、アンケートのようにユーザーの目に触れるようなアクションではなく、裏側でスクリプトを配信する形になっています。
そのため、その他の接客サービスと一緒に配信するような指定になっていたとしても重複して表示されることはございません。

利用するテンプレート

テンプレートの「スクリプト」に保存されている「指定要素をクリックした際に任意の属性値をイベント送信」のテンプレートを選択します。

機能について

概要

ユーザがページ上の指定の要素をクリックした際に、指定したイベント名のイベントをKARTEに送信するシンプルな機能です。
下記の項目を設定することで、KARTEがページ上の要素がクリックされたことを検知できるようになります。

設定項目

• CSSセレクタ(必須)
  クリック対象の要素のCSSセレクタ名を記載してください。
  class名を指定する場合は「.」を、id名を指定する場合は「#」を前につけます。
  複数指定する場合は「,」でつなげてください。
  ※内部ではquerySelectorAllを利用しておりますので一般的なCSSセレクタに対応しております。
  例: a, .thumbnail, #image, a, .thumbnail,.box .item,.test:nth-child(2)
• 送信するイベント名(必須)
  送信する任意のイベント名を指定します。
  例: click_link, click_thumbnail
• 送信する属性名
  イベントと一緒に送信する要素の属性名を指定します。
  例: <a href="https://example.com">

※属性とはHTMLの次のような記述のことを指します。
<要素名 属性="属性値">

送信されるイベントの形式

• 属性名の指定が無い場合
  tracker.track("イベント名");'
• 属性名の指定が有る場合
  tracker.track("イベント名", { "属性名": 属性値 });'

設定例

ユーザがページ上の画像リストの要素をクリックした際にイベントを送信するような場合
ページのHTMLの画像リスト部分が下記のようになっているとき

<li class="thumbnail" data-img="img_01"><img src='img_01_thumbnail.jpg'/></li>
<li class="thumbnail" data-img="img_02"><img src='img_02_thumbnail.jpg'/></li>
<li class="thumbnail" data-img="img_03"><img src='img_03_thumbnail.jpg'/></li>

• CSSセレクタ : li.thumbnail
• 送信するイベント名 : click_thumbnail
• 送信する属性名 : data-img

クリックで送信される値

• 1番目の要素をクリックした際
  tracker.track("click_thumbnail", {"data-img" : "img_01"})
• 2番目の要素をクリックした際
  tracker.track("click_thumbnail", {"data-img" : "img_02"})
• 3番目の要素をクリックした際
  tracker.track("click_thumbnail", {"data-img" : "img_03"})

イベントが取得されているか確認する

接客サービス作成後、テスト配信又はKARTE Action Viewerを利用しサイトで確認から指定要素クリック後に指定のイベント名で取得できているか確認してください。

この接客サービスの利用ポイント

この接客サービスは、

• サムネイル画像
• モダールウィンドウを閉じるボタン
• タブレイアウトの切り替えタブ
• コンテンツの「次へ」「前へ」

など、ページ遷移以外のユーザーアクションを拾う事が可能になります。

特定のアクションをしたユーザーをセグメントしたり、
接客サービスの対象イベントに指定することで、
ページ遷移やユーザー情報だけにとらわれずユーザーの体験を知り、新たなユーザー体験を提供する事が可能になります。

※ ページ遷移を伴う場合はこちらのテンプレートをご利用ください。