Solution Blog

Kazuhisa Fukuda

Kazunori Kamiya

Yusuke Kobayashi

Masamichi Kanakubo

Kazuki Shimizu

Shin Yamamoto

Yuichiro Kohata

Shiori Megumi

Kai Murakami

Shogo Michihata

Yuji Yoshida

Akihiro Nakano

Kasumi Shimamoto

Daikichi Sasamori

Yuusuke Hasegawa

Jumpei Ikegami

Manabu Yazawa

Yusuke Yajima

Kippei Wada

Ikumi Watanabe

Jumpei Koshio

<p>こんにちは、Customer Engineerのkazです！最近、『チ。-地球の運動について-』に夢中になっています。学生時代に感じた物理への憧れを思い出させてくれる作品で、ぜひ皆さんにもおすすめしたいです。私はピャスト伯が好きです。</p>
<p>さて、近年企業が顧客理解を深めるためにアンケートやレビューなどの1st Partyデータを活用することが一般的になっています。しかし、膨大な量のフリーテキスト回答データを人手で分析するのは大変な作業です。</p>
<p>KARTE Craft AI Modules では、アンケートなどで収集された自由記述データに対して、文意の成分ごとの大きさをベクトルサイズで表現する機能を提供します。これにより、肯定的な感情を含む回答を効率的に抽出したり、回答の傾向を数値化することができます。</p>
<p>具体的な活用事例としては、大規模アンケートの感情分析や、商品・サービスに対するユーザーの評価把握などが考えられます。KARTE Craftのこの機能を使えば、膨大なテキストデータの中から重要なインサイトを見出すことができるでしょう。</p>
<p>ぜひ、KARTE Craft AIモジュールを活用して、テキストデータの高度な分析に挑戦してみてください。</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。<br>
今回は、一例として食品についてのレビューに「商品に満足している」「商品に不満がある」という文意が、それぞれどの程度含まれているかを分析しました。</p>
<p>分析を実行すると、スプレッドシーに入力されているテキストごとに、Craft Functions変数で指定したキーワードの文意の含有量が計算され、 Google スプレッドシートに出力されます。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>文意の大きさは 0~1 の数値で 1 に近いほど文意が強いことを表しています。<br>
一例として2行目の商品レビューを例にデータを読み解いてみると、文意の大きさは</p>
<ul>
<li>「商品に満足している」: 0.392</li>
<li>「商品に不満がある」：0.301</li>
</ul>
<p>となっています。そのため、このレビューは「商品に満足している」という意味合いの強いレビューだと解釈することができます。このように、この分析によるアウトプットは膨大な量のフリーテキストから定量的に文意を抽出することで、回答の傾向を数値化するのに役立つでしょう。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>KARTE Craft Functions, KARTE Craft AI Modules を利用していることを前提としています。</li>
<li>Google SpreadSheet API を使用することを推奨しています。</li>
<li>本ソリューションは Google Spread Sheet API を通わずに使用することも可能ですが、配布しているテンプレートは SpreadSheet を使ってデータの入出力を行うように作られているため、Spread Sheet APIを使用しない場合は Functions を適宜カスタマイズしてご利用ください。</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントを作成する</li>
<li>GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントに対象スプレッドシートへの権限を付与する</li>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>Craft</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.craft.aimodules.openai.embeddings</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>3. Googleサービスアカウントを作成する</h3>
<p>GoogleのサービスでAPIを利用するために、Googleサービスアカウントを作成します。</p>
<ul>
<li>Google Cloudのコンソール画面を開く
<ul>
<li>アカウントやプロジェクトが無い場合は作成してください</li>
</ul>
</li>
<li>[IAMと管理 &gt; サービスアカウント &gt; サービスアカウントを作成] から適当な名称のサービスアカウントを作成</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/227adf6a-c6bc-42ea-8235-8f3c762422eb/%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-08-1413.15.34.png" alt="スクリーンショット2023-08-1413.15.34.png"></p>
<ul>
<li>作成したサービスアカウントを選択し、[キー &gt; 鍵を追加 &gt; 新しい鍵を作成] からJSON形式のキーファイルをダウンロード</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/faefbf7a-98af-4a2f-a672-e436f2e8cf0c/%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-08-1413.16.12.png" alt="スクリーンショット2023-08-1413.16.12.png"></p>
<p>ダウンロードしたキーファイルは、後の手順で利用します。</p>
<h3>4. GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Googleサービスアカウントに対象スプレッドシートへの権限を付与する</h3>
<p>Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、対象のGoogleサービスアカウントに対して権限を付与する必要があります。</p>
<ul>
<li>対象スプレッドシートを開き、右上の [共有]ボタンをクリック</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/1d490492-2ff5-409a-97e2-8f256b0eee49/%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-08-1514.20.04.png" alt="スクリーンショット2023-08-1514.20.04.png"></p>
<ul>
<li>ダウンロードしたキーファイルに含まれるclient_emailの値を入力し、権限には [編集者] を選択して [送信]</li>
</ul>
<h3>6. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>自由回答テキストに含まれる文意を Text Embedding で成分ごとにスコア化する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベル</li>
</ul>
</li>
<li><code>CRAFT_APP_TOKEN_SECRET_NAME</code>
<ul>
<li>API v2 アプリのアクセストークンを登録したシークレットの名前です。</li>
</ul>
</li>
<li><code>EMBEDDING_KEYWORDS</code>
<ul>
<li>に用いるキーワード</li>
<li>複数指定する場合はカンマ区切りで指定します。
<ul>
<li>例：<code>商品に満足している,商品に不満がある</code></li>
</ul>
</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>Googleサービスアカウントを登録したシークレットの名前</li>
</ul>
</li>
<li><code>SPREADSHEET_ID</code>
<ul>
<li>GoogleスプレッドシートID</li>
<li>スプレッドシートのURLの <code>https://docs.google.com/spreadsheets/d/#{SPREADSHEET_ID}/</code> より取得できる英数字です。</li>
</ul>
</li>
<li><code>SHEET_NAME</code>
<ul>
<li>連携対象のGoogleスプレッドシートのシート名</li>
<li>例：<code>Sheet1</code></li>
</ul>
</li>
<li><code>TEXT_EMBEDDING_MODEL</code>
<ul>
<li>Text Embedding に使用するモデル名</li>
<li>現在使用できるモデルは <a href="https://developers.karte.io/reference/post_v2beta-craft-aimodules-openai-embeddings">Developer Portal - Enterprise grade embeddings</a> の <code>BODY PARAMS</code> より確認できます。</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/survey-text-embedding-scoring">craft-codes/craft-functions/survey-text-embedding-scoring at main · plaidev/craft-codes</a></p>
<h2>7. Craft Functionsのエンドポイントを作成する</h2>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。まずスプレッドシートのA1に <code>input</code> というヘッダを作成し、続くA列のセルに分析したいテキストデータを入力します。</p>
<p><img src="https://ik.imagekit.io/plaid/443c9b62-01f7-4b3b-b660-143bbc5e0d6e/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0516-19-46.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0516-19-46.png"></p>
<p>つづいて、[変数] タブの <code>EMBEDDING_KEYWORDS</code> に文意の大きさを測定したいキーワードを入力し、[保存]します。</p>
<p>最後に、ターミナルなどの適当な実行環境からエンドポイントへのリクエストを送信します。</p>
<pre><code class="language-bash">curl https://t.karte.io/hook/xxxxxxxx/craft/xxxxxxxx
</code></pre>
<p>問題なく設定できていれば、次のような表示が実現できるはずです。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>なおKARTE Datahubの<a href="https://developers.karte.io/docs/datahub-federation-table">フェデレーションテーブル</a>機能を使うことで、スプレッドシート上のデータに対してDatahubからSQLクエリを発行し、スプレッドシート上のデータを直接抽出することができます。その結果をDatahubのダッシュボードで可視化したり、紐付けテーブルにエクスポートしてKARTE上のユーザーに紐付けてセグメント条件に利用したりといった活用もできます。</p>
<h2>補遺1：スコアの算出の仕方</h2>
<p>文意の大きさを算出する際、本ソリューションでは以下の流れで数値計算を行なっています。</p>
<ol>
<li>Craft Functions変数で指定したキーワードを Text Embeddings によりベクトル化</li>
<li>スプレッドシートから入力されたテキストを Text Embeddings によりベクトル化</li>
<li>2つのベクトルのコサイン類似度を計算したものを文意の大きさとして採用</li>
</ol>
<h2>補遺2：ユークリッド距離を使って文意の大きさを算出する</h2>
<p>ユークリッド距離を使って文意の大きさを算出することもできます。ユークリッド距離を用いた文意の大きさの算出を有効化するには Craft Functions の[コード]の中から以下の行を検索し、該当行のコメントアウト、及びコメントインを行った上で[保存]してください。</p>
<pre><code class="language-javascript">async function outputData(sheets, scores) {
  const scoresFlatten = scores.slice(1).map(score =&gt; {
    const wk = [
      score.input,
      // コサイン類似度によりスコアリング
      ...score.scores.map(_score =&gt; _score.scoreDotProduct),
      // ユークリッド距離によりスコアリング
      // （使用するには、コサイン類似度によるスコアリングをコメントアウトし、以下の行をコメントインする）
      // ...score.scores.map(_score =&gt; _score.scoreEuclideanDistance),
    ];
    return wk;
  });
  const header = ['input', ...EMBEDDING_KEYWORDS.split(',')];

  // A1行にデータを出力
  updateSsValues(sheets, `${SHEET_NAME}!A1:Z`, [header, ...scoresFlatten]);
}
</code></pre>
<p>ユークリッド距離を使った算出では、埋め込みベクトル同士の幾何学的な距離（L2ノルム）を文書同士の類似度とみなします。ユークリッド距離を尺度とする場合、数値が0に近いほど元の文書の文意に近いと解釈します。コサイン類似度とは類似度の大小関係が逆になる点に注意してください。また、算出される数値の値域は 0~2 の間となります。</p>
<h2>おわりに</h2>
<p>今回は、KARTE Craft AIモジュールを使ったアンケートデータの高度な分析について紹介しました。大量のテキストデータの中から、感情情報や傾向を効率的に抽出できる強力な機能だと言えるでしょう。</p>
<p>アンケートを活用して顧客理解を深めることは、企業にとって重要な取り組みです。KARTE Craft AIモジュールを活用すれば、そのプロセスを大幅に効率化できます。ぜひ、この機能を活用して、アンケートデータの高度な分析に挑戦してみてください。</p>
<p>より深い顧客洞察が得られることで、製品・サービスの改善にもつながるはずです。KARTE Craft AIモジュールを最大限活用し、顧客理解を深めていきましょう！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


自由記述のテキストに含まれる感情の強さを、ベクトル埋め込みにより肯定的/否定的などの感情ごとにスコア化します。

AIがテキストの意味的要素を数値化！KARTE Craft AI Modulesを使ったテキスト分析

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法を紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法

<p>こんにちは、Customer EngineerのUGです！最近、肩の筋トレの成果が出てきて喜んでいます！</p>
<p>みなさんはWebページに来訪してくれたユーザーが花粉がたくさん飛んでいるエリアからアクセスして来た時に花粉症対策用の製品のレコメンドしたりしたいと考えたことは有りませんか？そこまでピンポイントなことは考えていなくても、ユーザーアクセスしているエリアの花粉情報を使ってなんか施策が考えられるかもなぁくらいは思ったことがあるのではないでしょうか？今回はGoogle Maps Platformの新機能である<a href="https://developers.google.com/maps/documentation/pollen/overview?hl=ja">Pollen API</a>を使って、Webブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をKARTEにイベントとして連携してみたいと思います！</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。下記の画像のようにユーザーのアクセスしてきたエリアの花粉情報がイベントとしてKARTE側に発生している状態になります。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%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%882024-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<p>位置情報を利用する前に下記のようなダイアログでエンドユーザーに許諾を取ります。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/c673bc32-7b0c-4787-a57c-f61be62c3f7d/%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%882024-03-1618.09.55.png" alt="スクリーンショット2024-03-1618.09.55.png"></p>
<p>Webブラウザから緯度経度情報を取得してCraft Functionsに連携します。その情報を下にGoogle Maps PlatformのPollen APIを利用して、花粉情報を取得してKARTEイベントを発生させます。今回のブログでは緯度経度をWebブラウザ側から連携するためにKARTE Actionのスクリプト配信を利用します。スクリプト配信でなくとも今回のCraft Functionsは利用可能です。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>CraftのGrowthプラン以上を利用していることを前提としています</li>
<li>KARTE Webのスクリプト配信を利用していることを前提としています
<ul>
<li>スクリプト配信を利用しなくても今回のCraft Functionsは利用可能ですが今回のブログではスクリプト配信を利用することを前提に話していきます</li>
</ul>
</li>
<li>Google Maps Platformの利用を前提としています
<ul>
<li>リクエスト数に応じて<a href="https://developers.google.com/maps/billing/gmp-billing?hl=ja#geocoding">課金が発生する可能性</a>があります</li>
</ul>
</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Google Cloud PlatformでAPIキーを発行する</li>
<li>KARTE Actionからスクリプト接客を配信する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>ブラウザ側から緯度経度の情報を取得して、Craft functionsからGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させる</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定してください</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET</code>
<ul>
<li>KARTE API v2アプリのtokenを登録したシークレット名を指定してください</li>
</ul>
</li>
<li><code>GOOGLE_MAPS_APIKEY</code>
<ul>
<li>Google Cloud Platformで発行したAPI Keyを指定してください</li>
</ul>
</li>
<li><code>EVENT_NAME</code>
<ul>
<li>KARTEで発生させるイベント名を指定してください</li>
</ul>
</li>
<li><code>FIELD</code>
<ul>
<li>イベント内で花粉情報を連携する際のフィールド名を指定してください</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/pollen-api">craft-codes/craft-functions/pollen-api at main · plaidev/craft-codes</a></p>
<h3>2. Craft Functionsのエンドポイントを作成する</h3>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h3>3. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>4. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Google Cloud PlatformでAPIキーを発行する</h3>
<p>Google Maps APIを利用するために、GCPにてAPIキーを発行します。<br>
GCPを利用したことがない方に関してはプロジェクトの作成から始めてください。参考までに<a href="https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja">GCPの公式ドキュメントはこちら</a>になります。</p>
<ul>
<li>[APIとサービス &gt; 認証情報 &gt; 認証情報を作成] からAPIキーを作成する</li>
<li>作成したAPIキーが以下のAPIを利用できるか確認してください
<ul>
<li>Pollen API</li>
</ul>
</li>
</ul>
<p>参考までに私が作成した際のコンソールの画面は下記になります。<br>
<img src="https://ik.imagekit.io/plaid/56a350ca-1bcf-477d-b5b0-c455bec7446d/%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%882024-03-1618.19.29.png" alt="スクリーンショット2024-03-1618.19.29.png"></p>
<h3>6. KARTE Actionからスクリプト接客を配信する</h3>
<p>Webブラウザから緯度経度情報をCraft Functionsに連携するために、KARTE Actionの接客サービスからスクリプト配信します。</p>
<ul>
<li>[KARTE Action &gt; 接客サービス] からスクリプト配信の接客を作成する</li>
<li>緯度経度を取得したいページとタイミングで配信する</li>
</ul>
<p>スクリプトの例として今回のブログの検証では下記のスクリプトを配信しています。参考スクリプトと接客アクションの編集画面は以下になります。<br>
<img src="https://ik.imagekit.io/plaid/935bb34f-1d7a-4e3c-8541-63cfe829619d/%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%882024-02-2813.59.08.png" alt="スクリーンショット2024-02-2813.59.08.png"></p>
<pre><code>if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(sendPositionToServer, handleError);
} else {
    alert(&quot;Geolocation is not supported by this browser.&quot;);
}

