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

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

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

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

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

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

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

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

テスト配信の設定を完了し、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タブ最下部の[アクション再実行]をクリックします
  • 今後表示が崩れた場合も、都度[アクション再実行]をクリックしてください
• 注意点が箇条書きで表示されることを確認します

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

ユーザー入力と変更検知

• ボタンの直前の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要素に文字を入力すると、ブラウザのコンソールにログが出力されることを確認します

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

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

• 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要素に入力した値が含まれていること

補足

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

関連ドキュメント

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

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

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

• krt-for
• krt-model
• widget.onChangeVal()
• tracker.track()
• プリセット変数