こんにちは、Customer Engineerの神谷です！この前、少し久々にスパイスカレーを作りました。カレーは隠し味に何か入れる方も多いと思いますが、スパイスカレーの場合はスパイスの香りや刺激を生かすために小細工はせず、シンプルに塩のみで味付けをする派です。強いて言うなら、タマネギなどの野菜をしっかり炒めるのが、自分のこだわりです。

さて今回は、KARTEで特定のイベントが発生した際に、それをトリガーにCraft Functionsを起動し、SendGridのAPI経由でメールを送信する方法をご紹介します。メルマガ施策などにSendGridを活用されている企業の方も、たくさんいらっしゃると思いますので、SendGridの詳細な説明は割愛します。

SendGridのAPI経由でメールを送信する意義

SendGridの概要については、ご理解いただいている前提で話を進めます。まずは、SendGridのAPI経由でメール送信を行うことの、意義について考えてみましょう。私は、主に以下の2つの意義があると考えています。

メール送信の自動化及び業務効率化

今回のソリューションに限った話ではないものの、GUIではなくAPIを利用することのメリットの1つに、自動化が挙げられるでしょう。メール送信プロセスを自動化することで、手動で実行する手間を減らし、業務効率化に繋がります。また、プログラミング言語を活用してAPIを利用することで、既存システムやアプリケーションへの組み込みもでき、これも業務効率化へと繋げられるでしょう。

特定の条件を満たした場合に自動でメール送信できる

メール系の施策は、ユーザーに配信許諾を取ることが一般的です。しかし場合によっては、配信許諾の有無に関係なく、特定の条件に合致するユーザーが発生したらメール送信したくなるケースもあるでしょう。例えば、以下のような場合です。

ECサイトで商品を購入してくれたユーザーにお礼メールを送りたい
パスワードなどのアカウント関連情報に変更があった場合に通知メールを送りたい
セキュリティ関連のリスクが発生した場合にアラートメールを送りたい

このように、特に重要なことが起こったりした場合には、ピッタリかと思います。今回は例として、サイト上でbuyイベントが発生した際にユーザーに自動でお礼メールを送信する方法をご紹介しましょう。購入した商品の情報及び、ユーザーの名前や連絡先などは、全てKARTEから取得してメールにセットします。

アウトプットイメージ

最終的なアウトプットイメージは次の通りです。

スクリーンショット2024-03-1215.46.36.png

メールの先頭に購入者（今回は自分）の名前が入り、お礼の文章と共に、購入した商品の情報をbuyイベントから取得して書き込みます。

スクリーンショット2024-03-1217.03.38.png

構成図は上の通りです。処理の流れ自体はシンプルで、KARTEで購入イベントが発生したことをトリガーとしてCraft Functionsを起動し、buyイベント及びidentifyイベントから必要な情報を取得して、それらの形式を整えたら、SendGridのAPI経由でメール送信します。

注意点

前提として、次の点に注意をしてください。

SendGridを利用していることを前提としています
- 既にSendGridのアカウントは開設済みで、運用中の前提で話を進めます
- プランによっては配信数に上限があるので、皆さんのプラン内容をお確かめのうえで実行してください
今回の例はKARTEのIdentifyイベントを使う前提です
- ログイン機能がなかったり、ユーザー情報を扱えないサイトの場合は、その取得もできないため、メール配信も行えません

設定手順

設定の手順は次の通りです。

SendGridのダッシュボードでAPIキーを作成する
SendGridのAPIキーをCraft Secret Managerに登録する
KARTEでbuyイベントが発生したら必要な情報を取得してSendGridのAPI経由でメール送信するためのCraft Functionsを作成する
Craft Functionsを実行するためのトリガーとなるCraft接客を作成する

順番に見てみましょう。

1. SendGridのダッシュボードでAPIキーを作成する

まずは、SendGridのダッシュボードでAPIキーを作成しましょう。これさえ作成してしまえば、後の作業は難しくありません。

スクリーンショット2024-03-0715.43.26.png

SendGridのダッシュボードで、左下のSettings→API Keysの順番にクリックします
するとAPI Keys一覧画面が出てくるので、右上のCreate API Keyをクリックします

スクリーンショット2024-03-1217.27.47.png

適当な名前を付け、Full Accessを選択して右下のCreate & Viewをクリックします

