※このハンズオンは、JavaScriptに慣れた方が読むことを想定して書かれています。

Webサイトやネイティブアプリに配信されるWidgetタイプのアクションのカスタマイズを試してみましょう。この応用編では、実際のアクションを編集する中で、次のような機能を体験します。

  • リストレンダリング
  • input要素とのデータバインディング
  • イベント発火
  • プリセット変数

なお、次の「基礎編」の内容を前提としています。

Widgetをカスタマイズしてみよう(基礎編) | レシピ / スターターマニュアル / ハンズオン | KARTEサポートサイト

接客サービスをテスト配信する

まず、題材となるアクションをテスト配信するための接客サービスを作成します。
接客サービスのテスト配信の手順がわからない場合は、こちらの記事を参考にしてください。
特定ユーザーにのみテスト配信することはできますか?
(必ず、テストセグメントに限定して配信するようにしてください。)

  • [アクションを追加]します
  • テンプレート選択画面の検索ボックスで「上部画像」と検索します
  • [上部画像+テキスト+ボタン] というテンプレートを選択します

null

テスト配信の設定を完了し、Webサイト上でテンプレートがそのまま自分に配信できることを確認します。

表示されない場合は、次の設定を確認します。

  • アクションの配信率が100%になっているか?
  • 同時配信がOKになっているか?
  • 自分がテストセグメントに入っているか?

なお、この記事で実施するカスタマイズの内容の一部は、プレビュー画面でも確認できます。

「注意点」を複数登録できるようにする

静的変数にカンマ区切りで設定した複数の注意点を、箇条書きで表示してみましょう。

  • [カスタマイズ > 変数 > 静的変数]を開きます
  • [変数の追加]をクリックします
  • 追加した変数に、次のような設定をします
    • 変数名
      • cautions
    • 表示タイプ
      • テキスト
      • 押さない,駆けない,喋らない
    • 表示名
      • 注意点(カンマ区切り)
  • JSの冒頭に下記を追加し、設定した文字列を配列化して動的変数cautionsに追加します
var cautions = '#{cautions}'.split(',');
widget.setVal('cautions', cautions);
  • 配列が格納された動的変数を使って、リストレンダリングします
    • descriptionの直後に次のulタグを挿入します
    • krt-forで、配列の要素数だけHTML要素を出力できます
<div class="karte-temp-description">#{description}</div>
<!--ここから追加-->
<ul>
    <li krt-for="caution in cautions">{{caution}}</li>
</ul>
<!--ここまで追加-->
  • Scriptタブ最下部の[アクション再実行]をクリックします
    • 今後表示が崩れた場合も、都度[アクション再実行]をクリックしてください
  • 注意点が箇条書きで表示されることを確認します

null

  • アクションを[保存]します

ユーザー入力と変更検知

  • ボタンの直前のHTMLに、次のようにinput要素を追加します
    • krt-modelで、動的変数favorite_foodをバインディングできます
<!--ここから追加-->
好きな食べ物は? <input type="text" krt-model="favorite_food">
<!--ここまで追加-->
<a class="karte-temp-btn karte-temp-hover" href="#{link}">#{btn}</a>
  • JSの冒頭に、次の処理を追加します
    • widget.onChangeVal()で、動的変数の変更時に実行される関数を登録できます
widget.setVal('favorite_food', '');
widget.onChangeVal('favorite_food', function(v) {
    console.log('favorite_food: ', v.newVal);
});
  • Scriptタブ最下部の[アクション再実行]をクリックします
  • プレビュー内でinput要素に文字を入力すると、ブラウザのコンソールにログが出力されることを確認します

null

null

  • アクションを[保存]します

ボタンクリック時にイベント発火

  • HTML内のaタグを次のように書き換えます
<!--before-->
<a class="karte-temp-btn karte-temp-hover" href="#{link}">#{btn}</a>

<!--after-->
<a class="karte-temp-btn karte-temp-hover" href="javascript:void(0);" krt-on:click="trackEvent">#{btn}</a>
  • JSに、次のようなtrackEventメソッドを追加します
    • tracker.track()で、ユーザーに対してイベント発火することができます
    • プリセット変数#{campaign_id}で接客サービスIDを参照することができます
widget.method('trackEvent', function() {
    widget.hide();
    tracker.track('test', {
        campaign_id: '#{campaign_id}',
        favorite_food: widget.getVal('favorite_food')
    });
});
  • アクションを[保存]します
  • 実配信で表示し、次のように操作します
    • KARTE Action Viewerを表示
    • input要素に適当なテキスト入力
    • ボタンをクリック
  • 次の点を確認します
    • testイベントが飛ぶこと
    • campaign_idと、input要素に入力した値が含まれていること

null

補足

  • アクション内からtracker.track()を実行した場合、発生するイベントには下記のようなフィールドがデフォルトで追加されます
    • 接客サービスID
      • _system.message.campaign_id
    • アクションID
      • _system.message.shorten_id

関連ドキュメント

Widgetの主な機能については、下記ガイドでも紹介しています。

Widget APIでアクションをカスタマイズする

また今回紹介した機能のリファレンスは、下記の通りです。