任意の要素がスクロール表示されたらサポートアクションを表示する
接客サービスでのスクリプト配信とサポートアクションのカスタムイベントトリガー（任意のイベント）機能を利用し、「任意の要素がスクロール表示されたらサポートアクションを表示する」施策を配信する方法を記載します。
カスタムイベントトリガー（任意のイベント）の詳細な説明はこちらをご確認ください。
できること
このTipsに記載されている設定をすることで、例えば以下のような施策配信が可能になります。
- パスワード入力欄が画面に表示されたら入力ルールの説明を表示する
カスタムイベントの「ページ上の要素を指定」と違い、ページ上に要素が存在する状態に加え、ユーザーのスクロールなどによって要素が画面に表示されたら（ユーザーの目に触れる状態になったら）サポートアクションを表示することができます。
これにより、ユーザーが今見ているものに対して補助をすることができるため、顧客体験の向上につながります。
設定
接客サービス
以下の設定をサポートアクションを配信したい対象のページに配信します。
対象ユーザーや対象アクションなどは任意の設定を入れてください。
まず、接客サービスの立ち上げからアクション選択画面を表示し、「スクリプトを実行する」を選択します。
その後任意のテンプレートを選び（ここでは「カスタムイベント発生スクリプト」を選択しています）、アクションの編集画面に遷移します。
アクション編集画面から画面上部の「カスタマイズ」タブを選択し、カスタムエディタを表示します。
エディタの内容を以下のように変更します。
【スクリプト】
以下のスクリプトをエディタの「Script」タブに上書きしてください。
setTimeout(function() {
// ターゲット要素の選択
var targetElement = document.querySelector("#{selector}");
var textValue = targetElement.textContent || targetElement.innerText;
// 画面の下部X%の範囲
var threshold = 1 - (#{ratio} / 100); // Xは任意の割合（0~100）
// IntersectionObserverのコールバック関数
var callback = function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// ターゲット要素が指定範囲に入ったときの処理
tracker.track("#{eventName}", { selector: "#{selector}", text: textValue})
// ここに任意の処理を記述
}
});
};
// IntersectionObserverのオプション
var options = {
root: null, // ビューポートを基準にする
rootMargin: "-#{ratio}% 0px 0px 0px", // 画面の下部X%分の範囲を指定
threshold: threshold
};
// IntersectionObserverのインスタンスを作成
var observer = new IntersectionObserver(callback, options);
// ターゲット要素を監視
observer.observe(targetElement);
}, #{sec} * 1000); // 任意の秒数経過後に実行
【ユーザー変数】
以下の設定をエディタの「変数」タブに上書きしてください。
- CSSセレクタ
- 変数名：selector
- 値：起点にしたい任意の要素のCSSセレクタ
- 表示名：対象のCSSセレクタ
- 判定割合
- 変数名：ratio
- 値：50 （もしくは任意の0~100の値）
- 表示名：対象のCSSセレクタ
- 説明：0~100の数値で設定。要素が画面の何%の位置まできたら表示とみなすか（0が画面最下部、100が画面最上部）
- 起動までの秒数
- 変数名：sec
- 値：3（もしくは任意の数字）
- 表示名：実行開始時間（秒）
- 説明：0以上の整数値で設定。スクリプト配信後何秒経過したら実行するか
- イベント名
- 変数名：eventName
- 値：任意のイベント名
- 表示名：カスタムイベント名
設定変更ができたら保存し、一度テスト配信などでカスタムイベントが配信されていることを確認してください。
サポートアクション
サポートアクションの設定はカスタムイベントトリガー以外に特別なものはありません。
ポップアップなどの表示したいステップを設定した上で、配信開始ステップの「任意のイベント」から先ほど登録したイベントを呼び出します。
注意事項
今回はスクリプトから発火させたカスタムイベントを利用するため、まず一度接客サービスのスクリプトを配信しイベントをKARTEに検知させる必要があります。
検知していないイベントはカスタムイベントトリガーで選択することができないためです。
また、この施策では「もともと画面に存在している（ページ下部にあるような）要素がスクロールで表示領域に出てきた場合」を想定しているため、モーダルやポップアップなどのユーザーが何らかの動作をした際に表示されるコンテンツの検知はできません。
そういったケースの場合、カスタムイベントの「ページ上の要素を指定」をご利用下さい。