最近、ホットクックで鶏胸肉の低温調理にハマっています。
こんにちは、Customer EngineerのUGです！

さて、皆様はWebサイト上にアンケートを作って、それに回答してくれた人にお礼メールだったり、そこで収集したメールアドレス宛に新規のキャンペーンメールを配信したいと言ったことを考えたことはありませんか？お客様と日々会話をしているとアンケートツールからスプレッドシートに連携したものを毎日手動で配信ツールに連携しているというような運用をしていることもあるそうです。しかし、KARTE Craftを使えば手動で連携などをせずとも自動で回答内容を配信リストにすることができるようになります！それにより日々の業務を圧迫せずに興味を持ってれたエンドユーザーにメールを送信することが出来るようになります！
今回作成するフォームや連携するスプレッドシートはのイメージは以下のような感じです！
スクリーンショット2024-02-1416.46.22.png
スクリーンショット2024-02-1418.55.00.png

全体像

実現する処理の全体像は、次の通りです。
スクリーンショット2024-01-3118.53.01.png

少し長いですが、イメージとして以下のような処理です。

KARTE Blocksを利用してアンケートを配信
ユーザーが送信ボタンを押したら、入力内容をCraft Functionsに連携
Craft Functionsから連携内容をスプレッドシートに入力
Datahubのフェデレーションテーブルを利用して、スプレッドシートの内容を参照する
Datahub内の連携されたデータを利用して、Message βでリストを作成する

今回は車の試乗キャンペーンのアンケートフォームを想定して、ソリューションを紹介していきます。一部手順はこちらのソリューションブログの記事とも内容が被るところもあるため、是非合わせて読んでみてください！

実装手順

実装の手順は次の通りです。

GCPプロジェクトでGoogle Sheets APIを有効化する
Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する
サービスアカウントに対象スプレッドシートへの権限を付与する
スプレッドシートに入力内容を連携するCraft Functionsを作成する
Craft Functionsにデータを連携するためのアンケートを Blocksで作成する
連携されたデータをフェデレーションテーブルを使って参照して、Message βのリストを作成する

順番に説明します。

1. GCPプロジェクトでGoogle Sheets APIを有効化する

ここから今回のフォームの入力内容をエクスポートするためのスプレッドシートを作成していきます。
まず、Google Sheets APIを有効化します。
公式ドキュメントに記載の通り、Google Workspaceだけでは完結せず、GCPプロジェクトを利用する必要があります。

Google Workspace での開発 | Google for Developers

適当なGCPプロジェクトを作成または選択し、[APIとサービス > 有効なAPIとサービス > APIとサービスの有効化] からGoogle Sheets APIを検索し、有効化します。

スクリーンショット2023-08-1413.09.39.png

スクリーンショット2023-08-1413.10.01.png

スクリーンショット2023-08-1413.10.10.png

2. Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する

次に、同一GCPプロジェクトでGoogleサービスアカウントを作成します。後にそのアカウントを使って認証をします。

[IAMと管理 > サービスアカウント > サービスアカウントを作成] から適当な名称のアカウントを作成します。

スクリーンショット2023-08-1413.15.34.png

作成したサービスアカウントを選択し、[キー > 鍵を追加 > 新しい鍵を作成] からJSON形式のキーファイルをダウンロードします。

スクリーンショット2023-08-1413.16.12.png

作成したサービスアカウントを使ってCraft Functionsで認証するために、ダウンロードしたJSONキーファイルの中身をCraft Secret Managerから利用可能にします。

KARTEの管理画面を開き [Craft > シークレット > 作成] からシークレットを作成し、適当な名称でJSONキーファイルの中身を登録します。

スクリーンショット2023-08-1413.23.18.png

3. サービスアカウントに対象スプレッドシートへの権限を付与する

Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、閲覧権限や編集権限を付与する必要があります。

Functionからデータを読み書きしたいスプレッドシートを開き、右上の [共有]ボタンから当該サービスアカウントに対する権限を付与します。

スクリーンショット2023-08-1514.20.04.png

JSONキーに含まれるclient_emailの値を入力し、権限には 編集者 を選択します。
以上で、Functionからスプレッドシートにアクセスするための準備は完了です。
参考として今回は下記のようなスプレッドシートを作成しました。
スクリーンショット2024-02-1418.55.00.png

4. スプレッドシートに入力内容を連携するCraft Functionsを作成する

次に、今回のSolutionのメインになるCraft Functionsの作成をしていきます。サンプルとなるソースコードは以下に掲載しています。
https://github.com/plaidev/craft-codes/tree/main/craft-functions/form-to-spreadsheet

作成手順は次の通りです。

[Craft > ファンクション > 作成 > テンプレートから作成] を選択
フォーム入力データをスプレッドシートとMessage βの配信リストに連携するというテンプレートを検索し「取得」ボタンをクリック
「反映」ボタンをクリック
Functionを有効化して保存

簡潔に変数やコードの説明をしていこうと思います。まずは変数の説明からです、今回のSolutionで設定する変数と説明を以下の通りです。

LOG_LEVEL
- 他のSolutionと同様にログのレベルを定義する変数です。例：DEBUG
SERVICE_ACCOUNT_KEY_SECRET
- 作成したサービスアカウントを使ってCraft Functionsで認証するために、ダウンロードしたJSONキーファイルの中身をCraft Secret Managerの名前です。例：UG_KEY
SPREADSHEET_ID
- 作成したスプレッドシートのidを定義する変数です。idの確認方法はスプレッドシートのリンクの一部をご確認ください。確認方法は右記のようなリンクのxxxとなっている部分になります。https://docs.google.com/spreadsheets/d/xxxx/edit#gid=0
SHEET_NAME
- 作成したスプレッドシートのうちの今回書き込む対象のシートの名前を定義する変数です。例：UG_SHEET
FORM_FIELDS
- 後述で作成するアンケート画面で使用するフォームの各種input要素のname属性の値をカンマ区切りで入力します。例：firstName,lastName,phone,email,purpose
SHEET_RANGE
- シートの中で入力箇所としたいセルの範囲を定義する変数です。例：A1:Z9999