スクリーンショット2024-03-0715.44.50.png

APIキーの作成に成功すると、それが表示されるのでコピーしておいてください
注意点として、APIキーは1度しか表示されません

ここで作成したAPIキーは、後でCraft Secret Managerに登録します。

2. SendGridのAPIキーをCraft Secret Managerに登録する

1で作成したSendGridのAPIキーを、Craft Functionsから安全に利用するために、Craft Secret Managerに登録します。シークレットとして登録することで、取得したAPIキーを直接コード上に埋め込むことなく使用できます。

スクリーンショット2024-01-2219.11.47.png

[Craft > シークレット] からシークレットを新規作成します
SendGridのAPIキーを貼り付けて適当な名前をつけて保存してください

ここでつけた名前を、Craft Functions作成時に変数として設定します。

3. KARTEでbuyイベントが発生したら必要な情報を取得してSendGridのAPI経由でメール送信するためのCraft Functionsを作成する

Craft Functionsのファンクションを作成します。作成手順は次の通りです。

[Craft > ファンクション > 新規作成 > テンプレートから作成] を選択
「 KARTEで特定のイベントが発生した際に、Craft FunctionsからSendGridのAPI経由でメールを送信する 」というテンプレートを検索し[取得]ボタンをクリック
[反映] ボタンをクリック
[変数] タブで次の変数の値を設定する
- SENDGRID_API_KEY_SECRET
  - SendGridのAPIキーを登録したシークレットの名前です
[保存] する
デプロイ完了後、[設定 > ファンクションの有効化] にチェックを付ける

なお、テンプレートのソースコードはGitHubで公開しています。
craft-codes/craft-functions/event-sendgrid-api-mail-send at main · plaidev/craft-codes

ここから、Craft Functionsのコードで重要な部分について、かいつまんでご説明します。

const { email_to: to, email_from: from, mail_title: subject, mail_text: text, mail_html: html } = data.jsonPayload.data;

  const message = {
    to,       // 受信者のメールアドレス
    from,     // 送信者のメールアドレス
    subject,  // メールのタイトル
    text,     // メールのテキスト本文
    html      // メールのHTML本文
  };

ここで、Craft接客で指定した変数から情報を取得し、それを使ってメールを作成しています。変数が複数ある場合は、上記のように書くことでコードを簡略化できます。ここまでできたら、Craft Functionsを有効化して保存してください。

4. Craft Functionsを実行するためのトリガーとなるCraft接客を作成する

SendGridのAPIキーを取得して、Craft Functionsを作成しても、それだけでは動作しません。そもそもCraft Functionsを起動するためのトリガーとなる、Craft接客の作成も必要です。

スクリーンショット2024-01-0913.51.04.png

KARTEの接客サービス作成画面でCraftと検索してください
そこで出てくる2つのうち、Craft Functions連携を選択します

スクリーンショット2024-03-1114.37.32.png

まず、対象ユーザーの設定を行いましょう
今回は特に絞り込みを入れず、全員を対象としていますが、ここは皆さんの実現したいことに合わせて変更してください

スクリーンショット2024-03-1217.43.17.png

次に、Craft Functionsを起動するトリガーとなるイベントを設定します
今回はbuyイベントにおいて、「デニムジャケット」という商品が購入された場合に実行されるようにしてみました
ここも皆さんの実現したいことに合わせて、イベント名や項目名を変更してください

スクリーンショット2024-03-1217.48.25.png

その次に、アクションの設定を行います
アクションの配信比率は、上のものを100%にしてください
デニムジャケットが購入されても、その一部のユーザーにしかお礼メールが送信されないのは変な話で、デニムジャケット購入者全員にお礼メールが送られるのが一般的だからです
その次に、右側の編集をクリックします

スクリーンショット2024-03-1412.00.12.png

ファンクション名には、作成したCraft Functionsの名称を入れてください
nameには、任意の名称を入れてください（今回は使いません）
dataには少し長いですが、以下の形式のjsonデータを入れてください

