こんにちは、Customer EngineerのMasamichiです！この度のソリューションブログは、私がインターン生として寄稿する最後の記事となります。PLAID Solution Blogをいつもご愛読いただいている皆様に、心より感謝申し上げます。

さて、一般的なサイトページでは、企業が全ユーザーに対してお知らせするタイプの通知が使われています。しかし、前述のような従来の通知配信では個々のユーザーに適した情報を配信するということは少し難易度が高いです。そこでKARTEで、Webサイト上でユーザー毎にパーソナライズされた通知を一覧表示することで、適切な情報だけをユーザーに届けることができます。

ということで今回は、アクションテーブルとCraft kvsを使って通知のInbox機能を実現する方法について解説します！

全体像

処理の流れ

処理の流れは下図の通りです：
craftkvsでinbox機能を実装.jpg

アウトプットイメージ

最終的なアウトプットイメージは次の通りです。
スクリーンショット2024-02-2618.56.15.png

画面右下を見てもらうと、通知がInboxに表示されていることがわかります。

実装手順

実装は以下の手順で進めていきます。

APIv2アプリを作成する
APIv2 アプリのアクセストークンをCraft Secret Manager に登録する
アクションテーブルを作成する
Craft Functionsのファクションを作成する
Craft Functionsのエンドポイントを作成する
通知配信用のCraft接客サービスを作成する
Inbox表示用の接客サービスを作成する

1. APIv2アプリを作成する

KARTEのAPIを利用するために、API v2アプリを作成します。

[ストア > API v2設定] からアプリを新規作成
[アプリタイプ] を token に設定
必要なscopeを追加
- beta.action.actionTable.records.upsert
アプリを保存し、一度だけ表示されるアクセストークンをメモしておく

2. APIv2 アプリのアクセストークンをCraft Secret Manager に登録する

API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。

[Craft > シークレット] からシークレットを新規作成
[名前] に、わかりやすい名前を入力
メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成
シークレット名をメモしておく

3. アクションテーブルを作成する

通知の詳細データをレコードとして登録するためのアクションテーブルを作成します。手順は以下の通りです。

[Action > アクションテーブル > 作成 > 空のテーブルを作成]からアクションテーブルを新規作成
アクションテーブルID: 任意の文字列を指定
主キー: campaign_id(文字列)を指定
権限に「widgetからの参照」を追加
[テーブル情報 > スキーマの管理]から以下のようにカラムを追加

今回使用するフィールドは次の通りです。

今回使用しているフィールドの値は以下の画像部分にそれぞれ対応しています。
通知配信ex.jpg

注意: ここでは以上のようにカラムを追加していますが、各々で必要なカラムを読み替えて追加してください。

4. Craft Functionsのファンクションを作成する

Craft Functionsのファンクションを作成します。作成手順は次の通りです。

[Craft > ファンクション > 新規作成 > テンプレートから作成] を選択
「 アクションテーブル×Craft kvsを使って通知のInbox機能を実現する 」というテンプレートを検索し[取得]ボタンをクリック
[反映] ボタンをクリック
[変数] タブで次の変数の値を設定する
- LOG_LEVEL
  - 出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定します
- KARTE_API_TOKEN_SECRET
  - KARTE API v2アプリのtokenを登録したシークレット名です
- ACTION_TABLE_ID
  - 更新対象のアクションテーブルのIDです
- KVS_KEY_SUFFIX
  - Inbox通知用のKVSユーザーIDであることがわかるようにSUFFIXを指定します
- NOTIFICATION_EXPIRE_DAYS
  - 通知が配信されてから消去されるまでの日数を指定します（例：30日間表示したい場合は30と入力）
[設定 > ファンクションの有効化] にチェックを付けて [保存]

なお、テンプレートのソースコードはGitHubで公開しています。
craft-codes/craft-functions/kvs-based-notification-inbox at main · plaidev/craft-codes

5. Craft Functionsのエンドポイントを作成する

作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。

作成したファンクションの編集画面から [設定 > エンドポイント > 作成] をクリック
表示されたエンドポイントURLをメモしておく

6. 通知配信用のCraft接客サービスを作成する

配信したい通知をアクションテーブルに追加するためのCraft接客サービスを作成します。

[Action > 接客サービス > 作成]から新規の接客サービスを作成
「アクションを追加」をクリック
テンプレートで「Craft Functions連携」というテンプレートを選択

スクリーンショット2024-02-2721.46.40.png

配信トリガーに任意のイベントを設定
- 例えば、特定のページを閲覧したユーザにだけ通知を配信したい場合は、そのページ閲覧時のviewイベントを設定する
配信頻度を任意の頻度に指定
「アクションの編集」をクリックして編集ページに遷移
dataに「3. アクションテーブルを作成する」で作成したカラムに対応するデータとユーザ情報変数を追加する。
- 本ブログで使用しているカラムの例では次のようになります。

{
  "user_id": "#{user_id}", 
  "campaign_id": "#{campaign_id}",
  "sender_image": "#{sender_image}", 
  "sender_name":"#{sender_name}", 
  "title": "#{title}" , 
  "link_title": "#{link_title}", 
  "link_url": "#{link_url}"
}

なお、静的変数の枠が足りないというときは、下画像の赤枠部分「変数を追加」をクリックすると変数名、データの種類、データの値をそれぞれ指定できます。

スクリーンショット2024-02-2817.03.57.png

静的変数を追加すると「アクション設定画面」から簡単に通知内容を設定することができます。

