商品を全ユーザーの購入数に応じてランキング化し、毎月KARTE Messageで配信する

<html><head></head><body>こんにちは、Customer EngineerのMasamichiです！ 
１月の共通テストが迫っているため近所の高校生たちが必死に単語帳や問題集の見直しをしているのをよく見かけるのですが、自分も昨年の今頃はこんな感じだったなと懐かしい気持ちになります。
さて、KARTEでアンケートを配信する上で1グループにつき1人のみ回答をして欲しいと思ったことはありませんか？例えば以下のようなユースケースを想定できます。
<ul>
<li>1企業の複数アカウントが利用する企業向けサービスで、会社毎に1人だけ回答できるアンケートを配信したい</li>
<li>家族内で複数人が利用する家族向けサービスで、家族毎に1人だけ回答できるアンケートを配信したい</li>
</ul>
今回は、KARTE CraftとKARTE Actionを使って「グループの誰かが回答したら非表示になるアンケート」を実現する方法を紹介します。
<hr>
<h1 id="全体像">全体像</h1>
<h2 id="前提">前提</h2>
このソリューションでは、次のようなKARTEプロジェクトでの利用を前提とします。
<ul>
<li>KARTEで計測されたユーザーが何らかのグループに属しており、そのグループを特定するID（以下、「グループID」）がKARTEのイベントでフィールド値として取得されていること
<ul>
<li>グループIDの例: 会社ID(<code>company_id</code>), 家族ID(<code>family_id</code>)など</li>
</ul>
</li>
</ul>
なお本ブログ記事では、attributeイベントで<code>company_id</code>フィールドでユーザーが属する「会社ID」を取得できているケースを想定し、「会社毎に1人だけ回答できるアンケート」の配信を実装する方法を説明します。
注意: それ以外のイベントやフィールドを利用する場合は、適宜読み替えてください。
<h2 id="処理の流れ">処理の流れ</h2>
実装する処理の流れは下図のようになります： 
<img src="https://ik.imagekit.io/plaid/9c951b1f-b773-4526-a267-c6cd222677d1/%E3%82%AF%E3%82%99%E3%83%AB%E3%83%BC%E3%83%95%E3%82%9A%E3%83%BB%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%83%BB%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99%E7%94%A8(1).jpg" alt="グループ・アンケート・ブログ用(1).jpg"> 
まだアンケートに回答していないグループのユーザーがアンケートに回答すると、紐付けテーブルにグループIDと配信されたアンケートに回答したというレコードが追加されます。
<h2 id="アウトプットイメージ">アウトプットイメージ</h2>
<img src="https://ik.imagekit.io/plaid/db5f050c-c37c-42ae-8257-04f57cb0e19f/%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%81%8B%E3%82%99%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt="アンケートが表示されている画面のスクショ.png"> 
目標として画像のような作成したアンケート接客を誰かが回答するまで表示されるようにします。
<hr>
<h1 id="実装手順">実装手順</h1>
実装は以下の手順で進めていきます。
<ol>
<li>アンケート接客サービスの作成</li>
<li>紐付けテーブルの作成</li>
<li>セグメントの設定</li>
<li>APIv2アプリの作成</li>
<li>Craft Functionsの作成</li>
<li>Craft接客サービスの作成</li>
</ol>
<h2 id="1. アンケート接客サービスの作成">1. アンケート接客サービスの作成</h2>
まず初めに配信するアンケートを作成します。次の手順に沿ってアンケートフォームを作成してください。
<ul>
<li>[Action &gt; 接客サービス]から「作成」をクリックして新規接客サービスを作成</li>
<li>「アクションの追加」をクリックしカスタムテンプレートで「ユーザーに聞く」を選択</li>
<li>任意のアンケートフォームを選択する</li>
</ul>
<img src="https://ik.imagekit.io/plaid/efb65e6a-d3e3-49a1-bc3d-a9ddfcbdbc2b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2610.05.17.png" alt="スクリーンショット2023-12-2610.05.17.png">
（※補足: 今回の実装では複数のアンケートの配信制御を一括で管理することができます。簡単のために例として、ブログ内では２つのアンケートで行っています。）
<h2 id="2. 紐付けテーブルの作成">2. 紐付けテーブルの作成</h2>
次に紐付けテーブルを準備します。以下の通りに設定を進めてください。
<ul>
<li>[Insight &gt; 紐付けテーブル]から「作成」をクリックする</li>
<li>「空の紐付けテーブルを作成」を選択</li>
<li>紐付けテーブルの名前を指定</li>
<li>テーブル情報のスキーマ項目の「編集」をクリックし、以下のようなカラムを追加</li>
</ul>
スキーマ 
・<code>company_id</code>: 文字列(STRING) 
（※ここには自分が対象としたいフィールドの名前を任意で指定）
・<code>has_answered_enquete_{{campaign_id}}</code>: 真偽値(BOOLEAN) 
<img src="https://ik.imagekit.io/plaid/b91dfdd9-1978-4aae-8145-91b9daa8e4bb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2516.09.06.png" alt="スクリーンショット2023-12-2516.09.06.png"> 
ここで<code>has_answered_enquete_</code>以降の文字列は先ほど作成したアンケートの接客サービスのIDです（以降は<code>has_answered_enquete_{{campaign_id}}</code>と書きます）。接客サービスIDは作成した接客サービスの設定情報から確認できます。
<ul>
<li>データ紐付けから「編集」をクリック</li>
<li>紐付け先にKARTEイベントIDを選択</li>
<li>任意のイベントに追加したグループIDフィールドを主キーと紐づける 
（※今回はattributeイベントで連携している<code>company_id</code>フィールドを利用するというケースを想定して説明します）</li>
<li>データの追加先に任意のイベントを選択 
（※ここではデータの追加先としてattributeに設定しています。）</li>
</ul>
<img src="https://ik.imagekit.io/plaid/30c7f63c-a1d1-40cd-ba4d-096f464c8d69/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2516.08.21.png" alt="スクリーンショット2023-12-2516.08.21.png">
<ul>
<li>「保存」をクリックして設定を完了する</li>
</ul>
これで紐付けテーブルの作成が完了です。
<h2 id="3. セグメントの設定">3. セグメントの設定</h2>
次にセグメントの設定をしていきます。[Insight &gt; セグメント]へいき「作成」をクリックし、セグメントの条件設定を次のように指定します：
<ul>
<li>全ての期間 &gt; attribute(指定したイベント) &gt; has_answered_enquete_{{campaign_id}} &gt; 最新の値 &gt; trueに等しい</li>
</ul>
注意: 複数アンケートの配信制御を行う場合、それぞれアンケートに一対一対応するセグメントを作成する必要があります。
そして<code>has_answered_enquete_{{campaign_id}}</code>に対応する(ここでは<code>6567e201b92f6f822950462a</code>に相当する)先ほど作成したアンケート接客サービスのセグメント設定に作成したセグメントをセットします。 
<img src="https://ik.imagekit.io/plaid/710575b3-0048-4211-9138-56c521ace22c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2211.18.06.png" alt="スクリーンショット2023-12-2211.18.06.png">
今回はアンケートに回答した＝「<code>has_answered_enquete_{{campaign_id}}</code>が<code>true</code>」と定義しているので対象のセグメントにいるユーザを除くに変更することを忘れないでください。
<h2 id="4. APIv2アプリの作成">4. APIv2アプリの作成</h2>
次にAPIv2アプリを作成します。[ストア &gt; APIv2設定]から「作成」をクリックし、画像のように内容を入力します。 
<img src="https://ik.imagekit.io/plaid/dcf9ae0a-49c5-47b5-83c4-45cd0e5ffdbb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2211.02.17.png" alt="スクリーンショット2023-12-2211.02.17.png"> 
スコープでは<code>beta.track.refTable.row.upsert</code>という紐付けテーブルへレコードを更新するための権限を付与しています。
入力し終えたら「保存」をクリックして、発行されたアクセストークンをCraftのシークレットに登録します。これでAPIv2アプリの作成が完了です。
<h2 id="5. Craft Functionsの作成">5. Craft Functionsの作成</h2>
次にアンケート回答後にレコードを更新するためのCraft Functionsを作成します。サンプルとなるソースコードは、Github上で公開しています。
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/show-only-once-per-group" target="_blank" rel="noreferrer">https://github.com/plaidev/craft-codes/tree/main/craft-functions/show-only-once-per-group</a>
作成手順は次の通りです。
<ul>
<li>[Craft &gt; ファンクション &gt; 作成 &gt; テンプレートから作成]を選択</li>
<li><code>グループの誰かが回答したら非表示になるアンケートを配信する</code>というテンプレートを選択し「取得」をクリック</li>
<li>「反映」をクリックしFunctionを有効化してから保存</li>
</ul>
ここでサンプルコードで行われている処理について解説します。 
JavaScriptのコード例：
<pre><code class="language-js hljs">const REF_TABLE_ID = '&lt;% REF_TABLE_ID %&gt;';
const GROUP_ID_FIELD = '&lt;% GROUP_ID_FIELD %&gt;';

