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

<html><head></head><body><h2 id="はじめに">はじめに</h2>
スキンヘッドにしてから頭皮の乾燥が気になるお年頃になりました、どうもCEのUGです。
今回は前回に引き続きGoogleフォームへの入力をトリガーにして色々やっていくシリーズの第2弾です！ 
<a href="https://solution.plaid.co.jp/202312-eventwrite-from-googleform">前回の記事</a>を読んでいない方は是非読んで見てください！
第2弾の今回はGoogleフォームの入力内容をアクションテーブルに記入するです！
それでは最後まで楽しく読んでみてください！
<h2 id="概要">概要</h2>
大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったデータを特定のアクションテーブルにUpsertすると言うものです。
<img src="https://ik.imagekit.io/plaid/124e035f-188b-4231-9a0e-76b6298c2209/%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.18.39.png" alt="スクリーンショット2023-10-200.18.39.png">
これによりGoogleフォームの回答内容を簡単にアクションテーブルに連携することができます！従来だとアクションテーブルにデータを連携させるためにはジョブフローを組んだり、Datahubでクエリを書いたりする必要があります。今回のSolutionを利用すれば、Datahubの操作をしなくても容易にアクションテーブル側に施策で使いたいデータを連携することができるようになります！
<h2 id="実装手順">実装手順</h2>
実装手順は大まかにGoogleフォーム側の設定とCraft側の設定の二つに分けられます。
<ol>
<li>Googleフォームを作成する</li>
<li>書き込み先のアクションテーブルを作成する</li>
<li>API v2アプリを作成する</li>
<li>アクションテーブルを上書きするためのCraft Functionsを作成する</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/346ad5eb-4021-4527-bd8c-3ccf9c003294/%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-1321.12.01.png" alt="スクリーンショット2023-12-1321.12.01.png">
今回は保険等の商品詳細ページ上に今週の制約数を接客で表示するというケースを想定してGoogleフォームを作成していきます！
ここまでできたら次にKARTE側の設定を行なっていきます！
<h2 id="書き込み先のアクションテーブルを作成する">書き込み先のアクションテーブルを作成する</h2>
今回のファンクションでGoogleフォームの入力内容を書き込むための書き込み先となるアクションテーブルを作成します。 
<code>Action&gt;アクションテーブル&gt;作成&gt;空のテーブルを作成</code>を選んでください。 
<img src="https://ik.imagekit.io/plaid/fdd5ffe5-4a06-45b2-ad1f-679a666b8226/%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.29.05.png" alt="スクリーンショット2023-10-201.29.05.png">
スキーマの設定は下記画像を参考にして作成してください。Googleフォームの内容をカスタマイズした場合はその内容に適宜修正してください。フォーム側の質問項目に沿ってアクションテーブル側のスキーマを対応する形に修正してください。
<img src="https://ik.imagekit.io/plaid/3e3b52d3-f31a-41cc-b273-6e064224699b/%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-1321.19.42.png" alt="スクリーンショット2023-12-1321.19.42.png">
接客から参照したい場合等はWidgetからの参照にチェックをつけてください。 
今回の記事ではつけていません。 
<img src="https://ik.imagekit.io/plaid/6fde89c3-2756-41f4-996b-85891e12ca49/%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.34.44.png" alt="スクリーンショット2023-10-201.34.44.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/7eedc5db-0547-401d-8698-b744866f03b0/%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.25.48.png" alt="スクリーンショット2023-10-200.25.48.png">
アプリタイプはtoken 
Permission設定は<code>beta.action.actionTable.records.upsert</code>を付与してください。 
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。
<h2 id="アクションテーブルを上書きするためのCraft Functionsを作成する">アクションテーブルを上書きするためのCraft Functionsを作成する</h2>
次にファンクションを作成します。 
<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/actiontable_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 pageUrl = data.jsonPayload.data.hook_data.body.PageURL; 
 const salesCount = data.jsonPayload.data.hook_data.body.SalesCount; 
 const others = data.jsonPayload.data.hook_data.body.Others; 
</code></pre>
上記の部分で定義した変数をアクションテーブルに書き込む作業の下記の部分で実施しています。
<pre><code class="hljs"> try {
 await karteApiClient.postV2betaActionActiontableRecordsUpsert({
 table: TABLE_ID,
 data: {
 pageurl: pageUrl, 
 salescount: salesCount,
 others
 }
 });
 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">
エンドポイントのxxxの部分はご自身の環境に合わせて適宜変更してください！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。<code>titleAliasMapping</code>の部分をカスタマイズした質問項目に合わせて修正してください。
<pre><code class="hljs">const titleAliasMapping = {
 "ページURL": "PageURL",
 "今週の成約数": "SalesCount",
 "備考": "Others"
}

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">
ここまでの設定が完了したら実際にフォームに回答を送信してみて、アクションテーブルにデータが書き込まれるかを確認してみてください！
<img src="https://ik.imagekit.io/plaid/d226ac2e-a2ab-494e-a288-84bf6d184601/%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-1321.44.32.png" alt="スクリーンショット2023-12-1321.44.32.png">
<h2 id="終わりに">終わりに</h2>
今回の記事はここまでになります！
今回のファンクションを使えば、WebサイトでGoogleフォームに記述してもらった情報を接客で表示できるようになったりと様々なことに利用ができるようになります！最後まで読んでいただきありがとうございました！
<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 Actionのアクションテーブルに対して記入する方法を紹介します。

Googleフォームの入力内容をもとにして、KARTE Actionのアクションテーブルの内容を上書きする