スクリーンショット2024-02-2910.08.34.png

ポイント: もし通知を何度も送りたい場合は、この接客サービスを通知毎に作成してください。これにより、通知毎に接客サービスの配信設定を変更でき、KARTEのセグメントなどを使って通知の出し分けをすることが可能です。

7. Inbox表示用の接客サービスを作成する

Inboxを画面に表示するための接客サービスを作成します。HTML/CSSなどの詳細な記述については省略しますが、重要な部分だけかいつまんで説明します。作成手順は以下の通りです。

[Action > 接客サービス > 作成]から新規接客サービスを作成
「接客の編集」から任意のセグメントを指定
同様に任意の配信トリガーを指定
- たとえば特定のページだけに通知inboxを表示したい場合は、そのページ閲覧時のviewイベントを設定する
同様に任意の配信頻度を指定
「アクションの編集」からコードエディターを開き以下のようにコードを編集

以下は当該接客サービスの、アクション編集のカスタマイズにおける本ブログに該当するコード部分を抜粋したものです。

アクション編集のコードエディターで設定するJavaScript例

// Craft Functionsのエンドポイントを指定
const CRAFT_ENDPOINT = 'https://t.karte.io/hook/xxxxxxxxxxxxxx/craft/xxxxxxxxxxxxxxxxxx';
// アクションテーブルIDを指定
const ACTION_TABLE_ID = 'your_action_table_id';

function postNotifDataToCraftFunc(url) {
    const data = JSON.stringify({
        "user_id": "#{user_id}",
        "event": "get_notifications"
    });
    fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        body: data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(responseData => {
        console.log('responseData:', responseData);
        // 作成したアクションテーブルのIDを指定してテーブルをread
        const table = widget.collection('v2/'+ACTION_TABLE_ID);
        table.get(responseData, function(err, notifications){
            if (err) {
                console.error(`error log: ${err}`);
                return;
            };
            widget.setVal('notifications', notifications);
            console.log('notifications', notifications);
            // 通知が一件以上ある時に通知一覧を画面に表示
            if (notifications.length >= 1){
                widget.show();
            }
        });
    })
    .catch(error => console.error("error log: ", error));
}

// 通知がクリックされた時にkvsから削除するために通知IDをファンクションのエンドポイントに送信する関数
widget.method("clickedNotification", function(campaignId){
    const data = JSON.stringify({
        "user_id": '#{user_id}',
        "clicked_campaign_id": campaignId,
        "event": "clicked_notification"
    });
    fetch(CRAFT_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        body: data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(responseData => {
        console.log('onclick response:', responseData);
    })
    .catch(error => console.error('error log:', error));
});

// 定義した関数を呼び出す
postNotifDataToCraftFunc(CRAFT_ENDPOINT);

アクション編集のコードエディターで設定するHTML例

<div class="body">
  <div krt-for="notification in notifications" class="item flex"  krt-bind:key="notification.campaign_id">
    <div class="author mr-3"><img krt-bind:src="notification.sender_image" alt=""></div>
      <div class="flex-inner list">
        <div class="flex flex-ycenter">
          <div class="name mr-2">{{notification.sender_name}}</div>
        </div>
          <div class="description">
            <p>
              <strong>{{notification.title}}</strong>
                <br>
                  {{notification.description}}
            </p>
        </div>
        <a class="link" target="_blank" krt-bind:href="notification.link_url" krt-on:click="clickedNotification(notification.campaign_id)">{{notification.link_title}}</a>
    </div>
  </div>
</div>

実際に動かしてみる

実際に動作を確認してみましょう。動作検証にあたって次の事項を確認してください。

通知配信用のCraft接客サービスが正常に作動しているか確認する
- 配信トリガーで設定したイベントを発生させる
- ファンクションが正常に実行されたか確認する
  - Craft kvsに当該通知のオブジェクトが追加されているか
  - アクションテーブルにCraft接客サービスで送信した通知データが追加されているか
Inbox表示用の接客サービスが正常に作動しているか確認する
- Inbox接客サービス配信先Webページにいき通知一覧が表示されるか確認する

スクリーンショット2024-02-2618.56.15.png

設定に問題がければ、上画像のように画面右下に通知Inboxが表示されます。

補足

本ブログ内容を実装する上で注意すべきこととして、Craft Functionsのファンクション実行数がかなり増えてしまうということが挙げられます。具体的に記すと以下のタイミングでファンクションが実行されます。

ユーザへの通知送信時: ユーザー×通知数（回）
ユーザへのInbox表示時: ユーザー×接客表示数（回）
ユーザーのInbox内リンククリック時: ユーザー×クリック数（回）

上記の対処法として、ファンクションの呼び出し回数を減らすために、ローカルストレージを利用してキャッシュ層を実装するなどの手段があります。各々で料金プランに合わせた使用と対処を行なってください。

また、「6. 通知配信用のCraft接客サービスを作成する」でも解説しましたが、もし通知を何度も送りたい場合は、この接客サービスを通知毎に作成してください。これにより、通知毎に接客サービスの配信設定を変更でき、KARTEのセグメントなどを使って通知の出し分けをすることが可能です。

おわりに

今回は、アクションテーブルとCraft kvsを使用して、通知のInbox機能を実現する方法を紹介しました。前述した通り、このInbox機能を導入することで、適切な情報を適切なユーザーに届けるということが今までより容易になります。ぜひ通知の配信をする際はご役立てください！

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

アクションテーブル×Craft kvsを使って通知のInbox機能を実現する