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

<html><head></head><body>こんにちは、Customer EngineerのMasamichiです！大学の定期テストが無事終了し春休みを満喫しています。
さて、LINEを使ったマーケティング戦略を考える上で、ユーザーに公式アカウントの友だち登録をしてもらうことは非常に重要です。実際に、Webサイトなどから「あなたに合った最適な商品を診断します！」という訴求をしてLINE友だち追加を促す、という手法は有効な施策として広く行われています。診断コンテンツはユーザーにとっても「自分に合った商品を手柄に知ることができる」という点でメリットが大きく、一連のユーザー体験の中で自然とLINEの友だち登録を促すことができます。
今回は、Craft Functionsを使ってLINE上でカスタマイズ性の高い診断コンテンツを配信する方法をご紹介します！
<hr>
<h1 id="全体像">全体像</h1>
<h2 id="前提">前提</h2>
このブログの内容を実装する上で以下の2つの前提を満たしていることを確認してください。
<ul>
<li>
LINEのMessaging APIチャネルを既に持っていること
<ul>
<li>まだLINEのMessaging APIチャネルを持っていないという方は<a href="https://developers.line.biz/ja/" target="_blank" rel="noreferrer">LINE Developers</a>から新規作成を行なってください。</li>
</ul>
</li>
<li>
KARTEの<a href="https://support.karte.io/post/2Qw6muPU7a5PSKV0M8ler0" target="_blank" rel="noreferrer">LINE連携機能</a>を利用していること
</li>
</ul>
<h2 id="処理の流れ">処理の流れ</h2>
処理の流れは下図の通りです： 
<img src="https://ik.imagekit.io/plaid/62d7c0d6-e40c-454c-8169-1aac3b10edf2/Craft%E3%81%A6%E3%82%99LINE%E8%A8%BA%E6%96%AD%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%AE%9F%E8%A3%85.png" alt="CraftでLINE診断コンテンツを実装.png"> 
ユーザーがリッチメニューから診断コンテンツをタップすると、KARTEに対しWebhookが渡され、診断コンテンツを配信するファンクションをCraft LINE Hookで呼び出します。
<h2 id="アウトプットイメージ">アウトプットイメージ</h2>
アウトプットイメージは下図のようになります： 
<img src="https://ik.imagekit.io/plaid/1273f867-e272-47a4-abc2-8adf5c082569/LINE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%95%E3%83%AD%E3%83%BCmodified2.jpg" alt="LINEコンテンツフローmodified2.jpg"> 
診断コンテンツでは、LINEのクイックリプライボタンを使って、ユーザーが選択肢をタップし、それに応じたアクションが実行される仕組みになっています。ユーザーがボタンを選択すると、その選択に応じたテキストが送信され、次の設問が表示されます。全ての設問に回答した後に、診断結果が返されます。
<hr>
<h1 id="実装手順">実装手順</h1>
診断コンテンツの実装は以下の手順で進めていきます。
<ol>
<li>LINEのチャネルアクセストークンをシークレットに登録する</li>
<li>Craft Functionsを作成する</li>
<li>診断コンテンツの内容を設定する</li>
<li>Craft LINE Hookを設定する</li>
</ol>
順番に説明します。
<h2 id="準備：実装のために必要なLINEの設定をする">準備：実装のために必要なLINEの設定をする</h2>
実装を進める前に、LINE側で必要な以下の設定がされているかご確認ください。
<ul>
<li>
チャネルのWebhook URLにKARTE側エンドポイントURLを設定する
<ul>
<li>今回は<a href="https://craft.developers.karte.io/craft-functions/triggers/line-hook" target="_blank" rel="noreferrer">Craft LINE Hook</a>を使用するため、Craft FunctionsのエンドポイントではなくKARTE側であることに注意してください</li>
<li>詳しくは<a href="https://solution.plaid.co.jp/202312-line-webhook-branch">KARTE CraftでLINEのMessaging API Webhookを別サービスに分岐する 
</a>で記載しています。</li>
</ul>
</li>
<li>
リッチメニューを作成し診断メニューをタップすると開始のトリガーとなるテキストが送信されるようにする
<ul>
<li>診断開始のトリガーになるテキストについてはCraft Functionsの変数で設定します。詳しくは2. Craft Functionsを作成するで解説しています</li>
</ul>
</li>
</ul>
<h2 id="1. LINEのチャネルアクセストークンをシークレットに登録する">1. LINEのチャネルアクセストークンをシークレットに登録する</h2>
まず初めに、当該チャネルのチャネルアクセストークンをCraftのシークレットに登録します。[Craft &gt; シークレット]へいき、「新規作成」をクリックしてチャネルアセストークンの値をセットしてください。
※チャネルアクセストークンがわからない場合は、LINEのMessaging API設定画面から以下の画像の部分で確認できます。 
<img src="https://ik.imagekit.io/plaid/211f47a0-0d2e-451d-b274-101915556eb4/%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-0711.57.03.png" alt="スクリーンショット2024-02-0711.57.03.png">
<h2 id="2. Craft Functionsを作成する">2. Craft Functionsを作成する</h2>
次に、診断コンテンツを配信するためのCraft Functionsのファンクションを作成します。サンプルとなるソースコードはCraft Functionsのテンプレートとして、Github上に公開しています。
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/line-diagnose-content" target="_blank" rel="noreferrer">craft-codes/craft-functions/line-diagnose-content at main · plaidev/craft-codes</a>
作成手順は次の通りです。
<ul>
<li>[Craft &gt; ファンクション &gt; 作成 &gt; テンプレートから作成]を選択</li>
<li><code>Craft Functionsを使ってLINE上で診断コンテンツを配信する</code>というテンプレートを検索し「取得」ボタンをクリック</li>
<li>「反映」ボタンをクリック</li>
<li>[変数]タブで次の変数の値を設定する
<ul>
<li><code>CHANNEL_ACCESS_TOKEN_SECRET</code>: LINEのチャネルアクセストークンを登録したシークレット名を指定</li>
<li><code>DIAGNOSE_START_TEXT</code>: 診断開始のトリガーになるテキストを指定 
※アウトプットイメージの場合、「洋服診断」という文字列を指定する</li>
</ul>
</li>
<li>ファンクションを「有効化」にして保存</li>
</ul>
<h2 id="3. 診断コンテンツの内容を設定する">3. 診断コンテンツの内容を設定する</h2>
次に、診断コンテンツの内容を作成します。診断コンテンツの作成方法はテンプレート内の<code>flowChart</code>オブジェクトを編集するだけです。実装例として画像のようにシンプルな診断フローを作成してみます。 
<img src="https://ik.imagekit.io/plaid/9b9a96e9-dce4-46dc-bee8-5745e0bd6dc9/%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-0617.24.05.png" alt="スクリーンショット2024-02-0617.24.05.png">
上画像に対応するオブジェクトは次のように書くことができます：
<pre><code class="language-js hljs">const flowChart = {
 // 設問を設定
 start: {
 question: '1.私服はカジュアルなものが好きですか？',
 answers: {
 '1.はい': '2-A',
 '1.いいえ': '2-B',
 },
 },
 '2-A': {
 question: '2-A.外に出るときはかっちりしたい？',
 answers: {
 '2-A.はい': 'R-A',
 '2-A.いいえ': 'R-B',
 },
 },
 '2-B': {
 question: '2-B.布に覆われていることがあまり好きでない？',
 answers: {
 '2-B.はい': 'R-C',
 '2-B.いいえ': 'R-D',
 },
 },
 // 診断結果を設定
 'R-A': {
 result: 'チェスターコート',
 resultText: '大人の女性にぴったりな商品です!',
 thumbnailImageUrl: 'https://example.com/image.jpg',
 detaillUri: 'https://example.com/detail',
 },
 'R-B': {
 result: 'オフショルダーワンピース',
 resultText: '大人の女性向けのカジュアルなワンピースです!',
 thumbnailImageUrl: 'https://example.com/image.jpg',
 detaillUri: 'https://example.com/detail',
 },
 'R-C': {
 result: 'クルーネックニット',
 resultText: '休日に家で読書をしていそうなクールなあなたにピッタリの商品です!',
 thumbnailImageUrl: 'https://example.com/image.jpg',
 detaillUri: 'https://example.com/detail',
 },
 'R-D': {
 result: 'セットアップ',
 resultText: '明るくて可愛らしい性格のあなたにぴったりの商品です!',
 thumbnailImageUrl: 'https://example.com/image.jpg',
 detaillUri: 'https://example.com/detail',
 },
};
</code></pre>
上記のコードについて解説します。<code>flowChart</code>オブジェクトの中に設問(<code>2-A</code>、<code>2-B</code>など)と結果(<code>R-A</code>など)を表すオブジェクトをそれぞれ用意します。オブジェクト内の変数はそれぞれ次の内容に対応しています。
<ul>
<li>
設問オブジェクト
<ul>
<li><code>question</code>: 質問文を入力</li>
<li><code>answers</code>: key(左側)が設問における選択肢、value(右側)が選択肢にそれぞれ対応する次の設問を指定</li>
</ul>
</li>
<li>
結果オブジェクト
<ul>
<li><code>result</code>: 結果メッセージのタイトルを入力</li>
<li><code>resultText</code>: 結果メッセージのテキストを入力</li>
<li><code>thumbnailUrl</code>: 結果メッセージの画像部分に対応する画像URLを指定</li>
<li><code>detailUri</code>: 結果メッセージの「詳細を見る」で開く遷移先URLを指定 
(※上サンプルではダミーURLを使用しています)</li>
</ul>
</li>
</ul>
<img src="https://ik.imagekit.io/plaid/7a468021-272b-4c79-88c7-2bb675a81d9d/LINE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E8%A9%B3%E8%A7%A3.jpg" alt="LINEコンテンツ詳解.jpg">
<h2 id="4.Craft LINE Hookを設定する">4.Craft LINE Hookを設定する</h2>
最後に<a href="https://craft.developers.karte.io/craft-functions/triggers/line-hook" target="_blank" rel="noreferrer">Craft LINE Hook</a>で作成したファンクションをトリガーに設定します。[Craft &gt; 設定 &gt; LINE Hook 設定]から起動ファンクションに作成したファンクションを指定し有効化して保存します。 
<img src="https://ik.imagekit.io/plaid/90ff7bee-7bc7-47f9-9093-53fad5406901/%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-0615.13.30.png" alt="スクリーンショット2024-02-0615.13.30.png">
これで、Craft LINE Hookのトリガーを設定することができました。
<hr>
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
実際に動作を確認してみましょう。
<ul>
<li>作成したファンクションが正常に作動しているか確認する
<ul>
<li>手順例
<ul>
<li>手元のLINEアプリから、当該LINE公式アカウントを友だち追加</li>
<li>当該LINE公式アカウントのリッチメニューから診断コンテンツを開始</li>
<li>設問、クイックリプライボタン、診断結果が表示されるか確認する</li>
</ul>
</li>
</ul>
</li>
</ul>
設定に問題がなければ、画像のように、当該LINE公式アカウント上で診断コンテンツを利用すると診断結果のメッセージを取得できます。 
<img src="https://ik.imagekit.io/plaid/1273f867-e272-47a4-abc2-8adf5c082569/LINE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%95%E3%83%AD%E3%83%BCmodified2.jpg" alt="LINEコンテンツフローmodified2.jpg">
<h2 id="注意点">注意点</h2>
もし、診断コンテンツが正常に機能していない場合は以下の項目を確認してください。
<ol>
<li>LINE Messaging APIのWebhook URL項目でエンドポイントが正しく設定されているか
<ul>
<li>正しく設定できている場合はKARTEのイベント画面で、<code>plugin_line_identify</code>イベントや<code>_line_message</code>イベントが発生します</li>
</ul>
</li>
<li>ストアのアプリ設定におけるLINEのMessaging APIのクライアント情報が当該チャネルと一致しているか
<ul>
<li>[ストア &gt; アプリ設定 &gt; LINE]における<code>Channel ID</code>、<code>Channel Secret</code>、<code>チャネルアクセストークン</code>が当該チャネルのものと一致している必要があります</li>
</ul>
</li>
<li>ファンクション内でエラーが起きているか
<ul>
<li><code>currentStep</code>の値から設問/結果が正しく取得できているかオブジェクトを確認してください</li>
</ul>
</li>
</ol>
<h2 id="補足：診断コンテンツの変更方法">補足：診断コンテンツの変更方法</h2>
補足として、診断コンテンツの変更方法を説明します。2. 診断コンテンツの内容を設定するで作成したフローチャートを次の画像のように変更してみます。 
<img src="https://ik.imagekit.io/plaid/dc21b726-60fa-4a94-8b8f-5187fe758f55/%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-0617.48.44.png" alt="スクリーンショット2024-02-0617.48.44.png">
この場合、先ほどの<code>flowChart</code>オブジェクト内に<code>3-A</code>という設問オブジェクトと「フラワープリントワンピース」に対応する<code>R-E</code>という結果オブジェクトを追加し、<code>2-A.いいえ</code>に対応する次のステップを<code>3-A</code>に変更します。
<pre><code class="language-js hljs">const flowChart = {
 // (省略)
 '2-A': {
 question: '2-A.外に出るときはかっちりしたい？',
 answers: {
 '2-A.はい': 'R-A',
 '2-A.いいえ': '3-A', // R-B -&gt; 3-Aにステップを変更
 }
 },
 // (省略)

 '3-A': {
 question: '3-A.ブルベですか？',
 answers: {
 '2-A.はい': 'R-B', 
 '2-A.いいえ': 'R-E', // 新しくR-Eという結果を追加
 }
 },
 // (省略)

 'R-E': {
 result: 'フラワープリントワンピース',
 resultText: '華やかなあなたにぴったりの商品です!',
 thumbnailImageUrl: 'https://example.com/image.jpg',
 detaillUri: 'https://example.com/detail',
 },
};
</code></pre>
以上のように変更を加えるだけで、簡単に診断フローをカスタマイズすることができました。
<hr>
<h1 id="おわりに">おわりに</h1>
今回はCraft Functionsを使ってLINE上で診断コンテンツを配信する方法をご紹介しました。前述の通り、LINE上で診断コンテンツを配信することはユーザーメリットも大きく、良いユーザー体験の中で自然に友だち追加を促す強力な手法だと言えます。ぜひLINEでのマーケティング施策にご役立てください！
<hr>
プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ 
ぜひ気軽にお問い合わせください。
↓ パートナー企業になりたい
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
↓ PLAIDで働きたい
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer" target="_blank" rel="noreferrer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
</body></html>

Caft Functionsを使ってLINE上で診断コンテンツを配信する方法を解説します