{
  "mail_title": "ご購入ありがとうございました！",
  "email_to": "#{email_to}",
  "email_from": "sender@example.com",
  "mail_text": "#{last_name} #{first_name} 様 いつもご愛顧いただき、誠にありがとうございます。この度は、#{shop_name}でのご注文、心より感謝申し上げます。 ご注文いただいた商品は、以下のとおりです：商品名：#{items_name} 価格：#{items_price} 数量：#{items_quantity} お客様のご注文内容を確認いたしましたので、商品の発送が完了次第、別途メールにてお知らせいたします。ご注文の詳細やお問い合わせについては、下記の連絡先までお気軽にお問い合わせください。電話番号：00-xxxx-xxxx メールアドレス：aaa@example.com 何かご不明点やご要望がございましたら、いつでもお知らせください。今後ともよろしくお願いいたします。",
  "mail_html": "<p><h2>#{last_name} #{first_name} 様</h2><br>いつもご愛顧いただき、誠にありがとうございます。<br>この度は、#{shop_name}でのご注文、心より感謝申し上げます。<br><br>ご注文いただいた商品は、以下のとおりです：<br><br><ul><li>商品名：#{items_name}</li><li>価格：#{items_price}</li><li>数量：#{items_quantity}</li></ul><br>お客様のご注文内容を確認いたしましたので、商品の発送が完了次第、別途メールにてお知らせいたします。<br>ご注文の詳細やお問い合わせについては、下記の連絡先までお気軽にお問い合わせください。<br><br><ul><li>電話番号：00-xxxx-xxxx</li><li>メールアドレス：aaa@example.com</li></ul><br>何かご不明点やご要望がございましたら、いつでもお知らせください。<br>今後ともよろしくお願いいたします。</p>"
}

jsonデータの中身について、少し補足しておきます。

mail_titleには、お礼メールのタイトルを入れます
email_toには、お礼メールの送付先となるユーザーのメールアドレスが入ります
email_fromには、お礼メールの送信元となるメールアドレスを入れます
mail_textには、お礼メールのテキストを入れます
mail_htmlには、htmlを使用したメールのテキストを入れます

特に最後の2つは長いものの、こうやってCraft接客のアクションで変数として設定しておくことで、メールのタイトルや本文などを変えたくなった場合でも、コードを編集することなく、この画面で変更できます。次にその下のデータ管理をクリックしてください。

スクリーンショット2024-03-1411.59.16.png
スクリーンショット2024-03-1411.59.30.png

ここではメールを作成するために必要なユーザー情報変数を作成しています
last_name・first_name・email_toの3つは、identifyイベントの該当項目をそれぞれ指定し、最新の値を取得できるようにしておきます
items_name・items_price・items_quantity・shop_nameの4つは、buyイベントの該当項目をそれぞれ指定し、最新の値を取得できるようにしておきます

少し補足すると、今回設定したユーザー情報変数は、あくまでも例です。実際に必要なユーザー情報変数は、どのようなメールを送りたいかに応じて変わるため、指定するイベントや変数名は、皆さんが実現したいことに合わせて変更してください。identifyイベントとその項目は、ほぼ変わらないと思いますが。

ここまでできたら保存して、Craft接客を公開してください。

実際に動かしてみる

実際に動作を確認してみましょう。identifyイベントが先に送られている前提で、buyイベントが正しく実装されている場合、指定したトリガーと一致する商品を試しに購入してみれば、メールが正しく飛んでくるはずです。

スクリーンショット2024-03-1215.46.36.png

実際に商品を購入できない場合は、Google ChromeのConsoleから、以下のようなbuyイベントを送ってみてもいいでしょう。商品名などは、皆さんが設定したトリガーなどに合わせて、任意のものに変更してください。

krt('send', 'buy', {
"revenue": 9800,
 "items": [
  {
   "brand": "BRANDNAME",
   "name": "デニムジャケット",
   "price": 9800,
   "url": "https://xxxxxxxxxxxxxxx",
   "image": "/assets/images/xxxxxxxxxxx",
   "quantity": 1,
   "item_id": "001"
  }
 ],
});

もし、buyイベントに関して詳しく知りたい場合は、こちらのページをご覧ください。

おわりに

今回はKARTEで特定のイベントが発生した際に、Craft FunctionsからSendGridのAPI経由でメールを送信する方法について紹介しました！こうやってSendGridのAPIを使えば、様々な場合に自動でメール配信できて便利ですね。このソリューションが、皆さんのメール施策推進に、少しでもお役に立てば幸いです。

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

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

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

↓ PLAIDで働きたい