KARTEで特定のイベントが発生した際に、KARTE Craftを使ってSlackに通知する方法

<html><head></head><body><h2 id="はじめに">はじめに</h2>
頭皮に対して保湿クリームを塗っているとふと自分のことを河童みたいだなと思いました、どうもCEのUGです。
Googleフォームへの入力をトリガーにして色々やっていくシリーズの第3弾です！
まだ、前回までの記事を読んでいない方は<a href="https://solution.plaid.co.jp/202312-reftable-update-from-google-form">前回の記事</a>と<a href="https://solution.plaid.co.jp/202312-eventwrite-from-googleform">前々回の記事</a>も読んでみてください
第3弾の今回はGoogleフォームの入力内容を紐付けテーブルに記入するです！
それでは最後まで楽しく読んでみてください！
<h2 id="概要">概要</h2>
大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったデータを特定の紐付けテーブルにUpsertすると言うものです。
<img src="https://ik.imagekit.io/plaid/8e36f676-a100-42e0-b964-f3d8e67152cd/%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-10-201.44.34.png" alt="スクリーンショット2023-10-201.44.34.png">
これによりGoogleフォームの回答内容を簡単に紐付けテーブルに連携することができます！従来だと紐付けテーブルにデータを連携させるためにはジョブフローを組んだり、Datahubでクエリを書いたりする必要があります。今回のSolutionを利用すれば、Datahubの操作をしなくても容易に紐付けテーブル側にユーザーに紐づけたいデータを連携することができるようになります！
<h2 id="実装手順">実装手順</h2>
実装手順は大まかにGoogleフォーム側の設定とKARTE側の設定の二つに分けられます。
<ol>
<li>Googleフォームを作成する</li>
<li>書き込み先の紐付けテーブルを作成する</li>
<li>API v2アプリを作成する</li>
<li>紐付けテーブルを上書きするためのファンクションを作成する</li>
<li>Googleフォーム側にGASを設定する</li>
</ol>
<h2 id="Googleフォームを作成する">Googleフォームを作成する</h2>
まずはGoogleフォームを作成します。この作業に関しては特にKARTE特有の何かを考慮する必要がございません。必要に応じてGoogleアカウント等をご自身で作成頂き、フォームを作成してください。 
参考：<a href="https://support.google.com/a/users/answer/9303071?hl=ja" target="_blank" rel="noreferrer">フォーム作成に関するHelpページ</a>
注意点として後に記述するGASとの整合性を保つために今回のSolution Blogのハンズオンでは下記の画像を参考にGoogleフォームを作成してください。カスタマイズも可能ではありますが、その場合は後のGASの記述とファンクションの記述内容を合わせる必要がありますので、その点だけご注意ください。
<img src="https://ik.imagekit.io/plaid/fd38aa87-45db-45f6-905d-253648120940/%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-1322.03.15.png" alt="スクリーンショット2023-12-1322.03.15.png">
ここまでできたら次にKARTE側の設定を行なっていきます！
今回は会員のランクを手動で登録したいというケースを想定しています！
<h2 id="書き込み先の紐付けテーブルを作成する">書き込み先の紐付けテーブルを作成する</h2>
今回のファンクションでGoogleフォームの入力内容を書き込むための書き込み先となる紐付けテーブルを作成します。 
<code>Insight&gt;紐付けテーブル&gt;作成&gt;空の紐付けテーブルを作成</code>を選んでください。 
<img src="https://ik.imagekit.io/plaid/9408370e-0af0-44f4-b33f-f3016dfff2a1/%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-10-201.48.55.png" alt="スクリーンショット2023-10-201.48.55.png">
作成後、テーブル情報に記載されているテーブルIDをコピーしてください。 
ファンクションの設定で使用します。 
<img src="https://ik.imagekit.io/plaid/248a00b5-8899-4077-b626-5d3cc8a58968/%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-10-201.49.43.png" alt="スクリーンショット2023-10-201.49.43.png">
次はCraft側の設定を行なっていきます。
<h2 id="API v2アプリを作成する">API v2アプリを作成する</h2>
まずは今回使用するAPI v2 appを作成していきます。 
<code>ストア &gt; API v2設定</code>から下記の画像を参考にAPI v2 appを新規作成してください。
<img src="https://ik.imagekit.io/plaid/90b6a10e-4d1b-4901-b7e3-5b555780c7ba/%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-10-201.52.42.png" alt="スクリーンショット2023-10-201.52.42.png">
アプリタイプはtoken 
Permission設定は<code>beta.track.refTable.row.upsert</code>を付与してください。 
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。
<h2 id="紐付けテーブルを上書きするためのファンクションを作成する">紐付けテーブルを上書きするためのファンクションを作成する</h2>
次にファンクションを作成します。 
<a href="https://github.com/plaidev/karte-solutions/blob/main/craft/himoduketable_write_from_google_form/index.js" target="_blank" rel="noreferrer">サンプルとなるソースコード</a>は、GitHubで公開しています。
作成する際に変数タブで下記の変数の値を設定してください。
<ul>
<li><code>SECRET_NAME</code>
<ul>
<li>事前に作成したCraft Secret Manager に登録した名前</li>
</ul>
</li>
</ul>
以下でスクリプトの簡潔な説明をします！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。カスタマイズした質問項目に合わせて、hook_data.body.xxxのxxx部分を修正してください。
紐付けテーブルを上書きするために必要な情報を下記で定義しています。
<pre><code class="hljs"> const userId = data.jsonPayload.data.hook_data.body.user_id; 
 const rank = data.jsonPayload.data.hook_data.body.rank; 
