このハンズオンでは、Webに配信されるアクションのカスタマイズを試してみましょう。ここでは、JavaScriptによるカスタマイズの第一歩として、ページ上の要素をクリックしたときだけKARTEのポップアップを表示するように変更を加えてみます。
JavaScriptのカスタマイズが必要なケースを理解する
JavaScriptのカスタマイズで実現できることは多くありますが、最もよく使われるのは次のようなケースです。
- アクションを表示するかどうかの判定をしたい
- アクションを表示するタイミングを制御したい
前者については、接客サービスの対象ユーザー（セグメント等）や対象イベントの設定で柔軟に設定できます。
後者については、KARTEが提供するテンプレートでは、「一定時間たったら表示」や「スクロール率がある値を超えたら表示」といったよく使われる表示制御について、アクション編集画面のGUIで設定可能になっています。
ここで変更可能な表示設定については、JavaScriptを直接編集する必要はありません。
しかし、GUIで設定できないような複雑な表示制御については、基本的にはカスタマイズタブを開いてJavaScriptを直接編集する必要があります。
接客サービスをテスト配信する
まず、題材となるアクションをテスト配信するための接客サービスを作成します。
接客サービスのテスト配信の手順がわからない場合は、こちらの記事を参考にしてください。
「 特定ユーザーにのみテスト配信することはできますか？ 」
（必ず、テストセグメントに限定して配信するようにしてください。）
なお、アクションは [ユーザーに「見せる」> カード > 画像 + テキスト + ボタン] というテンプレートを使って作成しましょう。
テスト配信の設定を完了し、Webサイト上でテンプレートがそのまま自分に配信できることを確認します。
表示されない場合は、次の設定を確認します。
- アクションの配信率が100%になっているか？
- 同時配信がOKになっているか？
- 自分がテストセグメントに入っているか？
ページ上の要素のCSSセレクタを取得する
まずは、配信先のWebページでクリックさせる要素を決め、その要素のCSSセレクタを取得します。
Webページ上での操作
- テスト配信先のWebページを開きます
- 次の全ての条件に合致するような要素を選びます
- その要素をクリックしてもページ遷移などしない
- ページ読み込み以降、その要素は常に表示されている
- 選んだ要素のCSSセレクタをクリップボードにコピーします
- CSSセレクタの取得には、 KARTE Action Viewer を使うのが便利です
KARTE側の設定
- アクション編集画面のカスタマイズタブを開きます
- 右ペインのScriptタブを開き、次のJavaScriptを貼り付けます
// 変数selectorに、CSSセレクタを格納
var selector = 'コピーしたCSSセレクタ';
// 変数elementに、対象のHTML要素を格納
var element = document.querySelector(selector);
// 対象のHTML要素に、click時に実行される関数を登録
element.addEventListener('click', function() {
// widgetを表示
widget.show();
});- 2行目の
コピーしたCSSセレクタと書かれた部分を、先ほどクリップボードにコピーしたCSSセレクタで置き換えます - 「アクション再実行」ボタンをクリックします
- プレビュー画面で、CSSセレクタに対応する要素をクリックし、ポップアップが表示されることを確認します
- アクションを保存します
Webサイトでの表示確認
- ページ更新し、CSSセレクタに対応する要素をクリックしたときに初めてポップアップが表示されることを確認します
応用例
今回は「ページ上の要素をクリックしたとき」という条件でポップアップを表示してみました。この他にも、JavaScriptを使ってカスタマイズすることで、次のような表示制御を実現することができます。
- マウスポインタがある要素に重なったときだけ表示
- あるインプット要素にフォーカスが当たったときだけ表示
- ページ上に特定の要素が存在しているときだけ表示
以上で、アクションの簡単なカスタマイズを実現することができました。
KARTEでWebに配信されるほとんどのアクションは、JavaScriptを自由に書き換えて配信することができます。
注意点
「アクションのHTML/CSS/JavaScriptのカスタマイズをしたけど動きません」といった問い合わせは、チャットサポートの範囲外となります。
詳しくは チャットサポートポリシー をご参照ください。
ただし、KARTE自体の仕様に関するお問い合わせはお受けできます。
不明点があればお気軽にお問い合わせください。
次におすすめのハンズオン
より高度なカスタマイズを学ぶには、こちらのハンズオンがおすすめです。