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

<html><head></head><body><h2 id="はじめに">はじめに</h2>
こんにちは！スキンヘッドにすると人の手の暖かさが頭皮から直で感じられるようになります、どうもCEのUGです
今回からGoogleフォームの入力をトリガーにしてKARTE上で様々なことをするシリーズ合計3回にわたってSolution Blogで紹介していこうと思います！
今回はその第一弾として「Googleフォームの入力内容を基にして特定のuser idにイベントを発火させる」を紹介していきます！
<h2 id="概要">概要</h2>
大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったuser_idに対して指定されたイベントを発火させると言うものです。
<img src="https://ik.imagekit.io/plaid/a8a49422-54ec-4470-ae05-8eb1c8b04279/%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-1914.16.16.png" alt="スクリーンショット2023-10-1914.16.16.png">
このSolutionを利用すれば特定のユーザーに対してplugin_line_identifyイベントを発火させたいといった要望も叶えることができます。例えば、エンドユーザーからメールの購読停止をシステム側から解除して欲しいと言ったような要望を受けた際に、運用者側から手動で簡単にKARTEのユーザーデータの一部を書き換えることが可能になります。
<h2 id="実装手順">実装手順</h2>
実装手順は大まかにGoogleフォーム側の設定とCraft側の設定の二つに分けられます。
<ol>
<li>Googleフォームを作成する</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/b05c9157-4b84-48e9-8a29-379b424f948b/%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-1914.57.02.png" alt="スクリーンショット2023-10-1914.57.02.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/fb29bf26-05c6-4c1a-9aeb-1c471865cd57/%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-1915.21.48.png" alt="スクリーンショット2023-10-1915.21.48.png">
アプリタイプはtoken 
Permission設定は<code>track.event.write</code>と<code>beta.track.event.writeAndExecAction</code>を付与してください。
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。
<h2 id="Craft Functions を作成する">Craft Functions を作成する</h2>
次にイベントを発火させるためのファンクションを作成します。<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/event_writte_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 eventName = data.jsonPayload.data.hook_data.body.event_name; 
 const userId = data.jsonPayload.data.hook_data.body.user_id; 
 const valuesString = data.jsonPayload.data.hook_data.body.values; 
 const values = JSON.parse(valuesString); 
</code></pre>
この部分で上記で定義した変数を基にしてイベントを発火させています。KARTEの通常のタグ設置で記述するJSのコードと似ているので、タグ設置を経験したことのある方なら見覚えがあるかと思います。
<pre><code class="hljs"> try {
 await karteApiClient.postV2betaTrackEventWriteandexecaction({
 keys: { user_id: userId },
 event: {
 event_name: eventName,
 values,
 },
 });
 logger.log(`Event sent successfully.`);
 } catch (e) {
 logger.error(e);
 }
}
</code></pre>
ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。 
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。
<img src="https://ik.imagekit.io/plaid/4c9f34d0-3b89-4eb5-9e40-eb679c310b39/%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-1915.30.23.png" alt="スクリーンショット2023-10-1915.30.23.png">
<h2 id="Googleフォーム側にGASを設定する">Googleフォーム側にGASを設定する</h2>
最後にGoogleフォーム側にGASの設定をしていきます。
先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。
<img src="https://ik.imagekit.io/plaid/f3803fe8-59ed-4257-8b73-9d6953025453/%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-1915.33.49.png" alt="スクリーンショット2023-10-1915.33.49.png">
スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。
<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",
 "event_name": "event_name",
 "values": "values"
}

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/ae2a974f9e050db947a1a4084d40c534/craft/CwjsG4VSkMkDdKb3UUURUaqyBA1Xcjjw";
 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">
ここまでの設定が完了したら実際にフォームに回答を送信してみて、指定したuser_idでイベントが発火するのかを確認してみてください！
<h2 id="終わりに">終わりに</h2>
今回の記事はここまでになります！ 
Craftを使えばGoogleフォームでのエンドユーザーの行動をトリガーにして、様々なアクションをKARTE内で実行することができるようになります。今回はその一例としてイベントを発火させてみました。普段、KARTEを使用していると、特定のユーザーに特定のイベントを運用者側から発火させたいが、出来ない、、、みたいな場面に遭遇することもあるかと思いますが、その際は是非Craftを使ってみてください！
それでは今回の記事はここまでにしたいと思います！ 
また次回の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で特定のユーザーに特定のイベントを管理者側から発火させるための方法を紹介します。

Googleフォームの入力内容をもとにして、KARTEで特定のuser idにイベントを発火させる