</code></pre>
上記の部分で定義した変数を紐付けテーブルに書き込む作業の下記の部分で実施しています。
<pre><code class="hljs"> try {
 await karteApiClient.postV2betaTrackReftableRowUpsert({
 id: TABLE_ID,
 rowKey: { user_id: userId },
 values: { rank }
 });
 logger.log(`${TABLE_ID} is updated`);
 } catch (e) {
 logger.error(e);
 }
</code></pre>
ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。 
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。
<img src="https://ik.imagekit.io/plaid/362c219b-403c-4e1e-a2a3-0bdc5eb48df7/%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-10-200.32.40.png" alt="スクリーンショット2023-10-200.32.40.png">
<h2 id="Googleフォーム側にGASを設定する">Googleフォーム側にGASを設定する</h2>
最後にGoogleフォーム側にGASの設定をしていきます。
先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。
<img src="https://ik.imagekit.io/plaid/60f25617-aae7-4617-b4b9-de93c42b877c/%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-2113.04.07.png" alt="スクリーンショット2023-12-2113.04.07.png">
エンドポイントの部分はご自身の環境に合わせて適宜修正してください！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。<code>titleAliasMapping</code>の部分をカスタマイズした質問項目に合わせて修正してください。
<pre><code class="hljs">const titleAliasMapping = {
 "user_id": "user_id",
 "rank": "rank",
}

function onFormSubmit(e) {
 const formResponse = e.response;
 const itemResponses = formResponse.getItemResponses();
 const formData = {};

 for (var i = 0; i &lt; itemResponses.length; i++) {
 const itemResponse = itemResponses[i];
 const question = itemResponse.getItem().getTitle();
 const key = titleAliasMapping[question];
 if (key) {
 const answer = itemResponse.getResponse();
 formData[key] = answer;
 }
 }

 // 回答データを指定されたエンドポイントに送信
 sendFormDataToEndpoint(formData);
}

function sendFormDataToEndpoint(formData) {
 const endpoint = "https://t.karte.io/hook/xxx";
 const options = {
 method: "post",
 headers: {
 "Content-Type": "application/json"
 },
 payload: JSON.stringify(formData),
 timeout: 300000, // タイムアウトを 5 分に設定
 muteHttpExceptions: true // 例外を抑制して完全な応答を取得
 };

 Logger.log("formData: " + JSON.stringify(formData));

 const response = UrlFetchApp.fetch(endpoint, options);
 const responseCode = response.getResponseCode();
 const responseBody = response.getContentText();

 if (responseCode !== 200) {
 Logger.log("エラーコード: " + responseCode);
 Logger.log("レスポンスボディ: " + responseBody);
 }
}
</code></pre>
スクリプトの記述が完了したら、このスクリプトのトリガーの設定を行なっていきます。 
下記の画像を参考にフォーム送信時にスクリプトがトリガーされるようにトリガーを設定してください。
<img src="https://ik.imagekit.io/plaid/5ca2f7d6-6726-4053-bf6b-42a2d09eeb9c/%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-191.57.00.png" alt="スクリーンショット2023-12-191.57.00.png">
ここまでの設定が完了したら実際にフォームに回答を送信してみて、指定した紐付けテーブルにデータが記入されることを確認してみてください！
<h2 id="終わりに">終わりに</h2>
今回の記事はここまでになります！
今回のファンクションを使えば、WebサイトでGoogleフォームに記述してもらった情報を実際のuser_idに紐付けてセグメント等の様々なところで活用できるようになります！これからもどんどんCraftで出来ることを作っては発信していくのでこれからもSolution Blogを定期的にチェックしてください！
今回も最後まで読んでいただきありがとうございました！
<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>

Googleフォームに回答が送信されたことをトリガーにしてKARTE Insightの紐付けテーブルに回答を内容を記入する方法を紹介します。

Googleフォームの入力内容をもとにして、KARTE Insightの紐付けテーブルの内容を上書きする