こんにちは、カスタマーエンジニアの神谷です！年末年始でラーメン食べ過ぎたのに運動しなかったので太ってしまい、1月中に戻したいと思っています。

さて今回は、KARTEで何かしらのイベントが発生した際に、Craft Functionsを使ってそのログをスプレッドシートに貯めていく方法をご紹介したいと思います。例えば、次のような場合です。

KARTEのアンケート接客の回答内容をスプレッドシートに連携したい
一定金額以上の購入をした人の情報をスプレッドシートにまとめたい

今回は例として前者の、KARTEのアンケート接客の回答内容をスプレッドシートに連携する方法を説明します。今のKARTEのアンケート接客の場合、回答内容を自動でスプレッドシートに吐き出すことができず、まずはcsvファイルをダウンロードしてからスプレッドシートに入れ直す必要があって、ちょっと不便です。なので、スプレッドシートでパッと皆に共有しようと思っても、一手間かかってしまいます。でもCraft Functionsを使えば、簡単にスプレッドシートに連携できるんです。

スクリーンショット2024-01-1111.45.19.png
上のような、スプレッドシートの1行目をヘッダーとして、ユーザーIDとアンケートの質問項目及びイベント発生時間を記載し、2行目以下に回答してくれたユーザーのユーザーIDと回答結果などが出力されるようなものを作ってみます。1行目のヘッダーには、設定した質問項目の一覧が自動で書き込まれるようにするため、事前にスプレッドシートに質問項目を記載しておく必要はなく、全てKARTE上で設定できるようにします。

手順

手順は次の通りです。

GCPプロジェクトでGoogle Sheets APIを有効化する
Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する
サービスアカウントに対象スプレッドシートへの権限を付与する
KARTEのアンケート接客で、ユーザーに回答してもらうアンケートを作成して公開する
KARTEのCraft接客テンプレートで、アンケートの回答結果を取得する接客を作成して公開する
アンケートの回答内容をスプレッドシートに連携するためのCraft Functionsを作成する

順番に説明します。

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作成時に必要になるので、取っておいてください。

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

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

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

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

JSONキーに含まれるclient_emailの値を入力し、権限には 編集者 を選択します。

以上で、Functionからスプレッドシートにアクセスするための準備は完了です。

4. KARTEのアンケート接客で、ユーザーに回答してもらうアンケートを作成して公開する

スクリーンショット2024-01-0912.11.54.png
今回は、上のようなアンケートを制作します。選択式のものと自由回答形式のものを混ぜており、型式がどのようなものでも関係なく取得できることを、体験していただければと思います。

スクリーンショット2024-01-0913.36.57.png
スクリーンショット2024-01-0913.45.20.png
KARTEの接客サービス作成画面を開き、テンプレート選択画面でアンケートと検索してみてください。そこで何か1つ選択し、あとは画像のように適当な質問をいくつか作成してみましょう。ちなみに自分がラーメンと格闘技が大好きなので、今回は上記のようなアンケートを作ってみました。あくまでもテストなので、1つのテンプレートだけを作り、配信率を100%にして、常にそれが出るようにしていますが、ここは皆さんのお好きなように変更してください。

次に、アンケートの配信に関する設定をしておきます。
スクリーンショット2024-01-0913.40.43.png
スクリーンショット2024-01-0913.41.01.png

今回はテストなので、配信対象を自分で適当に作ったセグメントのみにしています。この部分に関しては、実際に配信する際には対象者をきちんと設定してください。また、アンケート接客の発動も、あくまでもテストのため、ページへのアクセス毎にして毎回表示されるようにしています。ここは実際には、セッション毎に出したりユーザー毎に出したり、皆さんのやりたい設定に直してください。ここまでできたら、保存して公開します。

5. KARTEのCraft接客テンプレートで、アンケートの回答結果を取得する接客を作成して公開する

ただ単に、KARTEのアンケート接客を作ってCraft Functionsのコードを書くだけでは動作しません。その両者の間を取り持つために、Craftの接客テンプレートを使って、アンケートの回答が来たら、それをきっかけにCraft Functionsを動かすためのCraft接客も必要です。

スクリーンショット2024-01-0913.51.04.png
まずは、KARTEの接客サービス作成画面でCraftと検索してください。そこで出てくる2つのうち、Craft Functions連携を選択します。

まず、対象ユーザーとトリガーの設定をしてしまいましょう。
スクリーンショット2024-01-0913.53.48.png
対象ユーザーは全員にしておきます。アンケートの回答が来た場合、その一部しかスプレッドシートに連携されないのは変な話なので、ここは全員が対象になるようにします。

スクリーンショット2024-01-1112.42.30.png
スクリーンショット2024-01-1112.42.42.png
続いて、トリガーの設定です。今回はアンケートの結果を取得してスプレッドシートに吐き出すので、アンケートの回答イベントの接客サービス名が◯◯に等しい、という条件を利用します。上記の画像のように、配信トリガーのイベントでアンケート回答を選択し、フィールドに接客サービス名、比較条件で次に等しいを選んでください。そしてその中身に、今回作成したアンケート接客を指定します。

スクリーンショット2024-01-1113.18.17.png
あとは、アクションの設定を行いましょう。アクションの接客タイプでCraftと検索してそれを選んでください。配信率は100%にしたうえで、編集をクリックすると。上記の画面に移ります。ファンクション名には実行する関数名、nameには任意の名称を設定します。dataには、以下の形式のjsonを入力してください。