次にスクリプトの重要な部分を掻い摘んで解説します。
下記の部分がスプレッドシートに書き込むためのスクリプトになります。

async function addSsValues(sheets, range, values) {
  await sheets.spreadsheets.values.append({
    spreadsheetId: SPREADSHEET_ID,
    range,
    valueInputOption: 'USER_ENTERED',
    resource: {
      values,
    },
  });
}

下記の部分がフォームからの入力データからカンマ区切りで入力してもらった変数の項目に従って、スプレッドシートに書き込むためのデータを取り出しているスクリプトです。

  const values = {};
  VALUES.forEach(field => {
    values[field] = body[field];
  });

下記の部分が登録したシークレットを使用してサービスアカウントの認証をしている部分のスクリプトになります。

const secrets = await secret.get({ keys: [SERVICE_ACCOUNT_KEY_SECRET] });
const _jsonKey = secrets[SERVICE_ACCOUNT_KEY_SECRET];
const jsonKey = JSON.parse(_jsonKey);

const jwtClient = new google.auth.JWT(jsonKey.client_email, null, jsonKey.private_key, [
  'https://www.googleapis.com/auth/spreadsheets',
  ]);

5. Craft Functionsにデータを連携するためのアンケートを Blocksで作成する

上記で作成したfunctionに対してデータを連携するためのアンケートをBlocksで作成していきます。作業の内容はこちらのブログと同様なので是非こちらも読んでみてください！フォームのサンプルコードも同様のものをご利用いただければ問題なく動作するようになっております！細かいKARTE Blocks の設定方法は割愛して、フォームを実装する上でサンプルコードを掲載します。

KARTE Blocks のコードエディターで設定するJavaScript例は以下になります。実装のポイントとしては、Craft Functionsの特別なレスポンスのステータスに応じてフロント側のメッセージの表示を出し分けしています。

const CRAFT_FUNCTIONS_ENDPOINT = 'https://t.karte.io/hook/xxxxxxxx/craft/xxxxxxxx';
const COOKIE_KEY = 'krt.vis';

const submitButton = document.querySelector('button[type="submit"]');
const errorMessage = document.querySelector('.error-message');

function getVisitorIdFromCookie() {
  const visitorIdMatch = document.cookie.match(new RegExp(`${COOKIE_KEY}=([^;]*)`));
  return visitorIdMatch ? visitorIdMatch[1] : null;
}

function updateResMessage(text) {
  errorMessage.textContent = text;
}

function updateButtonState(buttonState) {
  submitButton.disabled = buttonState;
  submitButton.style.opacity = buttonState ? '1' : '0.8';
  submitButton.style.cursor = buttonState ? 'auto' : 'pointer';
  submitButton.style.backgroundColor = buttonState ? 'gray' : '#2aab9f';
}

async function craftPost(postData) {
  fetch(CRAFT_FUNCTIONS_ENDPOINT, {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(postData),
  })
    .then(async result => {
      if (result.status === 400) {
        updateResMessage('入力内容に問題があります。確認して再度お試しください。');
        updateButtonState(false);
      } else if (result.status === 500) {
        updateResMessage('フォームの送信に失敗しました。間をおいてもう一度お試しください。');
        updateButtonState(false);
      } else if (result.ok) {
        updateResMessage('ありがとうございます。申し込み完了しました。');
        updateButtonState(true);
      } else {
        throw new Error(await result.text());
      }
    })
    .catch(error => {
      console.error('Error:', error);
      updateResMessage('フォームの送信に失敗しました。間をおいてもう一度お試しください。');
      updateButtonState(false);
    });
}

document.querySelector('.form').onsubmit = async event => {
  event.preventDefault();

  const form = event.target;
  const postData = {};

  for (const input of form.elements) {
    if (input.name) {
      postData[input.name] = input.value;
    }
  }

  try {
    postData['visitorId'] = getVisitorIdFromCookie();

    updateButtonState(true);
    await craftPost(postData);
  } catch (error) {
    console.error('エラー:', error);
  }
};

以上で設定は完了です！
実際のアンケート画面のイメージとスプレッドシートへの連携イメージは下記のような感じです！
スクリーンショット2024-02-1416.46.22.png
スクリーンショット2024-02-1418.55.00.png

6. 連携されたデータをフェデレーションテーブルを使って参照して、Message βのリストを作成する

次にフェデレーションテーブルを作成して、そのデータをMessageのリストとして連携していきます。フェデレーションテーブルの作成方法とMessage βのリストを作成する具体的な方法は割愛させていただきます。概要としてはスプレッドシートの内容をフェデレーションテーブルを用いて全件Datahubに連携して、その内容をクエリで抽出したものをMessageβのリスト作成機能で配信リストにします。それぞれの機能の詳細は、次のドキュメントをご覧ください！

おわりに

少し長くなりましたが、今回は「フォーム入力データをスプレッドシートとMessage βの配信リストに連携する」の紹介でした。これによりページの一番下にフォームを作成し、そこで集めたメールアドレスを使ってメール配信リストを作成することもできますし、他のツールで出しているようなアンケートをKARTEで作成してスムーズにMessageβの配信リストにすることができるようになりました！皆さんも是非活用してみてください！

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

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

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

Craft Functionsでフォーム入力データをGoogleスプレッドシートに連携し、KARTE Messageのメール配信リストに利用する