function sendPositionToServer(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var endpoint = &quot;xxx&quot;;  // 送信先のCraft Functionsのエンドポイントを指定

    // HTTP POSTリクエストの設定
    fetch(endpoint, {
        method: &quot;POST&quot;,
        headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude,
            visitor_id: &quot;#{visitor_id}&quot;,
        }),
    })
    .then(function(response) {
        if (!response.ok) {
            throw new Error(&quot;Network response was not ok&quot;);
        }
        return response.json();
    })
    .then(function(data) {
        console.log(&quot;Server response:&quot;, data);
    })
    .catch(function(error) {
        console.error(&quot;Error during fetch operation:&quot;, error);
    });
}

function handleError(error) {
    console.error(&quot;Error getting geolocation:&quot;, error.message);
}

</code></pre>
<p>問題なければ以下のように緯度経度取得のためのダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。<br>
まずはスクリプト配信をしているページでユーザーが訪問したら以下のようなダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>Craft Functions側でエラーが発生しなければ下記のようなイベントが発生するはずです。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%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%882024-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<h2>おわりに</h2>
<p>今回はWebブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をCraft Functions × Google Maps PlatformのPollen APIで取得してKARTEのに連携してみました。</p>
<p>これによりユーザーが花粉の多い地域からアクセスしてきた場合に花粉対策商品をレコメンドするといったような事が可能になります！これからのシーズン花粉症で苦しむ方も多いと思いますので是非活用してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Webのスクリプト配信機能を利用してブラウザ側から緯度経度の情報をCraft functionsに連携して、その情報を元にGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させるSolution

「緯度経度」からCraft Functions × Google Maps PlatformのPollen APIで「花粉情報」を取得してKARTEに連携する

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法の紹介です。Google Analytics Data APIを使うと、GA4のデータ分析を簡単に行うことができ、今回はユーザーセグメント分析の方法をご紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法

<p>こんにちは、Customer Engineerの島本です！</p>
<p>先日友達と築地にあるトーセイホテル ココネ築地銀座プレミアに行ってきました！サウナよりも湯船に浸かっている時にどこからか吹いてくる冷風が気持ちよかったです。<br>
<img src="https://ik.imagekit.io/plaid/9cdd01c2-38c0-4f90-ba2a-ae3fadb22528/IMG_1719.jpg" alt="IMG_1719.jpg"></p>
<p>さて、Craft Functionsを使用すると、社内外のさまざまなシステムから情報を取得し、KARTEとの連携をスムーズに行うことができます。ただし、1 実行あたりの起動時間の上限が 10 秒という制約や、KARTE のサーバーサイドAPIのリクエスト制限があるため、複数件レコードを一括で連携するには設計上で工夫が必要でした。</p>
<p>しかし、Craft Functionsを使用してGoogle Cloud Storage にファイル保存することで、複数件レコードを一括で連携することができます！</p>
<h2>構成図</h2>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/14fa7717-737d-4ff0-b5ab-ad5dcb5b35aa/blog%E7%94%A8.png" alt="blog用.png"></p>
<p>また、そもそも保存先のGCS の用意ができないという方もいると思いますが、<a href="https://developers.karte.io/docs/about-datahub">KARTE Datahub</a> をご利用頂いている場合は、KARTE からGCS バケットを払い出すことができます！<br>
今回はKARTE が払い出したGCS バケットを利用する方法で紹介します。</p>
<h2>注意点</h2>
<p>取得するデータサイズが大きくなると、APIからデータを取得する時間およびGCS への書き込み時間が伸びて、Craft Functions の実行時間制限を超過する可能性があります。</p>
<p>また、取得したデータがメモリサイズを超過することにより、Craft Functions が異常終了する可能性もあります。実際に処理できるデータ量を検証の上で本ソリューションの利用を検討してください。</p>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>KARTE が払い出したGCS バケットへの権限付与を有効化する</li>
<li>Googleサービスアカウントを払い出す</li>
<li>サービスアカウントに対象バケットへの権限を付与する</li>
<li>サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Craft Functions でそのサービスアカウントを使ってファイルを保存する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. KARTE が払い出したGCS バケットへの権限付与を有効化する</h3>
<p>まず、KARTE Datahub の管理画面からGCS バケットへの権限付与を有効化します。</p>
<ul>
<li>グローバルナビゲーションの[データハブ設定]を開く</li>
<li>[サービスアカウント管理]のタブを開く</li>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の部分で、[権限付与]ボタンが表示されているか確認</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/895df45f-3a23-4868-a17c-4f42a9813625/%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%882024-04-0123.19.18.png" alt="スクリーンショット2024-04-0123.19.18.png"></p>
<p>有効化されていない場合は、営業担当にお問い合わせください。</p>
<h3>2. Googleサービスアカウントを作成する</h3>
<p>払い出しGCS バケットへの権限付与をするGoogleサービスアカウントを払い出します。</p>
<ul>
<li>[Datahub設定] &gt; [サービスアカウント管理]タブを開く</li>
<li>[払い出しGoogleサービスアカウント]の[Googleサービスアカウント作成]ボタンを押す</li>
<li>ダウンロードするkeyFileのキータイプを次の選択肢から選ぶ
<ul>
<li>JSON(推奨)</li>
<li>P12</li>
</ul>
</li>
<li>認証用のkeyFileが自動でダウンロードされる
<ul>
<li><strong>一度しかダウンロードできないため、大切に保管してください</strong></li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/836ee1fa-2e98-4aa6-ad9e-6fdc698db791/%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%882024-04-0123.23.35.png" alt="スクリーンショット2024-04-0123.23.35.png"></p>
<p>ダウンロードしたkeyFileは、後の手順で利用します。</p>
<h3>3. サービスアカウントに対象バケットへの権限を付与する</h3>
<p>払い出したサービスアカウントに対して権限を付与します。</p>
<ul>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の領域で、[権限付与]ボタンを押す</li>
<li>プルダウンから、先ほど払い出したサービスアカウントを選択する</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/fe23e8b4-3690-474d-8689-59656e6a2343/%E3%83%86%E3%82%99%E3%83%BC%E3%82%BF%E3%83%8F%E3%83%95%E3%82%99%E8%A8%AD%E5%AE%9A_-_%E7%A4%BE%E5%86%85%E6%A4%9C%E8%A8%BC%E7%94%A8_kasumi_shimamoto_-_KARTE.png" alt="データハブ設定_-社内検証用_kasumi_shimamoto-_KARTE.png"></p>
<h3>4. サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functions から安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Craft Functions でそのサービスアカウントを使ってファイルを保存する</h3>
<p>最後に、実際にCraft Functionsから外部APIを叩いて、GCS バケットに保存してみます。<br>
今回は情報を取得するAPIとして、<a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder</a> を利用します。</p>
<p>作成手順は次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>外部APIから取得したデータをGoogle Cloud Storageにファイル保存する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>先ほど作成したシークレットの名前を指定します</li>
</ul>
</li>
<li><code>API_ENDPOINT</code>
<ul>
<li>データ取得元である外部サービスのAPIエンドポイントです</li>
<li>例：https://jsonplaceholder.typicode.com/posts</li>
</ul>
</li>
<li><code>BUCKET_NAME</code>
<ul>
<li>保存する先のGCS のバケット名です</li>
<li>例：karte-data-{{api_key}}
<ul>
<li>{{api_key}}の部分は、実際のapi_keyに置き換えてください</li>
</ul>
</li>
</ul>
</li>
<li><code>FILE_PATH</code>
<ul>
<li>保存するファイルのパスです</li>
<li>例：test/demo_data.json</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、サンプルコードは、下記URLで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/fetch-external-api-and-save-file-to-gcs">craft-codes/craft-functions/fetch-external-api-and-save-file-to-gcs at main · plaidev/craft-codes</a></p>
<p>以下、重要な点をかいつまんで説明します。</p>
<p>サンプルコードでは、GCS バケット上のファイルをKARTE Datahub に連携したいケースを想定して、Datahub で取り込み可能な改行区切りのJSON データに加工しています。</p>
<p>実際に利用する際には、APIのレスポンスデータ形式に合わせて変更してください。</p>
<pre><code>function formatDataToJSONLines(responseData) {
  return responseData.map(obj =&gt; JSON.stringify(obj)).join('\n');
}
</code></pre>
<p>下記関数でバケット名、ファイルのパスを指定してGCS バケットにファイルをアップロードしています。</p>
<pre><code>async function uploadDataToStorage(bucketName, filePath, jsonLinesData, jsonKey, logger) {
  const storage = new Storage({ credentials: jsonKey });
  const bucket = storage.bucket(bucketName);

  const blob = bucket.file(filePath);
  const stream = blob.createWriteStream({
    metadata: {
      contentType: 'application/json',
    },
  });

  return new Promise((resolve, reject) =&gt; {
    stream.on('error', err =&gt; {
      logger.error('Upload Error:', err);
      reject(err);
    });

    stream.on('finish', () =&gt; {
      logger.log(`Uploaded: ${filePath}`);
      resolve();
    });

    stream.end(jsonLinesData);
  });
}
</code></pre>
<p>とても簡単ですね！</p>
<p>最後に定期的にAPI からデータを取得するために、Craft Scheduler の設定をします。</p>
<p><img src="https://ik.imagekit.io/plaid/1a603aa3-3952-4232-ba1a-b4575047dedd/%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%882024-02-1318.25.41.png" alt="スクリーンショット2024-02-1318.25.41.png"></p>
<ul>
<li>Craft Functionsの<code>設定タブ</code>を開きます</li>
<li>スケジュールを有効化し、cron形式（JST）で実行時間を指定します</li>
</ul>
<p>設定は以上になります。</p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう！</p>
<p>前述のサンプルコードに必要な定数を入力した内容でCraft Functionsを作成し、実際に実行してみます。</p>
<p><img src="https://ik.imagekit.io/plaid/3fabf6ee-50c0-4ab5-a195-5ad77a389c16/%E3%83%86%E3%82%99%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%95%E3%82%9A_%E2%80%94_-zsh_%E2%80%94_173%C3%9746.png" alt="デスクトップ_—-zsh—_173×46.png"></p>
<p>gsutilを使ってGCS バケット上に保存されていることを確認できました！</p>
<p><img src="https://ik.imagekit.io/plaid/b19f0ee2-7122-409a-aa43-ef9e617ca054/%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%882024-03-2610.03.39.png" alt="スクリーンショット2024-03-2610.03.39.png"><br>
また、ファイルの中身も改行区切りのJSON データで保存されていることが確認できます。<br>
これで問題なくKARTE Datahub に連携できますね！</p>
<h2>おわりに</h2>
<p>今回は外部APIから取得したデータをGoogle Cloud Storageにファイル保存する方法について紹介しました。</p>
<p>このソリューションを活用すれば、社内外のさまざまなシステムから情報を取得してKARTE Datahub に連携することができるため、できることの幅が広がりますね！ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


外部APIから取得したデータを改行区切りのJSON形式に整形し、Google Cloud Storageにファイル保存します。

外部APIから取得したデータをGoogle Cloud Storageにファイル保存する