{
  "spreadsheet_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "sheet_name": "xxxxxxxxxxxxxxxx",
  "record": [
    {
      "column": "ユーザーID",
      "value": "#{user_id}"
    },
    {
      "column": "好きなラーメンは？",
      "value": "#{answer_1}"
    },
    {
      "column": "好きな格闘技は？",
      "value": "#{answer_2}"
    },
    {
      "column": "1日何時間寝ますか？",
      "value": "#{answer_3}"
    },
    {
      "column": "名前の由来を教えてください",
      "value": "#{answer_4}"
    },
    {
      "column": "イベント発生時刻（日本時間）",
      "value": "=(#{unixtime} + 32400) / 86400 + DATE(1970,1,1)"
    }
  ]
}

今回はコードを変更せずとも、ここで質問の数や内容を変更することで出力結果を変えられるようにしています。出力先のGoogleスプレッドシートのシートIDやシート名も、ここで指定及び変更可能です。それぞれの項目の詳細については、以下にまとめました。

spreadsheet_id：スプレッドシートのURLのspreadsheets/d/以下を指定します
sheet_name：スプレッドシートのシート名を指定します
record：スプレッドシートに出力されるデータを配列形式で指定します
　・record.column：スプレッドシートに書き込むヘッダーの文言です
　・record.value：スプレッドシートに書き込むイベントの値です

ちなみに最後のイベント発生時間はデフォルトでunixtimeになっており、それを日本時間に変更するためのGoogleスプレッドシートの関数も、ここで書くことで、出力時に日本時間になります。ただし、時刻まで表示する場合は、Googleスプレッドシート側で表示形式を変更する必要があります。

スクリーンショット2024-01-1113.27.14.png
スクリーンショット2024-01-1113.26.36.png
次に、変数として設定したアンケートの回答に関する設定を行います。データ管理をクリックすると上の画面に遷移します。今回の例では、次のようなユーザー情報変数を設定しています。回答が来るたびにそれを取得してスプレッドシートに出力するので、最新の値にしておいてください。

#{answer_N}: アンケート回答内容
　・すべての期間、アンケート回答、xxxx の、最新の値
#{unixtime}: アンケート回答日時
　・すべての期間、アンケート回答、送信日時の、最新の値

ユーザーIDに関しては、既にKARTEの中でプリセットされており、定義せずとも使えます。ここまでできたら、保存して公開してください。

6. アンケートの回答内容をスプレッドシートに連携するためのCraft Functionsを作成する

最後に、アンケートの回答内容をスプレッドシートに連携するためのCraft Functionsを作成します。サンプルコードは、下記URLで公開しています。

https://github.com/plaidev/craft-codes/tree/main/craft-functions/event-trigger-spreadsheet-collection

ソースコードの取得手順は、以下の通りです。

[Craft > ファンクション > 作成 > テンプレートから作成] を選択
KARTEで特定のイベントが発生した際に、スプレッドシートにそのログを溜める方法というテンプレートを検索し「取得」ボタンをクリック
「反映」ボタンをクリック
Functionを有効化して保存

まず、Craft Secret Managerにサービスアカウントのキーを登録しましょう。ここでつけたシークレットの名前を、後で変数として使用します。
スクリーンショット2024-01-2219.11.47.png

[Craft > シークレット] からシークレットを新規作成します
サービスアカウントのjsonキーは、中身を丸ごとコピペして適当な名前をつけて保存してください

続いて重要なところについて、以下順番に見ていきましょう。

const LOG_LEVEL = '<% LOG_LEVEL %>';
const SERVICE_ACCOUNT_KEY_SECRET = '<% SERVICE_ACCOUNT_KEY_SECRET %>';

スクリーンショット2024-01-1113.05.26.png
Craft Functionsの変数設定画面で、SERVICE_ACCOUNT_KEY_SECRETに、サービスアカウントのJSONキーの値を登録した、シークレットの名前を入力してください。そうすれば、そのシークレットを利用できるようになります。

async function getHeaderRow(sheets, spreadsheetId, sheetName) {
  const res = await sheets.spreadsheets.values.get({
    spreadsheetId: spreadsheetId,
    range: `${sheetName}!A1:Z1`,
  });

  return res.data.values ? res.data.values[0] : [];
}

この部分では、スプレッドシートのAPIを利用して、1行目（ヘッダー行）を取得しています。スプレッドシートのIDとシート名を参照し、A1セルからZ1セルまで、すなわち1番上の行をヘッダーとして指定してそこから結果を取得しています。最後のreturnで、データが存在する場合は1行目のデータを、存在しない場合は空の配列を返します。

const record = data.jsonPayload.data.record;
const sheetName = data.jsonPayload.data.sheet_name;
const spreadsheetId = data.jsonPayload.data.spreadsheet_id;

ここで、KARTEのCraft接客で設定した、イベントデータの内容（今回はアンケートの回答）や、それを出力するためのGoogleスプレッドシートに関する情報を取得しています。既に説明したように、KARTE側で設定した値を引っ張ってくるので、出力するGoogleスプレッドシートを変えたくなっても、このコードをいじる必要はありません。

ここまでできたら、Craft Functionsを保存してアンケート接客も公開したことを確認したうえで、実際に試してみてください。まっさらなスプレッドシートに、アンケートの質問内容と回答結果が表示されるはずです。

おわりに

今回は、KARTEで特定のイベントが発生した際に、スプレッドシートにそのログを貯める方法をご紹介しました。ご紹介したアンケート接客の回答内容を貯める以外にも、様々な使い方ができるので、ぜひ試してみてください！

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

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

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

↓ PLAIDで働きたい

KARTEで特定のイベントが発生した際に、スプレッドシートにそのログを溜める方法