Widgetをカスタマイズしてみよう（応用編）

アクション

2026/07/16

この記事は基礎的なHTML/CSS/JavaScriptの知識が必要です

※このハンズオンは、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でアクションをカスタマイズする

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

目次