<p>こんにちは、Customer Engineerの島本です！<br>
こないだ同僚とサウナ旅行で長野県にある「しぇろくまサウナ」と「The Sauna」に行ってきました！大雪が降る中の外気浴はとてつもなく寒かったのですが、とても良い思い出になりました。<br>
<img src="https://ik.imagekit.io/plaid/52ef7471-407c-43e7-a170-50eccb1c2476/IMG_1694.jpg" alt="IMG_1694.jpg"></p>
<p>さて、KARTE のプロダクト群にはメール配信ができる<a href="https://karte.io/package/message/">KARTE Message</a>があるため、「<strong>KARTE でメルマガ登録フォームや資料請求フォームを作ってメールを送りたい！</strong>」というお問い合わせをいただくことが多いです。実現するためにはフォームの入力内容をKARTE のユーザーデータとして取得する必要があるのですが、これまで以下の制約がありました。</p>
<ul>
<li>KARTEのアンケート接客サービス等でフォーム入力内容をイベント送信する場合、イベント送信の失敗をフロントエンドで検知できない</li>
<li>フォーム入力内容を直接KARTEの紐付けテーブルに書き込むことができない</li>
</ul>
<p>しかし、KARTE Craft を使えば実現することができるのです！</p>
<p>今回は「フォーム入力データをHTTP経由で受け取ってKARTEのユーザーデータとして書き込む」方法について紹介します。イメージとしてはこんな感じです。<br>
<img src="https://ik.imagekit.io/plaid/4b5711ba-bf04-4b00-955b-acbb28c11275/%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-2512.58.18.png" alt="スクリーンショット2023-12-2512.58.18.png"></p>
<h1>処理の流れ</h1>
<p>全体の処理の流れは、次の通りです。<br>
今回は、フォームはKARTE Blocks で作成し、KARTEの紐付けテーブルへの書き込みを行う実装をしたいと思います。<br>
<img src="https://ik.imagekit.io/plaid/c2540177-50bd-4cae-bd0f-a41327eece1a/%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%882024-01-1215.27.50.png" alt="スクリーンショット2024-01-1215.27.50.png"></p>
<p>実現する上で必要なプロダクトやオプションは以下になります。</p>
<ul>
<li><a href="https://karte.io/">KARTE</a></li>
<li><a href="https://ecosystem.plaid.co.jp/product/karte-craft">KARTE Craft</a></li>
<li><a href="https://blocks.karte.io/">KARTE Blocks</a></li>
</ul>
<p>また、Craft Functions とKARTE Blocks との連携では次の2つの機能を利用します。</p>
<ul>
<li><a href="https://craft.developers.karte.io/craft-functions/triggers/endpoint">Craft Endpoint トリガー</a>
<ul>
<li>Craft Functionを実行するためのHTTPエンドポイント</li>
</ul>
</li>
<li><a href="https://developers.karte.io/reference/post_v2beta-track-reftable-row-upsert">Upsert refTable row API</a>
<ul>
<li>紐付けテーブルの行を更新するAPI</li>
</ul>
</li>
</ul>
<h1>実装手順</h1>
<p>実装の手順は次の通りです。</p>
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>紐付けテーブルを作成する</li>
<li>Craft Functions を作成する</li>
<li>Craft Functions の エンドポイントURLを作成する</li>
<li>KARTE Blocksでフォームを作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h2>1. API v2 アプリを作成する</h2>
<p>まず、Upsert refTable row API を利用するためのAPI v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/6fa4746b-6cd4-4767-a846-76cda4ddaa5e/%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%882024-01-1215.36.00.png" alt="スクリーンショット2024-01-1215.36.00.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.track.refTable.row.upsert</code>: Upsert refTable row API に必要</li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンを控えておく</li>
</ul>
<p>「アプリタイプ」は後から変更できないため、誤って作成した場合は、アプリを再度作成し直してください。</p>
<h2>2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h2>
<p>API v2 アプリのアクセストークンを Craft Secret Manager のシークレットとして登録します。それにより、秘匿すべきアクセストークンをファンクション上に直接記述する必要が無くなります。<br>
<img src="https://ik.imagekit.io/plaid/116765b1-4d21-4d74-8d3e-e5a4e4431e5b/image(6).png" alt="image(6).png"></p>
<h2>3. 紐付けテーブルを作成する</h2>
<p>フォーム入力データを格納するための紐付けテーブルを作成します。</p>
<ul>
<li>[グローバルメニュー &gt; すべてのメニュー &gt; Insight &gt; 紐付けテーブル] をクリック</li>
<li>右上の [作成  &gt; 空の紐付けテーブルを作成] をクリック</li>
<li>適当なテーブル名をつけて保存</li>
<li>テーブル情報タブの基本情報に記載されているテーブルIDを控えておく</li>
</ul>
<p>テーブルIDはCraft Functions の変数に記載します。</p>
<h2>4. Craft Functions を作成する</h2>
<p>フォームの入力データを紐付けテーブルに書き込んで、イベント送信するためにCraft Functions のファンクションを作成します。サンプルとなるソースコードは、Craft FunctionsのテンプレートとしてGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/form-server">craft-codes/craft-functions/form-server at main · plaidev/craft-codes</a></p>
<p>作成手順は次の通りです。</p>
<ul>
<li>[Craft &gt; ファンクション &gt; 作成 &gt; テンプレートから作成] を選択</li>
<li><code>「フォーム入力データをHTTP経由で受け取ってKARTEのユーザーデータとして書き込む」</code> というテンプレートを検索し「取得」ボタンをクリック</li>
<li>「反映」ボタンをクリック</li>
<li>Functionを有効化して保存</li>
</ul>
<p>サンプルコードの実装の特徴は次の通りです。</p>
<ul>
<li>Craft Functionsの変数で、入力項目の一覧をカンマ区切り文字列で指定することで、受付可能な項目名をサーバーサイドで制限
<ul>
<li>KARTE Blocks 側で作成するフォームの各種input要素のname属性と項目名を合わせてください</li>
</ul>
</li>
<li>Craft Functions の[特別なレスポンス]https://craft.developers.karte.io/craft-functions/triggers/endpoint/index.html#:~:text=%E8%BF%94%E5%8D%B4%E3%81%97%E3%81%BE%E3%81%99%E3%80%82-,%E7%89%B9%E5%88%A5%E3%81%AA%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9,-Craft%20Functions%E3%81%A7)を利用して各処理においてフロント側にステータスを返す</li>
</ul>
<h2>5. Craft Functions の エンドポイントURLを作成する</h2>
<p>Craft Functionsを作成して一度保存した後に、エンドポイント設定からURLを作成します。<br>
<img src="https://ik.imagekit.io/plaid/05e089f7-ae4d-4323-b209-f1af08f10d3b/%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-2514.43.22.png" alt="スクリーンショット2023-12-2514.43.22.png"></p>
<p>作成したエンドポイントURLはKARTE Blocks で作成するフォームのJavaScript 内に記載します。</p>
<h2>6. KARTE Blocks でフォームを作成する</h2>
<p>今回はサイトに埋め込むフォームを作成するためKARTE Blocks でフォームを作成します。<br>
細かいKARTE Blocks の設定方法は割愛して、フォームを実装する上でサンプルコードを掲載します。</p>
<h3>KARTE Blocks のコードエディターで設定するJavaScript例</h3>
<p>実装のポイントとしては、Craft の特別なレスポンスのステータスに応じてフロント側のメッセージの表示を出し分けしています。</p>
<pre><code>const CRAFT_FUNCTIONS_ENDPOINT = 'https://t.karte.io/hook/xxxxxxxx/craft/xxxxxxxx';
const COOKIE_KEY = 'krt.vis';

const submitButton = document.querySelector('button[type=&quot;submit&quot;]');
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 =&gt; {
      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 =&gt; {
      console.error('Error:', error);
      updateResMessage('フォームの送信に失敗しました。間をおいてもう一度お試しください。');
      updateButtonState(false);
    });
}

document.querySelector('.form').onsubmit = async event =&gt; {
  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);
  }
};
</code></pre>
<p>以上で設定は完了です！</p>
<h1>実際に動かしてみる</h1>
<p>実際に動作を確認してみましょう。</p>
<p>まずはフォームに適当な情報を入力して送信を押してみます。<br>
数秒後に「<code>ありがとうございます。申し込み完了しました。</code>」というメッセージが表示されました。<br>
<img src="https://ik.imagekit.io/plaid/0178e744-13bd-4f9b-89e9-b62649514a8a/%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%882024-01-0516.10.04.png" alt="スクリーンショット2024-01-0516.10.04.png"></p>
<p>その後、紐付けテーブルに書き込まれているか確認します。<br>
問題なく紐付けテーブルにレコードが追加されていることを確認できました！<br>
<img src="https://ik.imagekit.io/plaid/e33b4347-454e-4668-8816-28d504604097/%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%882024-01-0516.17.05.png" alt="スクリーンショット2024-01-0516.17.05.png"></p>
<p>あえて、意図的にエラーを出すためにCraft Functionsを無効化して送信を押してみます。<br>
「<code>フォームの送信に失敗しました。間をおいてもう一度お試しください。</code>」というメッセージが表示されました。<br>
<img src="https://ik.imagekit.io/plaid/68831a8d-df52-40f7-b077-fb358a468dcc/%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%882024-01-0517.04.00.png" alt="スクリーンショット2024-01-0517.04.00.png"></p>
<p>問題なくエラーハンドリングできていますね！</p>
<h1>おわりに</h1>
<p>今回は「フォーム入力データをHTTP経由で受け取ってKARTE のユーザーデータとして書き込む」方法について紹介しました。</p>
<p>フォームを作成する部分についてKARTE Blocks を使った例を紹介しましたが、もちろんKARTE を使ったポップアップでも同様の事を実現することが可能です。また、冒頭お伝えした通り、KARTE のプロダクト群にはメール配信ができるKARTE Message があるため、ジョブフローを使って紐付けテーブルをデータテーブルにインポートすれば、KARTE Message で配信するリストとしても活用することができます！</p>
<p>ぜひ皆さんも活用してみてください。</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Craftを使って「フォーム入力データをHTTP経由で受け取ってKARTEのユーザーデータとして書き込む」方法について紹介します。

フォーム入力データをHTTP経由で受け取ってKARTEのユーザーデータとして書き込む

KARTEで特定のイベントが発生した際に、スプレッドシートにそのログを溜める方法の紹介です。KARTEで特定のイベントが発生した際に、Craft Functionsを活用して、Googleスプレッドシートに直接そのログを吐き出すことができます。例えばアンケートの集計などに、活用してみてください。

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

<p>こんにちは、Customer EngineerのShinです！</p>
<p>さて、ECサイトなどにおいてランキング表示することが昨今多くなっていますが、あれは論文でも実証されている購買を促進させる効果があるものなのです。</p>
<p>特に1位の商品は他の順位よりも売り上げの増加につながり、他の順位に関しては概ね同じ効果を持つとのことです。（参考：<a href="https://www.jc.u-aizu.ac.jp/news/management/gr/2020/10.pdf">https://www.jc.u-aizu.ac.jp/news/management/gr/2020/10.pdf</a>）</p>
<p>ただ、数万点の商品・数万人が購買をするサービスにおいて、毎月そういったランキング関連の施策を作るのは相当なデータ活用をしなければなりませんし、何より面倒です。</p>
<p>そこで、今回は、購入数の商品ランキングのメール配信を毎月自動実行する方法について紹介しようと思います。</p>
<p>前提として、今回の施策は購買ができるeコマースを想定します。ただ、人材・学習系サービスなど何かしらエンドユーザーにとって魅力のある商品があり、ランキング化できるものであれば効果のある施策となるでしょう。</p>
<h1>全体像</h1>
<h3>処理の流れ</h3>
<p>実現する処理の全体像は、次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/bdd86612-d18d-46e1-b2e3-d7761592f3b9/solutionblog.png" alt="solutionblog.png"></p>
<ul>
<li>サービス内でユーザーが購入- すると、KARTEのbuyイベントが発火します。このイベントデータをKARTE Datahubで整形してランキング化</li>
<li>外部からKARTE Datahubに商品データを取り込んで、ランキング情報・ユーザーデータと紐付け</li>
<li>最後にKARTE Messageでメール配信する内容を作り、月に1度定期実行</li>
</ul>
<p>という流れになっています。</p>
<h3>最終アウトプット</h3>
<p>以下のような1〜6位のランキングにして商品情報を含めてメール施策を作ります。（2位以下は見切れております。ご了承ください。）</p>
<p><img src="https://ik.imagekit.io/plaid/cb446f6b-b139-4925-9f3d-87b3efdd8a40/2.png" alt="2.png"></p>
<h3><strong>利用するKARTEのツール・必要な知識</strong></h3>
<ul>
<li>利用するKARTEのツール
<ul>
<li><a href="https://karte.io/feature/insight/">KARTE Insight</a></li>
<li><a href="https://karte.io/package/message/">KARTE Message</a></li>
<li><a href="https://karte.io/feature/integration/">KARTE Datahub</a></li>
</ul>
</li>
<li>必要な知識
<ul>
<li>SQL</li>
<li>基礎的HTML・CSS</li>
</ul>
</li>
</ul>
<h1>前提</h1>
<p>今回作成する「全ユーザーの購入数に応じて、商品をランキング順にし、KARTE Messageで配信する」方法に関して以下が出来ていることが前提となります。</p>
<ul>
<li>ランキング化する元の情報になるイベント（購買イベント）が実装されていること
<ul>
<li>詳しくは<a href="https://support.karte.io/post/3xSCPJmmi6YamkJ3vG3vh5">イベント概要</a>を見てください</li>
</ul>
</li>
<li>商品マスタをKARTE Datahubにインポートされていること
<ul>
<li>詳しくは「<a href="https://support.karte.io/post/3xedsQYdpS0E4IPOmwE1ad">商品マスタをDatahubにインポートする</a>」を見てください。</li>
</ul>
</li>
<li>ユーザーを一意に特定するuser_idと配信先カラムのemailが入った顧客データのリストがKARTE Datahubに存在すること
<ul>
<li>詳しくは、<a href="https://developers.karte.io/docs/external-connection">外部サービス毎のデータ連携作業をする</a>を見てください。</li>
</ul>
</li>
</ul>
<h1>実装手順</h1>
<p>実装の手順は次の通りです。</p>
<ol>
<li>商品マスタをKARTE Datahubにインポートする</li>
<li>KARTE Datahubで商品のランキング化をする</li>
<li>KARTE Messageで配信のユーザーリストを作成する</li>
<li>購入数の商品ランキングのキャンペーンを作成する</li>
</ol>
<p>順番に説明します。</p>
<h2>1. 商品マスタをKARTE Datahubにインポートする</h2>
<p>まず、以下の画像の黄色になっている部分、外部システムなどにある商品データをKARTE Datahubに取り込みをすることをやっていきます。</p>
<p><img src="https://ik.imagekit.io/plaid/56e391ee-1b50-4785-9938-47ca0eebb72c/solutionblog_.png" alt="solutionblog_.png"></p>
<p>ここで言っている商品マスタとは、商品ID(item_id) / 商品名(name) / 商品画像(image) / 商品URL(url) / 商品価格(price) を最小構成にし、在庫情報などもわかるようなデータを指します。</p>
<p>既に、商品マスタデータがKARTE Datahubにある方は、この章を飛ばして「3. KARTE Datahubで商品のランキング化・配信のユーザーリストを作成する」に進んでください。</p>
<p>商品マスタをKARTE Datahubにインポートする方法はGCSやAmazonS3から取り込む形やGoogleスプレットシートに取り込むなど複数手段があります。詳細はこちらの<a href="https://support.karte.io/post/3xedsQYdpS0E4IPOmwE1ad">サポートサイト</a>を参考にして進めてください。</p>
<p>今回は、ダミーのアパレルショップのサイトをもとに施策を作ります。商品数も少ないので、手動で以下の画像のようなGoogleスプレッドシートを作りフェデレーションテーブルとしてKARTE Datahubに取り込む形にしています。</p>
<p><img src="https://ik.imagekit.io/plaid/bed2c56a-c7a4-4056-842f-a975d1992ea5/%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%880005-12-2615.18.21.png" alt="スクリーンショット0005-12-2615.18.21.png"></p>
<p>Googleスプレッドシートが作れたら、Datahubに商品マスタのダミーデータをフェデレーションテーブルで作ってみました。<br>
詳しくは、サポートタスクの<a href="https://developers.karte.io/docs/datahub-federation-table">フェデレーションテーブルを作成する</a>を見てください。</p>
<p>以下の状態になれば完了です。</p>
<p><img src="https://ik.imagekit.io/plaid/32fc7d97-0691-42e6-93cc-683c8bd11a12/7.png" alt="7.png"></p>
<h2>2. KARTE Datahubで商品のランキング化をする</h2>
<p>次に、[すべてのメニュー &gt; Datahub &gt; クエリ]のページを開きます。[作成 &gt; コレクションから作成]を押して「商品購入数/購入金額のランキング」のクエリを利用します。</p>
<p>SQLエディタのクエリを以下に変更します。</p>
<pre><code class="language-sql">WITH analysis_data AS (
  SELECT
    user_id
    , JSON_QUERY(VALUES, '$.buy.items') AS items
  FROM
    {% karte_event period[0], period[1] %}
  WHERE
    event_name = 'buy'
    AND JSON_QUERY(VALUES, '$.buy.items') IS NOT NULL
)
, convert_to_array AS (
  SELECT
    user_id
    , SPLIT(SUBSTR(items, 2 , LENGTH(items) - 2), '},{') AS items
  FROM
    analysis_data
  ),
  unnested AS (
  SELECT
    user_id
    , item
  FROM
    convert_to_array, UNNEST(items) AS item
)
, restored_to_json AS (
  SELECT
    user_id
    , CONCAT('{', REPLACE(REPLACE(item, '{', ''), '}', ''), '}') AS item
  FROM
    unnested
)
, dataset AS (
  SELECT
    user_id
    , JSON_VALUE(item, '$.item_id') AS item_id
    , JSON_VALUE(item, '$.quantity') AS quantity
    , JSON_VALUE(item, '$.price') AS price
  FROM
    restored_to_json
)
, item_count AS (
  SELECT
    user_id
    , item_id
    , SUM(IFNULL(SAFE_CAST(quantity AS INT64), 1)) AS quantity_count
    , SUM(IFNULL(SAFE_CAST(quantity AS INT64), 1) * SAFE_CAST(price AS INT64)) AS total_amount
  FROM
    dataset
  GROUP BY
    item_id , user_id
)
, item_master AS (
  SELECT
    *
  FROM
   `prd-karte-per-client.item_master_{{api_key_safe_param}}.item_master` --データセット名およびテーブル名は必要に応じて書き換えて下さい
  WHERE
    item_id IS NOT NULL
)
, aggregate_data AS (
  SELECT
    a.user_id AS user_id
    , a.item_id AS item_id
    , b.name AS name
    , b.image AS image
    , b.url AS url
    , b.price AS price
    , ROW_NUMBER() OVER(ORDER BY a.quantity_count DESC) as quantity_rank
    , TIMESTAMP_ADD(CURRENT_TIMESTAMP(), INTERVAL {{ttl_hour}} HOUR) AS expired_at
  FROM
    item_count AS a
  LEFT JOIN item_master AS b
    ON a.item_id = b.item_id
  WHERE b.item_id IS NOT NULL
    AND b.name IS NOT NULL
    AND b.image IS NOT NULL
    AND b.url IS NOT NULL
  ORDER BY
    a.quantity_count DESC
)
, filter_aggregate_data AS (
  SELECT
    *
  FROM aggregate_data
  WHERE quantity_rank &lt;= 6
)
, item AS (
  SELECT
    ARRAY_AGG(
      STRUCT(
        item_id
        , name
        , image
        , url
        , price
        , quantity_rank
        , expired_at
      )
    ) AS item_arr
  FROM
    filter_aggregate_data
)
, user AS (
  SELECT
    user_id
    , email
    , identify
    , user_fields
  FROM
    `karte-data.karte_user_ae2a974f9e050db947a1a4084d40c534.karte_user`
  WHERE
    user_id IS NOT NULL
      AND
    email IS NOT NULL
  ORDER BY sync_date ASC
)