const karteApiClient = api('@dev-karte/v1.0#yeekp16lpj2g7af');

// Craft接客でユーザ情報変数として埋めん込んだデータを取得
const groupId = data.jsonPayload.data[GROUP_ID_FIELD];
const campaignId = data.jsonPayload.data.enquete_campaign_id;

await karteApiClient.postV2betaTrackReftableRowUpsert({
 id: REF_TABLE_ID,
 rowKey: { [GROUP_ID_FIELD]: groupId },
 values: { [`has_answered_enquete_${campaignId}`]: true }
});
</code></pre>
<ul>
<li>変数名：<code>REF_TABLE_ID</code> 
セクション２で作成した紐付けテーブルのテーブルIDをCraft変数に登録する</li>
<li>変数名：<code>GROUP_ID_FIELD</code> 
対象のグループのフィールド名をCraft変数に登録する 
例）会社→<code>company_id</code>、家族→<code>family_id</code>などと指定</li>
</ul>
上記のコードでは、後に設定するCraft接客サービスを用いて、回答されたアンケートの接客サービスIDを<code>campaignId</code>に格納し対応するフィールド(<code>values</code>)のデータの値を回答済み(<code>true</code>)に更新します。
<h2 id="6. Craft Functions連携用接客サービスの作成">6. Craft Functions連携用接客サービスの作成</h2>
最後にCraft Functions連携用の接客サービスを作成します。以下の手順に沿って進めてください。
<ul>
<li>[Action &gt; 接客サービス]から「作成」をクリック</li>
<li>テンプレートからCraft Functions連携を選択</li>
<li>配信トリガーに任意に作成したアンケートを指定</li>
</ul>
<img src="https://ik.imagekit.io/plaid/747d3617-b987-454e-befb-d505a1af08f6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2610.01.14.png" alt="スクリーンショット2023-12-2610.01.14.png">
<ul>
<li>アクションの編集で次のようにユーザ情報変数を追加 
次の変数を「データ管理」から画像のように追加します。</li>
</ul>
<ol>
<li>変数名: <code>company_id</code> 
全ての期間 &gt; attribute(指定したイベント名) &gt; company_id(指定したフィールド名) &gt; 最新の値</li>
<li>変数名: <code>enquete_campaign_id</code> 
全ての期間 &gt; アンケート回答 &gt; 接客サービス名 &gt; 最新の値 
<img src="https://ik.imagekit.io/plaid/fba360ad-8320-4dfc-a3c8-ea6e8fbc56ff/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2211.13.25.png" alt="スクリーンショット2023-12-2211.13.25.png"></li>
</ol>
<ul>
<li><code>data</code>に次のコードを追加</li>
</ul>
<pre><code class="hljs">{"campany_id": "#{campany_id}", "enquete_campaign_id": "#{enquete_campaign_id}"}
</code></pre>
<img src="https://ik.imagekit.io/plaid/96ddbd94-5831-4ae9-bc73-98930ba8c2f2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2610.08.06.png" alt="スクリーンショット2023-12-2610.08.06.png"> 
これでCraft接客サービスの作成は完了です。
<hr>
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
作成したアンケートの動作検証の方法について説明します。
KARTEの計測タグが埋め込まれたサイトへいき、attributeイベントでcompany_idフィールドが連携された状態にします。その後リロードして自身で作成したアンケートが表示されるか確認します。 
<img src="https://ik.imagekit.io/plaid/db5f050c-c37c-42ae-8257-04f57cb0e19f/%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%81%8B%E3%82%99%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt="アンケートが表示されている画面のスクショ.png"> 
アンケートに回答後、紐付けテーブルのレコードが更新されているか確認します。その後、リロードをしてもアンケートが再表示されないか確認します（処理が反映されるのに時間がかかる場合があります）。
<img src="https://ik.imagekit.io/plaid/9d651aa3-b723-4ce0-bbb6-12f094003244/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2212.04.16.png" alt="スクリーンショット2023-12-2212.04.16.png"> 
アンケートが回答されると紐付けテーブルでは画像のように<code>true</code>と表示されます。まだアンケートが回答されていない場合は<code>null</code>と表示されます。
<h2 id="補足：複数の接客サービスに対応させる">補足：複数の接客サービスに対応させる</h2>
前述した通り、この実装では複数アンケートの配信制御を実行できます。
新しいアンケート接客サービスを次の手順に沿って設定してください。詳細な手順に関してはブログ内で記述しているので必要に応じて確認してください。
<ul>
<li>アンケート接客サービスを作成</li>
<li>紐付けテーブルに作成したアンケート用のカラムを追加</li>
<li>セグメントを作成</li>
<li>Craft Functions連携用の接客サービスに新規作成したアンケートに対応するアンケート回答イベントを配信トリガーの条件として追加</li>
</ul>
ここで、紐付けテーブルに新しいカラムを追加する方法を説明します。[Insight &gt; 紐付けテーブル]で使用する紐付けテーブルの「テーブル情報」へいき、スキーマの「編集」をクリックしてフィールドを追加します。 
<img src="https://ik.imagekit.io/plaid/1e98ee1f-a35a-4c89-8db2-00ca1675fc06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-12-2610.17.11.png" alt="スクリーンショット2023-12-2610.17.11.png"> 
フィールドの書き方についてはセクション２(紐付けテーブルの作成)と同様に、<code>has_answered_enquete_{{campaign_id}}</code>を真偽値としてカラムを追加します。
以上の実装を行うことで、複数の接客サービスに対応させることができます。
<hr>
<h1 id="おわりに">おわりに</h1>
これにて全ての実装が終了です、お疲れ様でした。
今回は「グループの誰かが回答したら非表示になるアンケートをKARTEで配信する」の実装について解説しました。これにより前述した通り、1グループあたり1人のみ回答できるアンケートを配信することができます。ぜひ皆さんも活用してみてください。
<hr>
プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ 
ぜひ気軽にお問い合わせください。
↓ パートナー企業になりたい
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
↓ PLAIDで働きたい
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer" target="_blank" rel="noreferrer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
</body></html>

KARTE CraftとKARTE Actionを使って「グループの誰かが回答したら非表示になるアンケート」を実現する方法について紹介します。