PLAIDSolution Blog
カスタマーエンジニア積極採用中
Googleフォームの入力内容をもとにして、KARTE Actionのアクションテーブルの内容を上書きする

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

Yuji Yoshida
Yuji Yoshida

はじめに

スキンヘッドにしてから頭皮の乾燥が気になるお年頃になりました、どうもCEのUGです。

今回は前回に引き続きGoogleフォームへの入力をトリガーにして色々やっていくシリーズの第2弾です！
前回の記事を読んでいない方は是非読んで見てください！

第2弾の今回はGoogleフォームの入力内容をアクションテーブルに記入するです！

それでは最後まで楽しく読んでみてください！

概要

大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったデータを特定のアクションテーブルにUpsertすると言うものです。

スクリーンショット2023-10-200.18.39.png

これによりGoogleフォームの回答内容を簡単にアクションテーブルに連携することができます！従来だとアクションテーブルにデータを連携させるためにはジョブフローを組んだり、Datahubでクエリを書いたりする必要があります。今回のSolutionを利用すれば、Datahubの操作をしなくても容易にアクションテーブル側に施策で使いたいデータを連携することができるようになります！

実装手順

実装手順は大まかにGoogleフォーム側の設定とCraft側の設定の二つに分けられます。

  1. Googleフォームを作成する
  2. 書き込み先のアクションテーブルを作成する
  3. API v2アプリを作成する
  4. アクションテーブルを上書きするためのCraft Functionsを作成する
  5. Googleフォーム側にGASを設定する

Googleフォームを作成する

まずはGoogleフォームを作成します。この作業に関しては特にKARTE特有の何かを考慮する必要がございません。必要に応じてGoogleアカウント等をご自身で作成頂き、フォームを作成してください。
参考：フォーム作成に関するHelpページ

注意点として後に記述するGASとの整合性を保つために今回のSolution Blogのハンズオンでは下記の画像を参考にGoogleフォームを作成してください。カスタマイズも可能ではありますが、その場合は後のGASの記述とファンクションの記述内容を合わせる必要がありますので、その点だけご注意ください。

スクリーンショット2023-12-1321.12.01.png

今回は保険等の商品詳細ページ上に今週の制約数を接客で表示するというケースを想定してGoogleフォームを作成していきます！

ここまでできたら次にKARTE側の設定を行なっていきます！

書き込み先のアクションテーブルを作成する

今回のファンクションでGoogleフォームの入力内容を書き込むための書き込み先となるアクションテーブルを作成します。
Action>アクションテーブル>作成>空のテーブルを作成を選んでください。
スクリーンショット2023-10-201.29.05.png

スキーマの設定は下記画像を参考にして作成してください。Googleフォームの内容をカスタマイズした場合はその内容に適宜修正してください。フォーム側の質問項目に沿ってアクションテーブル側のスキーマを対応する形に修正してください。

スクリーンショット2023-12-1321.19.42.png

接客から参照したい場合等はWidgetからの参照にチェックをつけてください。
今回の記事ではつけていません。
スクリーンショット2023-10-201.34.44.png

次はCraft側の設定を行なっていきます。

API v2アプリを作成する

まずは今回使用するAPI v2 appを作成していきます。
ストア > API v2設定から下記の画像を参考にAPI v2 appを新規作成してください。

スクリーンショット2023-10-200.25.48.png

アプリタイプはtoken
Permission設定はbeta.action.actionTable.records.upsertを付与してください。
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。

アクションテーブルを上書きするためのCraft Functionsを作成する

次にファンクションを作成します。
サンプルとなるソースコードは、GitHubで公開しています。

作成する際に変数タブで下記の変数の値を設定してください。

  • SECRET_NAME
    • 事前に作成したCraft Secret Manager に登録した名前

以下で簡潔にスクリプトの内容を説明します！

アクションテーブルを上書きするために必要な情報を下記で定義しています。Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。カスタマイズした質問項目に合わせて、hook_data.body.xxxのxxx部分を修正してください。

    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;

上記の部分で定義した変数をアクションテーブルに書き込む作業の下記の部分で実施しています。

    try {
        await karteApiClient.postV2betaActionActiontableRecordsUpsert({
            table: TABLE_ID,
            data: {
                pageurl: pageUrl, 
                salescount: salesCount,
                others
            }
        });
        logger.log(`${TABLE_ID} is updated`);
    } catch (e) {
        logger.error(e);
    }

ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。

スクリーンショット2023-10-200.32.40.png

Googleフォーム側にGASを設定する

最後にGoogleフォーム側にGASの設定をしていきます。

先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。

スクリーンショット2023-12-2113.04.07.png

エンドポイントのxxxの部分はご自身の環境に合わせて適宜変更してください！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。titleAliasMappingの部分をカスタマイズした質問項目に合わせて修正してください。

const titleAliasMapping = {
  "ページURL": "PageURL",
  "今週の成約数": "SalesCount",
  "備考": "Others"
}

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

  for (var i = 0; i < 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);
  }
}

スクリプトの記述が完了したら、このスクリプトのトリガーの設定を行なっていきます。
下記の画像を参考にフォーム送信時にスクリプトがトリガーされるようにトリガーを設定してください。

スクリーンショット2023-12-191.57.00.png

ここまでの設定が完了したら実際にフォームに回答を送信してみて、アクションテーブルにデータが書き込まれるかを確認してみてください！

スクリーンショット2023-12-1321.44.32.png

終わりに

今回の記事はここまでになります！

今回のファンクションを使えば、WebサイトでGoogleフォームに記述してもらった情報を接客で表示できるようになったりと様々なことに利用ができるようになります！最後まで読んでいただきありがとうございました！

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！
ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

↓ PLAIDで働きたい

※KARTE Craftをまだ有効化していない場合はこちらからお問い合わせください！

記事をシェア