SELECT
  user.user_id AS user_id
  , user.email AS email
  , item.item_arr AS item_arr
FROM
  user
CROSS JOIN item
</code></pre>
<p>上記のクエリでは、</p>
<ul>
<li>商品の中から購入イベントが多い順に並び替える</li>
<li>6位以内の商品データをメールに埋め込むことができるようにレコード型に変換</li>
<li>メール配信のリストにしやすいようにユーザーデータにあるuser_idと結合させる</li>
</ul>
<p>といったことをやっています。</p>
<p>クエリの中の <code> prd-karte-per-client.item_master_{{api_key_safe_param}}.item_master --データセット名およびテーブル名は必要に応じて書き換えて下さい</code> というところについては、商品マスタのテーブルのパスに変更してください。</p>
<p>ここまでできたら保存してください。</p>
<p><img src="https://ik.imagekit.io/plaid/4e52981d-6d13-45f9-99b7-26788dd765de/%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%880005-12-2615.22.52.png" alt="スクリーンショット0005-12-2615.22.52.png"></p>
<h2>3. KARTE Messageで配信のユーザーリストを作成する</h2>
<p>次に、[すべてのメニュー &gt; Messageβ &gt; リスト管理]のページを開いてください。[リストを作成 &gt; Datahubから作成]を押して以下のように設定を進めてください。</p>
<ul>
<li>リスト名：任意の名前（ここでは”商品購入数のランキング(1~6)＿ユーザー_20231220”としておきます）</li>
<li>テーブル名：先ほどKARTE Datahubで作成したクエリを選択</li>
<li>配信対象
<ul>
<li>配信チャネル：その他のリスト</li>
<li>ユーザーIDの指定：<code>user_id</code></li>
</ul>
</li>
</ul>
<p>以上のように設定できたら保存を押します。</p>
<p><img src="https://ik.imagekit.io/plaid/5dfbc9d9-5448-45cb-a05f-fb87461dfc49/%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%880005-12-2610.47.34.png" alt="スクリーンショット0005-12-2610.47.34.png"></p>
<h2>4. 購入数の商品ランキングのキャンペーンを作成する</h2>
<p>最後に実際にメール配信するキャンペーンを作成してみます。以下のようにランキングの商品データを埋め込む形になるように進めていきます。</p>
<p><img src="https://ik.imagekit.io/plaid/1d60673c-f094-4bda-a604-2ab6d296cf29/10.png" alt="10.png"></p>
<p>[すべてのメニュー &gt; Messageβ &gt; キャンペーン管理]のページを開いて、[キャンペーンを作成]を押してください。</p>
<p>以下のように設定していってください。</p>
<ul>
<li>
<p>基本設定</p>
<ul>
<li>キャンペーン名：任意の名前を付けます</li>
</ul>
</li>
<li>
<p>コンテンツ： <code>メール配信</code> を選択</p>
</li>
<li>
<p>対象ユーザー</p>
<ul>
<li>マスターリスト：ユーザーを一意に特定する <code>user_id</code> とメール配信する用のリストを選択します（ここでは <code>全ユーザー</code>というリストを選択）</li>
<li>さらに絞り込む： <code>商品購入数のランキング(1~6)＿ユーザー_20231220</code> を選択</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/c4f7db20-cb13-4988-ace4-c9af15d7c896/%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%880005-12-2518.32.29.png" alt="スクリーンショット0005-12-2518.32.29.png"></p>
</li>
<li>
<p>アクション</p>
<p>アクションを追加します</p>
<p>[コンテンツ &gt; HTML]をドラッグ&amp;ドロップして、[コンテンツのプロパティ]に以下のHTMLを追加して保存します。</p>
<pre><code class="language-html">&lt;table style=&quot;display:flex; align-items: center;  justify-content: center;&quot;&gt;
  {{#each view_items_area}}
    &lt;tr&gt;
      &lt;td style=&quot;padding: 1px;&quot;&gt;
        &lt;h2 style=&quot;overflow-wrap: break-word;&quot;&gt;{{QUANTITY_RANK}}位&lt;/h2&gt;
        &lt;img width=&quot;200px&quot; src={{IMAGE}} alt={{NAME}} /&gt;
        &lt;p style=&quot;overflow-wrap: break-word; font-weight: bold;&quot;&gt;{{NAME}}&lt;/p&gt;
        &lt;p style=&quot;overflow-wrap: break-word; font-weight: bold;&quot;&gt;¥{{PRICE}}&lt;/p&gt;
        &lt;a href=&quot;{{URL}}&quot;&gt;
          &lt;button style=&quot;padding:6px 16px ; border-radius: 4px; border: none; color: white; font-size:12px; background-color: #12a0a0;&quot;&gt;詳しくはこちら&lt;/button&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  {{/each}}
&lt;/table&gt;
</code></pre>
<p>上記のHTMLの中には</p>
<ul>
<li><a href="https://support.karte.io/post/5a3by6movo4cJfBC1Pa7I8">Handlebars構文</a> を使っており、これによって要素を繰り返してデータを参照する</li>
<li>ボタンをクリックすると商品のURLに飛ぶ</li>
</ul>
<p>といったことを設定しています。細かなコンテンツや装飾に関しては自由に編集してください。</p>
<p><img src="https://ik.imagekit.io/plaid/21d4fc74-8f33-4947-be4b-6ea42c081979/12.png" alt="12.png"></p>
</li>
<li>
<p>埋め込み変数の指定</p>
<ul>
<li>変数名： <code>{{VIEW_ITEMS_AREA}}</code></li>
<li>紐付けるフィールド： <code>商品購入数のランキング(1~6)＿ユーザー_20231220/item_arr</code> を選択</li>
</ul>
</li>
<li>
<p>スケジュール</p>
<ul>
<li>繰り返し</li>
<li>実行間隔：毎月・最終日・12時・0分</li>
</ul>
</li>
</ul>
<p>全部設定できたら保存を押します。<br>
これで配信する施策の準備が整いました。</p>
<h1>実際に動かしてみる</h1>
<p>実際に、キャンペーンの画面を開いて、配信する施策が出来ているか確認しましょう。</p>
<p>先ほど作ったキャンペーンを開いて[キャンペーンを編集 &gt; 埋め込み変数の指定 &gt; プレビュー]を押します。以下のように1〜6位までの商品が埋め込まれていれば成功です。</p>
<p>これで配信予約すれば、月に1度、商品購入数のランキングが自動で配信されるようになります。</p>
<p><img src="https://ik.imagekit.io/plaid/3776ee6e-c299-409c-831f-c54165266a0c/13%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.png" alt="13のコピー.png"></p>
<h1>おわりに</h1>
<p>今回は「全ユーザーの購入数に応じて、商品をランキング順にし、KARTE Messageで配信する」について紹介しました。</p>
<p>また、この施策は閲覧・購買・購入の合計金額などランキングにする指標はまだまだありますので、これらを組み合わせて総合的なランキングにして配信するなど応用することができます。</p>
<p>ぜひ皆さんも、KARTEを使って様々な施策を試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


数万点の商品・数万人が購買をするサービスにおいて、毎月ランキング関連の施策を作るのは相当なデータ活用をしなければなりませんし、何より面倒です。  そこで、今回は、購入数の商品ランキングのメール配信を毎月自動実行する方法について紹介しようと思います。

商品を全ユーザーの購入数に応じてランキング化し、毎月KARTE Messageで配信する

<p>こんにちは、Customer EngineerのMasamichiです！<br>
１月の共通テストが迫っているため近所の高校生たちが必死に単語帳や問題集の見直しをしているのをよく見かけるのですが、自分も昨年の今頃はこんな感じだったなと懐かしい気持ちになります。</p>
<p>さて、KARTEでアンケートを配信する上で1グループにつき1人のみ回答をして欲しいと思ったことはありませんか？例えば以下のようなユースケースを想定できます。</p>
<ul>
<li>1企業の複数アカウントが利用する企業向けサービスで、会社毎に1人だけ回答できるアンケートを配信したい</li>
<li>家族内で複数人が利用する家族向けサービスで、家族毎に1人だけ回答できるアンケートを配信したい</li>
</ul>
<p>今回は、KARTE CraftとKARTE Actionを使って「グループの誰かが回答したら非表示になるアンケート」を実現する方法を紹介します。</p>
<hr>
<h1>全体像</h1>
<h2>前提</h2>
<p>このソリューションでは、次のようなKARTEプロジェクトでの利用を前提とします。</p>
<ul>
<li>KARTEで計測されたユーザーが何らかのグループに属しており、そのグループを特定するID（以下、「グループID」）がKARTEのイベントでフィールド値として取得されていること
<ul>
<li>グループIDの例: 会社ID(<code>company_id</code>), 家族ID(<code>family_id</code>)など</li>
</ul>
</li>
</ul>
<p>なお本ブログ記事では、attributeイベントで<code>company_id</code>フィールドでユーザーが属する「会社ID」を取得できているケースを想定し、「会社毎に1人だけ回答できるアンケート」の配信を実装する方法を説明します。</p>
<p><strong>注意</strong>: それ以外のイベントやフィールドを利用する場合は、適宜読み替えてください。</p>
<h2>処理の流れ</h2>
<p>実装する処理の流れは下図のようになります：<br>
<img src="https://ik.imagekit.io/plaid/9c951b1f-b773-4526-a267-c6cd222677d1/%E3%82%AF%E3%82%99%E3%83%AB%E3%83%BC%E3%83%95%E3%82%9A%E3%83%BB%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%83%BB%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99%E7%94%A8(1).jpg" alt="グループ・アンケート・ブログ用(1).jpg"><br>
まだアンケートに回答していないグループのユーザーがアンケートに回答すると、紐付けテーブルにグループIDと配信されたアンケートに回答したというレコードが追加されます。</p>
<h2>アウトプットイメージ</h2>
<p><img src="https://ik.imagekit.io/plaid/db5f050c-c37c-42ae-8257-04f57cb0e19f/%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%81%8B%E3%82%99%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt="アンケートが表示されている画面のスクショ.png"><br>
目標として画像のような作成したアンケート接客を誰かが回答するまで表示されるようにします。</p>
<hr>
<h1>実装手順</h1>
<p>実装は以下の手順で進めていきます。</p>
<ol>
<li>アンケート接客サービスの作成</li>
<li>紐付けテーブルの作成</li>
<li>セグメントの設定</li>
<li>APIv2アプリの作成</li>
<li>Craft Functionsの作成</li>
<li>Craft接客サービスの作成</li>
</ol>
<h2>1. アンケート接客サービスの作成</h2>
<p>まず初めに配信するアンケートを作成します。次の手順に沿ってアンケートフォームを作成してください。</p>
<ul>
<li>[Action &gt; 接客サービス]から「作成」をクリックして新規接客サービスを作成</li>
<li>「アクションの追加」をクリックしカスタムテンプレートで「ユーザーに聞く」を選択</li>
<li>任意のアンケートフォームを選択する</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/efb65e6a-d3e3-49a1-bc3d-a9ddfcbdbc2b/%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-2610.05.17.png" alt="スクリーンショット2023-12-2610.05.17.png"></p>
<p>（※補足: 今回の実装では<strong>複数のアンケートの配信制御を一括で管理する</strong>ことができます。簡単のために例として、ブログ内では２つのアンケートで行っています。）</p>
<h2>2. 紐付けテーブルの作成</h2>
<p>次に紐付けテーブルを準備します。以下の通りに設定を進めてください。</p>
<ul>
<li>[Insight &gt; 紐付けテーブル]から「作成」をクリックする</li>
<li>「空の紐付けテーブルを作成」を選択</li>
<li>紐付けテーブルの名前を指定</li>
<li>テーブル情報のスキーマ項目の「編集」をクリックし、以下のようなカラムを追加</li>
</ul>
<p><strong>スキーマ</strong><br>
・<code>company_id</code>: 文字列(STRING)<br>
（※ここには自分が対象としたいフィールドの名前を任意で指定）</p>
<p>・<code>has_answered_enquete_{{campaign_id}}</code>: 真偽値(BOOLEAN)<br>
<img src="https://ik.imagekit.io/plaid/b91dfdd9-1978-4aae-8145-91b9daa8e4bb/%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-2516.09.06.png" alt="スクリーンショット2023-12-2516.09.06.png"><br>
ここで<code>has_answered_enquete_</code>以降の文字列は先ほど作成したアンケートの接客サービスのIDです（以降は<code>has_answered_enquete_{{campaign_id}}</code>と書きます）。接客サービスIDは作成した接客サービスの設定情報から確認できます。</p>
<ul>
<li>データ紐付けから「編集」をクリック</li>
<li>紐付け先にKARTEイベントIDを選択</li>
<li>任意のイベントに追加したグループIDフィールドを主キーと紐づける<br>
（※今回はattributeイベントで連携している<code>company_id</code>フィールドを利用するというケースを想定して説明します）</li>
<li>データの追加先に任意のイベントを選択<br>
（※ここではデータの追加先としてattributeに設定しています。）</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/30c7f63c-a1d1-40cd-ba4d-096f464c8d69/%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-2516.08.21.png" alt="スクリーンショット2023-12-2516.08.21.png"></p>
<ul>
<li>「保存」をクリックして設定を完了する</li>
</ul>
<p>これで紐付けテーブルの作成が完了です。</p>
<h2>3. セグメントの設定</h2>
<p>次にセグメントの設定をしていきます。[Insight &gt; セグメント]へいき「作成」をクリックし、セグメントの条件設定を次のように指定します：</p>
<ul>
<li>全ての期間 &gt; attribute(指定したイベント) &gt; has_answered_enquete_{{campaign_id}} &gt; 最新の値 &gt; trueに等しい</li>
</ul>
<p><strong>注意</strong>: 複数アンケートの配信制御を行う場合、それぞれアンケートに一対一対応するセグメントを作成する必要があります。</p>
<p>そして<code>has_answered_enquete_{{campaign_id}}</code>に対応する(ここでは<code>6567e201b92f6f822950462a</code>に相当する)先ほど作成したアンケート接客サービスのセグメント設定に作成したセグメントをセットします。<br>
<img src="https://ik.imagekit.io/plaid/710575b3-0048-4211-9138-56c521ace22c/%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-2211.18.06.png" alt="スクリーンショット2023-12-2211.18.06.png"></p>
<p>今回はアンケートに回答した＝「<code>has_answered_enquete_{{campaign_id}}</code>が<code>true</code>」と定義しているので対象のセグメントにいるユーザを<strong>除く</strong>に変更することを忘れないでください。</p>
<h2>4. APIv2アプリの作成</h2>
<p>次にAPIv2アプリを作成します。[ストア &gt; APIv2設定]から「作成」をクリックし、画像のように内容を入力します。<br>
<img src="https://ik.imagekit.io/plaid/dcf9ae0a-49c5-47b5-83c4-45cd0e5ffdbb/%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-2211.02.17.png" alt="スクリーンショット2023-12-2211.02.17.png"><br>
スコープでは<code>beta.track.refTable.row.upsert</code>という紐付けテーブルへレコードを更新するための権限を付与しています。</p>
<p>入力し終えたら「保存」をクリックして、発行されたアクセストークンをCraftのシークレットに登録します。これでAPIv2アプリの作成が完了です。</p>
<h2>5. Craft Functionsの作成</h2>
<p>次にアンケート回答後にレコードを更新するためのCraft Functionsを作成します。サンプルとなるソースコードは、Github上で公開しています。</p>
<p><a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/show-only-once-per-group">https://github.com/plaidev/craft-codes/tree/main/craft-functions/show-only-once-per-group</a></p>
<p>作成手順は次の通りです。</p>
<ul>
<li>[Craft &gt; ファンクション &gt; 作成 &gt; テンプレートから作成]を選択</li>
<li><code>グループの誰かが回答したら非表示になるアンケートを配信する</code>というテンプレートを選択し「取得」をクリック</li>
<li>「反映」をクリックしFunctionを有効化してから保存</li>
</ul>
<p>ここでサンプルコードで行われている処理について解説します。<br>
JavaScriptのコード例：</p>
<pre><code class="language-js">const REF_TABLE_ID = '&lt;% REF_TABLE_ID %&gt;';
const GROUP_ID_FIELD = '&lt;% GROUP_ID_FIELD %&gt;';

const karteApiClient = api('@dev-karte/v1.0#yeekp16lpj2g7af');

// Craft接客でユーザ情報変数として埋めん込んだデータを取得
const groupId = data.jsonPayload.data[GROUP_ID_FIELD];
const campaignId = data.jsonPayload.data.enquete_campaign_id;

await karteApiClient.postV2betaTrackReftableRowUpsert({
    id: REF_TABLE_ID,
    rowKey: { [GROUP_ID_FIELD]: groupId },
    values: { [`has_answered_enquete_${campaignId}`]: true }
});
</code></pre>
<ul>
<li>変数名：<code>REF_TABLE_ID</code><br>
セクション２で作成した紐付けテーブルのテーブルIDをCraft変数に登録する</li>
<li>変数名：<code>GROUP_ID_FIELD</code><br>
対象のグループのフィールド名をCraft変数に登録する<br>
例）会社→<code>company_id</code>、家族→<code>family_id</code>などと指定</li>
</ul>
<p>上記のコードでは、後に設定するCraft接客サービスを用いて、回答されたアンケートの接客サービスIDを<code>campaignId</code>に格納し対応するフィールド(<code>values</code>)のデータの値を回答済み(<code>true</code>)に更新します。</p>
<h2>6. Craft Functions連携用接客サービスの作成</h2>
<p>最後にCraft Functions連携用の接客サービスを作成します。以下の手順に沿って進めてください。</p>
<ul>
<li>[Action &gt; 接客サービス]から「作成」をクリック</li>
<li>テンプレートからCraft Functions連携を選択</li>
<li>配信トリガーに任意に作成したアンケートを指定</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/747d3617-b987-454e-befb-d505a1af08f6/%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-2610.01.14.png" alt="スクリーンショット2023-12-2610.01.14.png"></p>
<ul>
<li>アクションの編集で次のようにユーザ情報変数を追加<br>
次の変数を「データ管理」から画像のように追加します。</li>
</ul>
<ol>
<li>変数名: <code>company_id</code><br>
全ての期間 &gt; attribute(指定したイベント名) &gt; company_id(指定したフィールド名) &gt; 最新の値</li>
<li>変数名: <code>enquete_campaign_id</code><br>
全ての期間 &gt; アンケート回答 &gt; 接客サービス名 &gt; 最新の値<br>
<img src="https://ik.imagekit.io/plaid/fba360ad-8320-4dfc-a3c8-ea6e8fbc56ff/%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-2211.13.25.png" alt="スクリーンショット2023-12-2211.13.25.png"></li>
</ol>
<ul>
<li><code>data</code>に次のコードを追加</li>
</ul>
<pre><code>{&quot;campany_id&quot;: &quot;#{campany_id}&quot;, &quot;enquete_campaign_id&quot;: &quot;#{enquete_campaign_id}&quot;}
</code></pre>
<p><img src="https://ik.imagekit.io/plaid/96ddbd94-5831-4ae9-bc73-98930ba8c2f2/%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-2610.08.06.png" alt="スクリーンショット2023-12-2610.08.06.png"><br>
これでCraft接客サービスの作成は完了です。</p>
<hr>
<h1>実際に動かしてみる</h1>
<p>作成したアンケートの動作検証の方法について説明します。</p>
<p>KARTEの計測タグが埋め込まれたサイトへいき、attributeイベントでcompany_idフィールドが連携された状態にします。その後リロードして自身で作成したアンケートが表示されるか確認します。<br>
<img src="https://ik.imagekit.io/plaid/db5f050c-c37c-42ae-8257-04f57cb0e19f/%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%81%8B%E3%82%99%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png" alt="アンケートが表示されている画面のスクショ.png"><br>
アンケートに回答後、紐付けテーブルのレコードが更新されているか確認します。その後、リロードをしてもアンケートが再表示されないか確認します（処理が反映されるのに時間がかかる場合があります）。</p>
<p><img src="https://ik.imagekit.io/plaid/9d651aa3-b723-4ce0-bbb6-12f094003244/%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-2212.04.16.png" alt="スクリーンショット2023-12-2212.04.16.png"><br>
アンケートが回答されると紐付けテーブルでは画像のように<code>true</code>と表示されます。まだアンケートが回答されていない場合は<code>null</code>と表示されます。</p>
<h2>補足：複数の接客サービスに対応させる</h2>
<p>前述した通り、この実装では複数アンケートの配信制御を実行できます。</p>
<p>新しいアンケート接客サービスを次の手順に沿って設定してください。詳細な手順に関してはブログ内で記述しているので必要に応じて確認してください。</p>
<ul>
<li>アンケート接客サービスを作成</li>
<li>紐付けテーブルに作成したアンケート用のカラムを追加</li>
<li>セグメントを作成</li>
<li>Craft Functions連携用の接客サービスに新規作成したアンケートに対応するアンケート回答イベントを配信トリガーの条件として追加</li>
</ul>
<p>ここで、紐付けテーブルに新しいカラムを追加する方法を説明します。[Insight &gt; 紐付けテーブル]で使用する紐付けテーブルの「テーブル情報」へいき、スキーマの「編集」をクリックしてフィールドを追加します。<br>
<img src="https://ik.imagekit.io/plaid/1e98ee1f-a35a-4c89-8db2-00ca1675fc06/%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-2610.17.11.png" alt="スクリーンショット2023-12-2610.17.11.png"><br>
フィールドの書き方についてはセクション２(紐付けテーブルの作成)と同様に、<code>has_answered_enquete_{{campaign_id}}</code>を真偽値としてカラムを追加します。</p>
<p>以上の実装を行うことで、複数の接客サービスに対応させることができます。</p>
<hr>
<h1>おわりに</h1>
<p>これにて全ての実装が終了です、お疲れ様でした。</p>
<p>今回は「グループの誰かが回答したら非表示になるアンケートをKARTEで配信する」の実装について解説しました。これにより前述した通り、1グループあたり1人のみ回答できるアンケートを配信することができます。ぜひ皆さんも活用してみてください。</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE CraftとKARTE Actionを使って「グループの誰かが回答したら非表示になるアンケート」を実現する方法について紹介します。

グループの誰かが回答したら非表示になるアンケートをKARTEで配信する

<p>こんにちは、Customer EngineerのShinです！</p>
<p>さて、ECサイト等でサービスを継続的にエンドユーザーに使ってもらうことにおいて、とあるユーザー行動を起点に、次の行動をいかに促すかということがとても重要になります。ですので今回は、特定イベントの発生を起点としたステップメール施策の実装方法について紹介します。</p>
<h1>全体像</h1>
<h3>処理の流れ</h3>
<p>実現する処理の全体像は、次の通りです。</p>
<p>サービス内でユーザーが購入すると、KARTEのbuyイベントが発火するとします。このイベントデータをKARTE Datahubで抽出、購入（buyイベントの発生）から3日後に商品のお手入れ方法メールを配信します。同様に、4日後に商品レビューを依頼するメール、5日後に他の商品催促メールと合計3つのメールを配信するといった、ステップメール施策を実装します。</p>
<p><img src="https://ik.imagekit.io/plaid/0bdb4b84-3071-44aa-bd84-d4d4d526d67f/%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%880005-12-2512.01.31.png" alt="スクリーンショット0005-12-2512.01.31.png"></p>
<p><strong>利用するKARTEのツール・必要な知識</strong></p>
<ul>
<li>利用するKARTEのツール
<ul>
<li><a href="https://karte.io/feature/insight/">KARTE Insight</a></li>
<li><a href="https://karte.io/package/message/">KARTE Message</a></li>
<li><a href="https://karte.io/feature/integration/">KARTE Datahub</a></li>
</ul>
</li>
<li>必要な知識
<ul>
<li>SQL（ただし、ほとんどクエリは書かないので、知識がないと今回の施策を作れないわけではありません）</li>
</ul>
</li>
</ul>
<h1>前提</h1>
<p>今回作成する「特定イベントの発生を起点としたステップメール施策」に関して以下の2つが出来ていることが前提となります。</p>
<ul>
<li>ユーザーを一意に特定するuser_idと配信先カラムのemailが入った顧客データのリストがKARTE Datahubに存在すること
<ul>
<li>詳しくは、<a href="https://developers.karte.io/docs/external-connection">外部サービス毎のデータ連携作業をする</a>を見てください。</li>
</ul>
</li>
<li>ステップメールの施策の起点にしたいイベントが実装されていること
<ul>
<li>詳しくは<a href="https://support.karte.io/post/3xSCPJmmi6YamkJ3vG3vh5">イベント概要</a>を見てください。</li>
</ul>
</li>
</ul>
<p>ここから以降に関しては、特定イベントを「購入」のイベントとして進めています。ただ、必ずしもbuyイベントである必要はないので、自身が作成したい施策のイベントに読み替えて進めていってもらえればと思います。</p>
<h1>実装手順</h1>
<p>実装の手順は次の通りです。</p>
<ol>
<li>KARTE Datahubでbuyイベントの発生後の日数を含んだリストを作成</li>
<li>ステップメール用に使う3つのフィルターリストを作る</li>
<li>キャンペーンを作成する</li>
<li>配信頻度を調整する</li>
</ol>
<p>順番に説明します。</p>
<h2>1. KARTE Datahubでbuyイベントの発生後の日数を含んだリストを作成</h2>
<p>まず、ステップメール送信用のリストに利用するDatahubクエリを作成します。作成するクエリでは、「特定イベント発生からn日後のユーザー」を抽出します。</p>
<p>[すべてのメニュー &gt; Datahub &gt; クエリ]のページを開いていください。[作成 &gt; クエリコレクションから作成 &gt; 特定のイベント発生からn日後のユーザー]を選んで、このクエリを利用します。</p>
<p><img src="https://ik.imagekit.io/plaid/064ab7b7-f94d-4d57-812f-c1d03ba6415f/%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%880005-12-2512.04.59.png" alt="スクリーンショット0005-12-2512.04.59.png"></p>
<p>今回は、[特定のイベント発生からn日後のユーザー]というクエリコレクションをそのまま使うのではなく、イベント発生後の日数が実行結果に入るようにします。インストール後、以下にSQLエディタに書かれているクエリを書き換えます。</p>
<pre><code class="language-sql">WITH event_data AS (
  SELECT DISTINCT
    user_id
    , MAX(sync_date) AS sync_date
  FROM
    {% karte_event period[0], period[1] %}
  WHERE
    event_name = {{event_name}}
  GROUP BY
    user_id
)

SELECT
  user_id
  , DATE_DIFF(CURRENT_DATE('Asia/Tokyo'), DATE(sync_date, 'Asia/Tokyo'), DAY) AS days_after_event
  , sync_date
FROM
  event_data
ORDER BY
  days_after_event ASC
</code></pre>
<p>次に、[パラメータエディタ]を開いて、days_after_event以下を削除します。</p>
<pre><code class="language-sql">period:
  type: period
  label: 抽出期間
  default: past 30 day
  value: past 10 days
event_name:
  type: select
  label: イベント
  options: event
  value: buy
-- 以下を削除します
days_after_event:
  type: number
  label: イベント発生後の日数
  default: 7
  options:
    min: 1
</code></pre>
<p>[パラメータ設定]を開いて、イベントを[購入]にします。</p>
<p><img src="https://ik.imagekit.io/plaid/6dfd78f8-0a17-483f-bec4-0469ed1a8965/%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%880005-12-2511.59.00.png" alt=""></p>
<p><strong>補足</strong></p>
<p>もし施策で20日後など抽出期間にデフォルトで設定してある10日を超える施策を作りたい場合は、パラメータ設定から[抽出期間]を変更してください。</p>
<h2>2. ステップメール用に使う3つのフィルターリストを作る</h2>
<p>次に、[すべてのメニュー &gt; Messageβ &gt; リスト管理]のページを開いて、[リストを作成 &gt; Datahubから作成]を押してください。</p>
<ul>
<li>リスト名
<ul>
<li>リストの名前をつけてください。ここでは”buyイベントn日後”という名前をつけておきます。</li>
</ul>
</li>
<li>テーブルまたはクエリを選択
<ul>
<li>先ほど「2. KARTE Datahubでbuyイベントの発生後の日数を含んだマスターリストを作成」で作成したクエリを選択します。</li>
</ul>
</li>
<li>配信対象
<ul>
<li>配信チャネルを「その他のリスト」</li>
<li>ユーザーIDの指定：user_id<br>
と設定して、保存を押します。</li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/e153358a-9d78-453b-a6bc-7e3064105f1b/%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%880005-12-2511.54.07.png" alt="スクリーンショット0005-12-2511.54.07.png"></p>
<p>右上の三点リーダーから、[フィルタリストを作成]を押します。</p>
<p><img src="https://ik.imagekit.io/plaid/7147b6de-74ae-48bd-9755-89f5d3df9e17/%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%880005-12-2511.51.05.png" alt="スクリーンショット0005-12-2511.51.05.png"></p>
<p>[条件設定]のところを “days_after_event(INTEGER)が次の値に等しい”・”3”に設定して保存をします</p>
<p><img src="https://ik.imagekit.io/plaid/8e8f352e-3b43-4de1-bd4d-3040078d4c83/%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%880005-12-2511.52.15.png" alt="スクリーンショット0005-12-2511.52.15.png"></p>
<p>上記と同じようにして、“days_after_event(INTEGER)が次の値に等しい”というのを4・5に設定して別のフィルタリストを2つ作成してください。以下のように3つのフィルターリストが作成できれば完了です。</p>
<p><img src="https://ik.imagekit.io/plaid/7282fdcb-7de4-4d71-a4f6-0288c41af835/%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%880005-12-2511.38.58.png" alt="スクリーンショット0005-12-2511.38.58.png"></p>
<h2>3. キャンペーンを作成する</h2>
<p>ここでは、「3. ステップメール用に使う3つのフィルターリストを作る」で作ったリストをもとに3つキャンペーンを作成していきます。</p>
<p>次に、[すべてのメニュー &gt; Messageβ &gt; キャンペーン管理]のページを開いて、キャンペーンを作成を押してください。</p>
<ol>
<li>
<p>コンテンツ：メール配信</p>
</li>
<li>
<p>対象ユーザー：</p>
<ul>
<li>マスターリスト：ユーザーを一意に特定するuser_idとメール配信する用のリストを選択します</li>
<li>さらに絞り込む：次に該当する ”buyイベント3日後”を選択<br>
<img src="https://ik.imagekit.io/plaid/9d60f04a-6761-4e06-9126-1972fcea3095/%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%880005-12-2512.15.15.png" alt="スクリーンショット0005-12-2512.15.15.png"></li>
</ul>
</li>
<li>
<p>アクション：今回step1では、購入を感謝する内容にしておきます<br>
<img src="https://ik.imagekit.io/plaid/1b7ed5ec-1eae-4e8a-a430-d742f3dfcc8d/10%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%98%E3%82%9A%E3%83%BC%E3%83%B3.png" alt="10キャンペーン.png"></p>
</li>
<li>
<p>スケジュール：</p>
<ul>
<li>実行回数：繰り返し</li>
<li>実行間隔：毎日・16時・0分（日〜土）</li>
</ul>
</li>
</ol>
<p>以上が設定できれば保存を押してください。</p>
<p><img src="https://ik.imagekit.io/plaid/6745c32b-f9b7-42d5-990b-fa5c1dfa50ff/11%E3%82%B9%E3%82%B1%E3%82%B7%E3%82%99%E3%83%A5%E3%83%BC%E3%83%AB.png" alt="11スケジュール.png"></p>
<p>同じようにして、対象ユーザーを4日後のリストに、スケジュールの実行間隔を[毎日・16時・0分（日〜土）]にします。</p>
<p>最後、対象ユーザーを5日後のリストに、スケジュールの実行間隔を[毎日・16時・0分（日〜土）]にします。キャンペーンはそれぞれ適切な内容を設定しておきましょう。</p>
<p><img src="https://ik.imagekit.io/plaid/b06fbe23-a28c-4bab-800c-589aa1e78b35/%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%880005-12-2511.40.56.png" alt=""></p>
<p>今回は、実行間隔を3つのキャンペーン全て[毎日・16時・0分（日〜土）]と設定することにしています。これによって、ユーザーからすれば、購入後3日後に最初のメール・4日後に次のメール・5日後に最後のメールがくる形になります。KARTEでは、リストは裏側で配信する際に、SQLを叩くため、最新のリストが変わるがわる毎週配信されます。</p>
<p>以上で、キャンペーンの作成は完了です。</p>
<p><img src="https://ik.imagekit.io/plaid/f794cefb-0306-4136-bd97-4671cdabaac5/%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%880005-12-2511.42.07.png" alt="スクリーンショット0005-12-2511.42.07.png"></p>
<h2>4. 配信頻度を調整する</h2>
<p>最後に、複数回購入したユーザーさんの場合、今回の施策だとbuyイベントが発生した数だけ3つのメールが送られてくる形になるので、煩わしくなる可能性があります。</p>
<p>ですので、以下のソリューション記事を参考に、ユーザーごとに配信頻度をコントロールしてみます。<br>
<a href="https://solution.plaid.co.jp/202307-message_freequency">https://solution.plaid.co.jp/202307-message_freequency</a></p>
<p>[すべてのメニュー &gt; Datahub &gt; クエリ]の画面を開きます。[作成 &gt; コレクションから作成 &gt; Messageの配信頻度をプロジェクト全体で制御する &gt; このクエリを利用]を押します。</p>
<p><img src="https://ik.imagekit.io/plaid/0756f24d-546d-4910-8006-9216264000b2/%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%880005-12-2511.56.19.png" alt="スクリーンショット0005-12-2511.56.19.png"></p>
<p>[すべてのメニュー &gt; Messageβ &gt; リスト]を開いて、[リストを作成 &gt; Datahubから作成]を押して先ほどクエリで作成したものを選びます。</p>
<p><img src="https://ik.imagekit.io/plaid/76b1bf6a-9009-462f-9d91-784ef138ea12/15Datahub%E4%BD%9C%E6%88%90.png" alt="15Datahub作成.png"></p>
<p>[3. ステップメール用に使う3つのフィルターリストを作る]のところでやったように、三点リーダーから[フィルタリストを作成]を押してください。</p>
<ul>
<li>フィルタリスト名：”今週、3回以上送信しているユーザー”と分かりやすい名前をつけます</li>
<li>リスト選択：&quot;配信頻度マスタ&quot;</li>
<li>条件設定：”week_send_count(INTEGER)が次の値以上”・3</li>
</ul>
<p>今回はサンプル数が少ないので、ユーザーがいませんでした）</p>
<p><img src="https://ik.imagekit.io/plaid/41fdd8cc-ea82-41fb-8654-a9b8366947c0/16%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%AA%E3%82%B9%E3%83%88.png" alt="16フィルタリスト.png"></p>
<p>[4. キャンペーンを作成する]で作成した3つのキャンペーンを開いて、対象ユーザーで、以下のように[次を除く]にして先ほど作成した[今週、3回以上送信したーユーザー]を選択します。これで、今週3回以上送信しているユーザーを省くことができます。</p>
<p><img src="https://ik.imagekit.io/plaid/812d00d8-669d-4877-af24-0a1c68193e6b/%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%880005-12-2511.57.41.png" alt="スクリーンショット0005-12-2511.57.41.png"></p>
<h1>実際に動かしてみる</h1>
<p>実際に動作を確認してみましょう。</p>
<p>最後に、各キャンペーンの設定を確認して[配信予約]を押せば、配信することができます。</p>
<h1>おわりに</h1>
<p>今回は特定イベントの最新発生日時からのステップメールをする方法を紹介しました。<br>
購入イベントを起点にステップメールを配信する形にしましたが、イベントを”会員登録”や”お気に入り”などにすることでまた違ったステップメールを作ることができます。</p>
<p>また、フィルターリストを作る際に絞り込み条件で、[次の日時より前・後]のように期間で区切ることによって相対日付での絞り込みもクエリを書かずに実現することができるので、今後紹介できればと思います。</p>
<p>ぜひ皆さんも、KARTEを使って様々な施策を試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


とあるユーザー行動を起点に、次の行動をいかに促すかということがとても重要になります。ですので今回は、特定イベントの発生を起点としたステップメール施策の実装方法について紹介します。

特定イベントの発生を起点としたステップメール施策を実装する

特定イベントの発生を起点としたステップメール施策をKARTE Messageで実装する

KARTEで特定のイベントが発生した際に、KARTE Craftを使ってSlackに通知する方法

<h2>はじめに</h2>
<p>頭皮に対して保湿クリームを塗っているとふと自分のことを河童みたいだなと思いました、どうもCEのUGです。</p>
<p>Googleフォームへの入力をトリガーにして色々やっていくシリーズの第3弾です！</p>
<p>まだ、前回までの記事を読んでいない方は<a href="https://solution.plaid.co.jp/202312-reftable-update-from-google-form">前回の記事</a>と<a href="https://solution.plaid.co.jp/202312-eventwrite-from-googleform">前々回の記事</a>も読んでみてください</p>
<p>第3弾の今回はGoogleフォームの入力内容を紐付けテーブルに記入するです！</p>
<p>それでは最後まで楽しく読んでみてください！</p>
<h2>概要</h2>
<p>大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったデータを特定の紐付けテーブルにUpsertすると言うものです。</p>
<p><img src="https://ik.imagekit.io/plaid/8e36f676-a100-42e0-b964-f3d8e67152cd/%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.44.34.png" alt="スクリーンショット2023-10-201.44.34.png"></p>
<p>これによりGoogleフォームの回答内容を簡単に紐付けテーブルに連携することができます！従来だと紐付けテーブルにデータを連携させるためにはジョブフローを組んだり、Datahubでクエリを書いたりする必要があります。今回のSolutionを利用すれば、Datahubの操作をしなくても容易に紐付けテーブル側にユーザーに紐づけたいデータを連携することができるようになります！</p>
<h2>実装手順</h2>
<p>実装手順は大まかにGoogleフォーム側の設定とKARTE側の設定の二つに分けられます。</p>
<ol>
<li>Googleフォームを作成する</li>
<li>書き込み先の紐付けテーブルを作成する</li>
<li>API v2アプリを作成する</li>
<li>紐付けテーブルを上書きするためのファンクションを作成する</li>
<li>Googleフォーム側にGASを設定する</li>
</ol>
<h2>Googleフォームを作成する</h2>
<p>まずはGoogleフォームを作成します。この作業に関しては特にKARTE特有の何かを考慮する必要がございません。必要に応じてGoogleアカウント等をご自身で作成頂き、フォームを作成してください。<br>
参考：<a href="https://support.google.com/a/users/answer/9303071?hl=ja">フォーム作成に関するHelpページ</a></p>
<p>注意点として後に記述するGASとの整合性を保つために今回のSolution Blogのハンズオンでは下記の画像を参考にGoogleフォームを作成してください。カスタマイズも可能ではありますが、その場合は後のGASの記述とファンクションの記述内容を合わせる必要がありますので、その点だけご注意ください。</p>
<p><img src="https://ik.imagekit.io/plaid/fd38aa87-45db-45f6-905d-253648120940/%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-1322.03.15.png" alt="スクリーンショット2023-12-1322.03.15.png"></p>
<p>ここまでできたら次にKARTE側の設定を行なっていきます！</p>
<p>今回は会員のランクを手動で登録したいというケースを想定しています！</p>
<h2>書き込み先の紐付けテーブルを作成する</h2>
<p>今回のファンクションでGoogleフォームの入力内容を書き込むための書き込み先となる紐付けテーブルを作成します。<br>
<code>Insight&gt;紐付けテーブル&gt;作成&gt;空の紐付けテーブルを作成</code>を選んでください。<br>
<img src="https://ik.imagekit.io/plaid/9408370e-0af0-44f4-b33f-f3016dfff2a1/%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.48.55.png" alt="スクリーンショット2023-10-201.48.55.png"></p>
<p>作成後、テーブル情報に記載されているテーブルIDをコピーしてください。<br>
ファンクションの設定で使用します。<br>
<img src="https://ik.imagekit.io/plaid/248a00b5-8899-4077-b626-5d3cc8a58968/%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.49.43.png" alt="スクリーンショット2023-10-201.49.43.png"></p>
<p>次はCraft側の設定を行なっていきます。</p>
<h2>API v2アプリを作成する</h2>
<p>まずは今回使用するAPI v2 appを作成していきます。<br>
<code>ストア &gt; API v2設定</code>から下記の画像を参考にAPI v2 appを新規作成してください。</p>
<p><img src="https://ik.imagekit.io/plaid/90b6a10e-4d1b-4901-b7e3-5b555780c7ba/%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.52.42.png" alt="スクリーンショット2023-10-201.52.42.png"></p>
<p>アプリタイプはtoken<br>
Permission設定は<code>beta.track.refTable.row.upsert</code>を付与してください。<br>
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。</p>
<h2>紐付けテーブルを上書きするためのファンクションを作成する</h2>
<p>次にファンクションを作成します。<br>
<a href="https://github.com/plaidev/karte-solutions/blob/main/craft/himoduketable_write_from_google_form/index.js">サンプルとなるソースコード</a>は、GitHubで公開しています。</p>
<p>作成する際に変数タブで下記の変数の値を設定してください。</p>
<ul>
<li><code>SECRET_NAME</code>
<ul>
<li>事前に作成したCraft Secret Manager に登録した名前</li>
</ul>
</li>
</ul>
<p>以下でスクリプトの簡潔な説明をします！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。カスタマイズした質問項目に合わせて、hook_data.body.xxxのxxx部分を修正してください。</p>
<p>紐付けテーブルを上書きするために必要な情報を下記で定義しています。</p>
<pre><code>    const userId = data.jsonPayload.data.hook_data.body.user_id; 
    const rank = data.jsonPayload.data.hook_data.body.rank; 
</code></pre>
<p>上記の部分で定義した変数を紐付けテーブルに書き込む作業の下記の部分で実施しています。</p>
<pre><code>   try {
        await karteApiClient.postV2betaTrackReftableRowUpsert({
            id: TABLE_ID,
            rowKey: { user_id: userId },
            values: { rank }
        });
        logger.log(`${TABLE_ID} is updated`);
    } catch (e) {
        logger.error(e);
    }
</code></pre>
<p>ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。<br>
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。</p>
<p><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"></p>
<h2>Googleフォーム側にGASを設定する</h2>
<p>最後にGoogleフォーム側にGASの設定をしていきます。</p>
<p>先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。</p>
<p><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"></p>
<p>エンドポイントの部分はご自身の環境に合わせて適宜修正してください！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。<code>titleAliasMapping</code>の部分をカスタマイズした質問項目に合わせて修正してください。</p>
<pre><code>const titleAliasMapping = {
  &quot;user_id&quot;: &quot;user_id&quot;,
  &quot;rank&quot;: &quot;rank&quot;,
}

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 = &quot;https://t.karte.io/hook/xxx&quot;;
  const options = {
    method: &quot;post&quot;,
    headers: {
      &quot;Content-Type&quot;: &quot;application/json&quot;
    },
    payload: JSON.stringify(formData),
    timeout: 300000, // タイムアウトを 5 分に設定
    muteHttpExceptions: true // 例外を抑制して完全な応答を取得
  };

  Logger.log(&quot;formData: &quot; + JSON.stringify(formData));

  const response = UrlFetchApp.fetch(endpoint, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  if (responseCode !== 200) {
    Logger.log(&quot;エラーコード: &quot; + responseCode);
    Logger.log(&quot;レスポンスボディ: &quot; + responseBody);
  }
}
</code></pre>
<p>スクリプトの記述が完了したら、このスクリプトのトリガーの設定を行なっていきます。<br>
下記の画像を参考にフォーム送信時にスクリプトがトリガーされるようにトリガーを設定してください。</p>
<p><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"></p>
<p>ここまでの設定が完了したら実際にフォームに回答を送信してみて、指定した紐付けテーブルにデータが記入されることを確認してみてください！</p>
<h2>終わりに</h2>
<p>今回の記事はここまでになります！</p>
<p>今回のファンクションを使えば、WebサイトでGoogleフォームに記述してもらった情報を実際のuser_idに紐付けてセグメント等の様々なところで活用できるようになります！これからもどんどんCraftで出来ることを作っては発信していくのでこれからもSolution Blogを定期的にチェックしてください！</p>
<p>今回も最後まで読んでいただきありがとうございました！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Googleフォームに回答が送信されたことをトリガーにしてKARTE Insightの紐付けテーブルに回答を内容を記入する方法を紹介します。

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

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

<h2>はじめに</h2>
<p>スキンヘッドにしてから頭皮の乾燥が気になるお年頃になりました、どうもCEのUGです。</p>
<p>今回は前回に引き続きGoogleフォームへの入力をトリガーにして色々やっていくシリーズの第2弾です！<br>
<a href="https://solution.plaid.co.jp/202312-eventwrite-from-googleform">前回の記事</a>を読んでいない方は是非読んで見てください！</p>
<p>第2弾の今回はGoogleフォームの入力内容をアクションテーブルに記入するです！</p>
<p>それでは最後まで楽しく読んでみてください！</p>
<h2>概要</h2>
<p>大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったデータを特定のアクションテーブルにUpsertすると言うものです。</p>
<p><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"></p>
<p>これによりGoogleフォームの回答内容を簡単にアクションテーブルに連携することができます！従来だとアクションテーブルにデータを連携させるためにはジョブフローを組んだり、Datahubでクエリを書いたりする必要があります。今回のSolutionを利用すれば、Datahubの操作をしなくても容易にアクションテーブル側に施策で使いたいデータを連携することができるようになります！</p>
<h2>実装手順</h2>
<p>実装手順は大まかにGoogleフォーム側の設定とCraft側の設定の二つに分けられます。</p>
<ol>
<li>Googleフォームを作成する</li>
<li>書き込み先のアクションテーブルを作成する</li>
<li>API v2アプリを作成する</li>
<li>アクションテーブルを上書きするためのCraft Functionsを作成する</li>
<li>Googleフォーム側にGASを設定する</li>
</ol>
<h2>Googleフォームを作成する</h2>
<p>まずはGoogleフォームを作成します。この作業に関しては特にKARTE特有の何かを考慮する必要がございません。必要に応じてGoogleアカウント等をご自身で作成頂き、フォームを作成してください。<br>
参考：<a href="https://support.google.com/a/users/answer/9303071?hl=ja">フォーム作成に関するHelpページ</a></p>
<p>注意点として後に記述するGASとの整合性を保つために今回のSolution Blogのハンズオンでは下記の画像を参考にGoogleフォームを作成してください。カスタマイズも可能ではありますが、その場合は後のGASの記述とファンクションの記述内容を合わせる必要がありますので、その点だけご注意ください。</p>
<p><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"></p>
<p>今回は保険等の商品詳細ページ上に今週の制約数を接客で表示するというケースを想定してGoogleフォームを作成していきます！</p>
<p>ここまでできたら次にKARTE側の設定を行なっていきます！</p>
<h2>書き込み先のアクションテーブルを作成する</h2>
<p>今回のファンクションでGoogleフォームの入力内容を書き込むための書き込み先となるアクションテーブルを作成します。<br>
<code>Action&gt;アクションテーブル&gt;作成&gt;空のテーブルを作成</code>を選んでください。<br>
<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"></p>
<p>スキーマの設定は下記画像を参考にして作成してください。Googleフォームの内容をカスタマイズした場合はその内容に適宜修正してください。フォーム側の質問項目に沿ってアクションテーブル側のスキーマを対応する形に修正してください。</p>
<p><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"></p>
<p>接客から参照したい場合等はWidgetからの参照にチェックをつけてください。<br>
今回の記事ではつけていません。<br>
<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"></p>
<p>次はCraft側の設定を行なっていきます。</p>
<h2>API v2アプリを作成する</h2>
<p>まずは今回使用するAPI v2 appを作成していきます。<br>
<code>ストア &gt; API v2設定</code>から下記の画像を参考にAPI v2 appを新規作成してください。</p>
<p><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"></p>
<p>アプリタイプはtoken<br>
Permission設定は<code>beta.action.actionTable.records.upsert</code>を付与してください。<br>
作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。</p>
<h2>アクションテーブルを上書きするためのCraft Functionsを作成する</h2>
<p>次にファンクションを作成します。<br>
<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/actiontable_write_from_google_form/index.js">サンプルとなるソースコード</a>は、GitHubで公開しています。</p>
<p>作成する際に変数タブで下記の変数の値を設定してください。</p>
<ul>
<li><code>SECRET_NAME</code>
<ul>
<li>事前に作成したCraft Secret Manager に登録した名前</li>
</ul>
</li>
</ul>
<p>以下で簡潔にスクリプトの内容を説明します！</p>
<p>アクションテーブルを上書きするために必要な情報を下記で定義しています。Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。カスタマイズした質問項目に合わせて、hook_data.body.xxxのxxx部分を修正してください。</p>
<pre><code>    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>
<p>上記の部分で定義した変数をアクションテーブルに書き込む作業の下記の部分で実施しています。</p>
<pre><code>    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>
<p>ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。<br>
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。</p>
<p><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"></p>
<h2>Googleフォーム側にGASを設定する</h2>
<p>最後にGoogleフォーム側にGASの設定をしていきます。</p>
<p>先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。</p>
<p><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"></p>
<p>エンドポイントのxxxの部分はご自身の環境に合わせて適宜変更してください！Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。<code>titleAliasMapping</code>の部分をカスタマイズした質問項目に合わせて修正してください。</p>
<pre><code>const titleAliasMapping = {
  &quot;ページURL&quot;: &quot;PageURL&quot;,
  &quot;今週の成約数&quot;: &quot;SalesCount&quot;,
  &quot;備考&quot;: &quot;Others&quot;
}

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 = &quot;https://t.karte.io/hook/xxx&quot;;
  const options = {
    method: &quot;post&quot;,
    headers: {
      &quot;Content-Type&quot;: &quot;application/json&quot;
    },
    payload: JSON.stringify(formData),
    timeout: 300000, // タイムアウトを 5 分に設定
    muteHttpExceptions: true // 例外を抑制して完全な応答を取得
  };

  Logger.log(&quot;formData: &quot; + JSON.stringify(formData));

  const response = UrlFetchApp.fetch(endpoint, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  if (responseCode !== 200) {
    Logger.log(&quot;エラーコード: &quot; + responseCode);
    Logger.log(&quot;レスポンスボディ: &quot; + responseBody);
  }
}
</code></pre>
<p>スクリプトの記述が完了したら、このスクリプトのトリガーの設定を行なっていきます。<br>
下記の画像を参考にフォーム送信時にスクリプトがトリガーされるようにトリガーを設定してください。</p>
<p><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"></p>
<p>ここまでの設定が完了したら実際にフォームに回答を送信してみて、アクションテーブルにデータが書き込まれるかを確認してみてください！</p>
<p><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"></p>
<h2>終わりに</h2>
<p>今回の記事はここまでになります！</p>
<p>今回のファンクションを使えば、WebサイトでGoogleフォームに記述してもらった情報を接客で表示できるようになったりと様々なことに利用ができるようになります！最後まで読んでいただきありがとうございました！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Googleフォームへの回答送信をトリガーにして、フォームの入力内容をKARTE Actionのアクションテーブルに対して記入する方法を紹介します。

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

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

<h2>はじめに</h2>
<p>こんにちは！スキンヘッドにすると人の手の暖かさが頭皮から直で感じられるようになります、どうもCEのUGです</p>
<p>今回からGoogleフォームの入力をトリガーにしてKARTE上で様々なことをするシリーズ合計3回にわたってSolution Blogで紹介していこうと思います！</p>
<p>今回はその第一弾として「Googleフォームの入力内容を基にして特定のuser idにイベントを発火させる」を紹介していきます！</p>
<h2>概要</h2>
<p>大まかな概要としてはGoogleフォームに回答が送信されたことをトリガーにしてCraft Functionsに対してWebhookを投げてもらい、KARTE内で受け取ったuser_idに対して指定されたイベントを発火させると言うものです。</p>
<p><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"></p>
<p>このSolutionを利用すれば特定のユーザーに対してplugin_line_identifyイベントを発火させたいといった要望も叶えることができます。例えば、エンドユーザーからメールの購読停止をシステム側から解除して欲しいと言ったような要望を受けた際に、運用者側から手動で簡単にKARTEのユーザーデータの一部を書き換えることが可能になります。</p>
<h2>実装手順</h2>
<p>実装手順は大まかにGoogleフォーム側の設定とCraft側の設定の二つに分けられます。</p>
<ol>
<li>Googleフォームを作成する</li>
<li>API v2アプリを作成する</li>
<li>Craft Functions を作成する</li>
<li>Googleフォーム側にGASを設定する</li>
</ol>
<h2>Googleフォームを作成する</h2>
<p>まずはGoogleフォームを作成します。この作業に関しては特にKARTE特有の何かを考慮する必要がございません。必要に応じてGoogleアカウント等をご自身で作成頂き、フォームを作成してください。<br>
参考：<a href="https://support.google.com/a/users/answer/9303071?hl=ja">フォーム作成に関するHelpページ</a></p>
<p>注意点として後に記述するGASとの整合性を保つために今回のSolution Blogのハンズオンでは下記の画像を参考にGoogleフォームを作成してください。カスタマイズも可能ではありますが、その場合は後のGASの記述とファンクションの記述内容を合わせる必要がありますので、その点だけご注意ください。</p>
<p><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"></p>
<p>ここまでできたら次にCraft側の設定を行なっていきます！</p>
<h2>API v2アプリを作成する</h2>
<p>まずは今回使用するAPI v2 appを作成していきます。<br>
<code>ストア &gt; API v2設定</code>から下記の画像を参考にAPI v2 appを新規作成してください。</p>
<p><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"></p>
<p>アプリタイプはtoken<br>
Permission設定は<code>track.event.write</code>と<code>beta.track.event.writeAndExecAction</code>を付与してください。</p>
<p>作成する際にCraft Secret Manager登録したシークレットの名前は控えておいてください、後で使用します。</p>
<h2>Craft Functions を作成する</h2>
<p>次にイベントを発火させるためのファンクションを作成します。<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/event_writte_from_google_form/index.js">サンプルとなるソースコード</a>は、GitHubで公開しています。</p>
<p>作成する際に変数タブで下記の変数の値を設定してください。</p>
<ul>
<li><code>SECRET_NAME</code>
<ul>
<li>事前に作成したCraft Secret Manager に登録した名前</li>
</ul>
</li>
</ul>
<p>以下でスクリプトの簡潔な説明をします！</p>
<p>Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。作成した質問項目に沿ってhook_data.body.xxxのxxxを修正してください。</p>
<p>イベントを発火させるために必要な情報を下記で定義しています。</p>
<pre><code>  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>
<p>この部分で上記で定義した変数を基にしてイベントを発火させています。KARTEの通常のタグ設置で記述するJSのコードと似ているので、タグ設置を経験したことのある方なら見覚えがあるかと思います。</p>
<pre><code>  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>
<p>ここまで出来たらファンクションを作成して、エンドポイントをコピーしておいてください。<br>
このエンドポイントに対してGASからWebhookを投げます。下記の画像を参考にして、Webhook URLをコピーしてください。</p>
<p><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"></p>
<h2>Googleフォーム側にGASを設定する</h2>
<p>最後にGoogleフォーム側にGASの設定をしていきます。</p>
<p>先ほど作成したGoogleフォームの設定画面に戻って、左上の3点リーダーからスクリプトエディタを起動してください。</p>
<p><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"></p>
<p>スクリプトエディタ画面に遷移したら、ファイルの部分に下記の画像を参考にスクリプトを記述してください。</p>
<p><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"></p>
<p>Googleフォームの内容をカスタマイズした場合は適宜修正が必要になります。<code>titleAliasMapping</code>の部分をカスタマイズした質問項目に合わせて修正してください。</p>
<pre><code>const titleAliasMapping = {
  &quot;user_id&quot;: &quot;user_id&quot;,
  &quot;event_name&quot;: &quot;event_name&quot;,
  &quot;values&quot;: &quot;values&quot;
}

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 = &quot;https://t.karte.io/hook/ae2a974f9e050db947a1a4084d40c534/craft/CwjsG4VSkMkDdKb3UUURUaqyBA1Xcjjw&quot;;
  const options = {
    method: &quot;post&quot;,
    headers: {
      &quot;Content-Type&quot;: &quot;application/json&quot;
    },
    payload: JSON.stringify(formData),
    timeout: 300000, // タイムアウトを 5 分に設定
    muteHttpExceptions: true // 例外を抑制して完全な応答を取得
  };

  Logger.log(&quot;formData: &quot; + JSON.stringify(formData));

  const response = UrlFetchApp.fetch(endpoint, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  if (responseCode !== 200) {
    Logger.log(&quot;エラーコード: &quot; + responseCode);
    Logger.log(&quot;レスポンスボディ: &quot; + responseBody);
  }
}
</code></pre>
<p>スクリプトの記述が完了したら、このスクリプトのトリガーの設定を行なっていきます。<br>
下記の画像を参考にフォーム送信時にスクリプトがトリガーされるようにトリガーを設定してください。</p>
<p><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"></p>
<p>ここまでの設定が完了したら実際にフォームに回答を送信してみて、指定したuser_idでイベントが発火するのかを確認してみてください！</p>
<h2>終わりに</h2>
<p>今回の記事はここまでになります！<br>
Craftを使えばGoogleフォームでのエンドユーザーの行動をトリガーにして、様々なアクションをKARTE内で実行することができるようになります。今回はその一例としてイベントを発火させてみました。普段、KARTEを使用していると、特定のユーザーに特定のイベントを運用者側から発火させたいが、出来ない、、、みたいな場面に遭遇することもあるかと思いますが、その際は是非Craftを使ってみてください！</p>
<p>それでは今回の記事はここまでにしたいと思います！<br>
また次回のGoogleフォーム関連の記事をお楽しみにしてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Googleフォームの入力内容をもとにして、KARTEで特定のユーザーに特定のイベントを管理者側から発火させるための方法を紹介します。

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

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

<h2>はじめに</h2>
<p>こんにちは！髪を剃ってスキンヘッドにしました、どうもCEのUGです！</p>
<p>さて、KARTEには外部とのデータ連携に使用するジョブフローという機能がございます。<br>
通常、ジョブフローにエラーが発生した際は登録しているメールアドレスに通知をすることがデフォルトで可能です。ただ、SlackやTeamsなどの日々使っているチャットアプリにエラーを通知して欲しいと思ったことはありませんか？ありますよね？</p>
<p>今回のSolution Blogではジョブフローでエラーが発生した際にCraft Functionsを使用してSlackに通知する方法を紹介していきます！</p>
<h2>概要</h2>
<p>全体の処理の流れは下記の画像の通りとなります。</p>
<p>Craft側でジョブフローエラーが発生したことを検知して、そのエラー内容を事前に設定しておいたSalckチャネルに対して通知をします。</p>
<p>非常に単純なフローかと思います！</p>
<p><img src="https://ik.imagekit.io/plaid/2db91d49-0981-4d1d-b747-e934fdc192b0/%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-1911.21.47.png" alt="スクリーンショット2023-10-1911.21.47.png"></p>
<h2>実装手順</h2>
<p>実装の手順は次の通りです。<br>
大きく分けてSlack 側と KARTE 側のそれぞれの設定があります。</p>
<p>Slack側の設定に関しては<a href="https://solution.plaid.co.jp/202307-hookv2-slack-integration">このSolution Blog</a>も参考に出来るので、是非見てみてください！</p>
<ol>
<li>Slack アプリを作成する</li>
<li>Slack アプリをチャンネルに追加する</li>
<li>API v2 アプリを作成する</li>
<li>Slack アプリの OAuth トークンを Craft Secret Manager に登録する</li>
<li>ファンクションを作成する</li>
<li>Craft Hook v2 トリガーを設定する</li>
</ol>
<p>順番に手順を確認していきます！</p>
<h2>1. Slack アプリを作成する</h2>
<p>まず、Slack チャンネルに通知をするための Slack アプリを作成します。</p>
<ul>
<li><a href="https://api.slack.com/apps"> [slack api &gt; Your Apps] </a> から <code>Create New App</code> をクリック</li>
<li>Create an appの画面で <code>From scratch</code> を選択</li>
<li>次の画面で slack app 名と、slack app を適用する slack workspace を指定</li>
</ul>
<p>アプリの作成が完了したら、Slack アプリ に必要なスコープの設定とOAuth トークンを取得します。</p>
<p><strong>スコープの設定</strong></p>
<ul>
<li>作成したアプリを選択して、[Features &gt; OAuth &amp; Permissions]をクリック</li>
<li>ページ内の Scopes の項目の Bot Token Scopes の <code>Add an OAuth Scope</code> をクリック</li>
<li>プルダウンメニューから <code>chat:write</code> を選択<br>
<img src="https://ik.imagekit.io/plaid/2de46e75-afc9-4d6f-92a5-444e6a1aa71e/%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-07-1812.57.49.png" alt="スクリーンショット2023-07-1812.57.49.png"></li>
</ul>
<p><strong>OAuth トークンの取得</strong></p>
<ul>
<li>OAuth &amp; Permissions ページ内の OAuth Tokens for Your Workspace の <code>Install to Workspace</code> をクリック</li>
<li>アプリがワークスペースにアクセスするための権限を許可するために、<code>許可する</code> をクリック</li>
<li>自動的に生成される OAuth トークン（Bot User OAuth Token）を控えておく<br>
<img src="https://ik.imagekit.io/plaid/0696d92f-ec7b-4c5d-9327-cddfbc143039/%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-07-1813.01.11.png" alt="スクリーンショット2023-07-1813.01.11.png"></li>
</ul>
<h2>2. Slack アプリをチャンネルに追加する</h2>
<p>作成した Slack アプリを発言させるためには、通知を飛ばしたいチャンネルに追加する必要があります。</p>
<ul>
<li>通知を飛ばしたいチャンネルの詳細ページを表示</li>
<li>[インテグレーション &gt; App]の <code>アプリを追加する</code> をクリック</li>
<li>今回作成したアプリを追加<br>
<img src="https://ik.imagekit.io/plaid/c7a4a606-d266-4b12-b647-aae1f1372fe4/%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-07-1813.04.32.png" alt="スクリーンショット2023-07-1813.04.32.png"></li>
</ul>
<p>また、通知を飛ばす Slack チャンネルのチャンネルIDは後で使うため控えておいて下さい。<br>
ここまでがSlack側の設定となります。次からKARTE側の設定になります。</p>
<h2>3. API v2 アプリを作成する</h2>
<p>Campaign Change Enabled Hook を利用するためのAPI v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/12dde6c4-9a9e-4e80-9612-58f6729897c0/%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-1911.45.12.png" alt="スクリーンショット2023-10-1911.45.12.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>datahub.jobflow.get</code>: ジョブフローのエラー検知に必要</li>
</ul>
</li>
</ul>
<p>「アプリタイプ」は後から変更できないため、誤って作成した場合は、アプリを再度作成し直してください。</p>
<h2>4. Slack アプリの OAuth トークンを Craft Secret Manager に登録する</h2>
<p>Slack アプリの OAuth トークンを Craft Secret Manager のシークレットとして登録します。それにより、秘匿すべきアクセストークンをファンクション上に直接記述する必要がなくなります。</p>
<p><img src="https://ik.imagekit.io/plaid/7dfbbd31-7bbe-4b81-9003-b4df79c21995/%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-07-1722.43.07.png" alt="スクリーンショット2023-07-1722.43.07.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>控えておいた OAuth トークンを貼り付けて、適当な名前を付けて保存</li>
</ul>
<p>作成したシークレットの名前は、次に作成するファンクションの中に記載します。</p>
<h2>5. ファンクションを作成する</h2>
<p>Slackに通知を飛ばすためのファンクションを作成します。<br>
<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/jobflow-error-notification-to-slack/index.js">サンプルとなるソースコード</a>は、GitHubで公開しています。</p>
<p>作成する際に変数タブで下記の変数の値を設定してください。</p>
<ul>
<li><code>KARTE_PROJECT_ID</code>
<ul>
<li><code>KARTE_PROJECT_ID</code>は KARTE の管理画面URLの project= 以降の部分<br>
https://admin.karte.io/craft/functions?project=<code>XXXXXXXXXXXXXXXX</code><br>
※上記はファンクション一覧ページのURLを例としています</li>
</ul>
</li>
<li><code>SLACK_CHANNEL_ID</code>
<ul>
<li>控えておいたSlack チャンネルID</li>
</ul>
</li>
<li><code>SLACK_TOKEN_SECRET</code>
<ul>
<li>事前に作成したCraft Secret Manager に登録した名前</li>
</ul>
</li>
</ul>
<p>以下でスクリプトの内容を簡潔に説明します！</p>
<ul>
<li>Slackに通知するためのジョブフローの名前、id、ステータスを取得する</li>
</ul>
<pre><code>  const jobflow_name = data.jsonPayload.data.name;
  const jobflow_id = data.jsonPayload.data.id;
  const status = data.jsonPayload.data.status;
</code></pre>
<ul>
<li>ジョブフローのステータスがエラーではなかった場合、何もしない</li>
</ul>
<pre><code>  if (status !== 'ERROR') {
    return;
  }
</code></pre>
<ul>
<li>Slackに通知するメッセージを定義する</li>
</ul>
<pre><code>  let msg = `ジョブフローでエラーが発生しました\n`;
    msg += `ジョブフロー名：${jobflow_name}\n`;
    msg += `ジョブフローURL： https://admin.karte.io/datahub/jobflow/each/${jobflow_id}?project=${KARTE_PROJECT_ID}`;
</code></pre>
<h2>6. Craft Hook v2 トリガーを設定する</h2>
<p>最後にジョブフローが実行される度にファンクションが実行されるように Hook v2 の設定をします。 Hook v2 の設定は API v2 アプリ上で行います。<br>
下記の画像を参考にHook v2の設定を行なってください。</p>
<p><img src="https://ik.imagekit.io/plaid/c620a0ec-0922-4af4-8794-5320e7308a42/%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-1912.14.25.png" alt="スクリーンショット2023-10-1912.14.25.png"></p>
<ul>
<li>「2. API v2 アプリを作成する」で作成したアプリの設定画面を開く</li>
<li>[トリガー設定] に <code>KARTE Datahub: ジョブフローの終了時</code> を指定</li>
<li>[チャネル設定 &gt; Craft] を有効化し、先ほど作成したファンクション名を入力</li>
</ul>
<p>これで、ジョブフローが実行時に先ほど作成したファンクションが実行され、Slackに通知が飛ぶ設定が完了しました。</p>
<p><img src="https://ik.imagekit.io/plaid/349118de-1bb0-4cd9-ae59-31bd73308310/%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-1411.30.25.png" alt="スクリーンショット2023-12-1411.30.25.png"></p>
<h2>終わりに</h2>
<p>これでジョブフロー実行がエラーで終了した場合に特定のSlackチャネルに通知が飛ぶようになりました！</p>
<p>今回の記事ではSlackに通知をしましたが、SlackではなくTeams等の普段お使いのチャットアプリにも連携が可能ですし、ジョブフローのエラー検知をトリガーに全く別のファンクションを実行することも可能です。是非色々試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Datahubジョブフローでエラーが発生した際にSlackにエラー発生したジョブフローを通知するためのファンクションです。