KARTE Craftによるエンタープライズシステム組み込みと生成AI活用の新機能についてカルカン2023で発表しました！

<html><head></head><body><p>こんにちは、Customer Engineerの矢嶋です。</p>
<p>今回はCraftとNotionの連携について書いていこうかと思います。事前準備さえしてしまえば比較的簡単に連携できるので色々応用して使えるかと思います。今回は基本のNotion DBにページを作る部分を利用しています。</p>
<h3 id="想定するストーリー">想定するストーリー</h3>
<p>KARTEでアンケートを取得したあとに、回答して頂いた方になにかのアクション(メールに対応や電話するなど)を想定したときに、KARTEでToDoを管理するのはなかなか大変です。</p>
<p>そこで、アンケートの結果をNotion DBに書き出してその他とのステータスを管理できたら業務がスムーズなのではないかと思い連携させてみました。</p>
<img width="500" src="https://ik.imagekit.io/plaid/5fea8341-0eca-406a-a272-35718315e27c/yazy_memo__Online_Whiteboard_for_Visual_Collaboration.png">
<p>もちろんその他のユースケースでもご利用いただけますので参考にしていただけると幸いです！</p>
<h3 id="今回の構成">今回の構成</h3>
<img width="500" src="https://ik.imagekit.io/plaid/1d5ca871-aadc-47b4-93d3-e82f7611ee12/yazy_memo__Online_Whiteboard_for_Visual_Collaboration.png">
<p>実装手順</p>
<ol>
<li>NotionDBの準備</li>
<li>アンケート接客の作成</li>
<li>Craft Functionの作成</li>
<li>Craft接客の作成</li>
<li>動作確認</li>
</ol>
<h3 id="1.NotionDBの準備">1.NotionDBの準備</h3>
<p>こちらでは以下のURLを参考にDBにデータベース IDとAPI KEYを控える</p>
<p><a href="https://developers.notion.com/docs/create-a-notion-integration" target="_blank" rel="noreferrer">https://developers.notion.com/docs/create-a-notion-integration</a></p>
<p>また今回作成DBのColumnは以下のようになっています</p>
<div class="TableScroll"><table>
<thead>
<tr>
<th>Column名</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>vistor_id が入る</td>
</tr>
<tr>
<td>NPSスコア</td>
<td>「このサービスを友人・知人へ薦めていただける可能性はどのくらいありますか？」に対応したスコア</td>
</tr>
<tr>
<td>掲載商品の評価</td>
<td>「掲載商品そのものに関する評価をしてください」に対応したスコア</td>
</tr>
<tr>
<td>購入手続きについて</td>
<td>「購入手続きのわかりやすさに関する評価をしてください」に対応したスコア</td>
</tr>
<tr>
<td>フリーコメント</td>
<td>「その他、本サービスへのご意見やご感想がありましたらご記入ください。（任意回答）」のコメント</td>
</tr>
</tbody>
</table></div>
<h3 id="2.アンケート接客の作成">2.アンケート接客の作成</h3>
<p>アンケートフォーム(β版)を利用して作成します。設問は何でも構いませんが、今回は以下を設定しています。</p>
<ul>
<li>このサービスを友人・知人へ薦めていただける可能性はどのくらいありますか？</li>
<li>掲載商品そのものに関する評価をしてください</li>
<li>購入手続きのわかりやすさに関する評価をしてください</li>
<li>その他、本サービスへのご意見やご感想がありましたらご記入ください。（任意回答)</li>
</ul>
<h3 id="3.Craft Functionの作成">3.Craft Functionの作成</h3>
<p>上記で取得したデータベース IDとAPI KEYをCraft Secret Managerに設定します。</p>
<ul>
<li>NOTION_DB_ID
<ul>
<li>Notion DBのIDを格納</li>
</ul>
</li>
<li>NOTION_API_SALESENGINEER
<ul>
<li>取得したAPI Keyを格納</li>
</ul>
</li>
</ul>
<p>またサンプルとなるソースコードは、GitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/notion-intergration" target="_blank" rel="noreferrer">https://github.com/plaidev/craft-codes/tree/main/craft-functions/notion-intergration</a></p>
<p>実装の内容としましては</p>
<ol>
<li>Craft接客にてアンケート接客で取得した情報をCraft Fanctionに連携</li>
<li>連携されたデータをNotion DB API経由でNotion DBに登録</li>
</ol>
<p>という流れとなります</p>
<h3 id="3.Craft接客の作成">3.Craft接客の作成</h3>
<ol>
<li>
<p>Craftの接客を作成します。</p>
<ul>
<li>接客サービス画面を開く</li>
<li>Craft Functions連携 テンプレートを利用してアクションを追加<br>
※ テンプレートが表示されない場合は、Craftの利用申請が必要です</li>
<li>次のような配信設定をする
<ul>
<li>「アクション」
<ul>
<li>配信率: 100%
<ul>
<li>※ アクションの中身の設定については後述</li>
</ul>
</li>
</ul>
</li>
<li>「対象ユーザー」
<ul>
<li>全員
<ul>
<li>※ 対象ユーザーを絞りたい場合は、条件を指定します</li>
<li>※ 検証中はテスト配信用のセグメントを設定してください</li>
</ul>
</li>
</ul>
</li>
<li>「対象イベント」
<ul>
<li>「〇〇ページを見た」という条件になるよう「閲覧イベント」に対する条件を指定</li>
<li>今回は<code>_answer_question</code> を配信トリガーに設定します。<br>
<img width="500" src="https://ik.imagekit.io/plaid/07181259-670c-40d5-b72c-d23f477da00b/接客サービス詳細_-_社内検証用_yusuke_yajima_-_KARTE.png"></li>
</ul>
</li>
<li>「オプション」
<ul>
<li>同時配信: OK</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>ユーザー情報変数を設定します。アンケート結果を任意の変数に格納してください。</p>
<img width="250" src="https://ik.imagekit.io/plaid/781af7ba-3516-4758-bd1a-2e8fbd3d550f/接客アクション編集_-_社内検証用_yusuke_yajima_-_KARTE.png">
</li>
<li>
<p>Craft接客を設定します。</p>
<div class="TableScroll"><table>
<thead>
<tr>
<th>項目名</th>
<th>設定内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>ファンクション名</td>
<td>任意の名前を設定</td>
</tr>
<tr>
<td>name</td>
<td>任意の値を設定</td>
</tr>
<tr>
<td>data</td>
<td>以下を参考に設定</td>
</tr>
</tbody>
</table></div>
<p>dataフィールドには以下のように設定しています。実際は使用するアンケートによります。</p>
<pre><code class="language-json hljs"><span class="hljs-punctuation">{</span> <span class="hljs-attr">"user_id"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#{user_id}"</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"nps"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#{nps}"</span><span class="hljs-punctuation">,</span>
 <span class="hljs-attr">"about_product"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#{about_product}"</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"how_to_buy"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#{how_to_buy}"</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"free_comment"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#{free_comment}"</span> <span class="hljs-punctuation">}</span>
</code></pre>
 <img width="500" src="https://ik.imagekit.io/plaid/ddede960-e9d1-4895-beff-ec915a0629bc/接客アクション編集_-_社内検証用_yusuke_yajima_-_KARTE(1).png">
</li>
</ol>
<h3 id="4.動作確認">4.動作確認</h3>
<p>上記まで設定できたら実際にアンケートに回答してみましょう！</p>
<p>成功すれば以下のようにアンケートの結果がNotion DBに挿入されます。</p>
<p>いかがでしたでしょうか。比較的簡単にNotion DBと連携することができました。</p>
<p>アンケートなどKARTE内以外でステートや状況を管理したい場合などにはとても便利かと思います。また、今回はNotion DBにページを作成しましたが、Notion DBを読み取ってSlackに通知するなども可能です。ぜひ皆さまも業務の中で活用してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<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>

CraftとNotionを連携させて実現するアンケート管理を実現する