こんにちは！今回は、「Sendinblue」というメール配信サービスをBubbleと連携する方法をご紹介します。
メール配信サービスと連携することで、Bubbleアプリから送信するメールの送信元アドレスがデフォルトのアドレス（APP_DOMAIN-no-reply@bubbleapps.ioなど）になるのを避けられたり、メールの開封数やメール内のリンクのクリック数などをトラッキングできるというメリットがあります。
メール配信・マーケティングサービスといえば当ブログでもご紹介したことがある「SendGrid」が有名ですが、今回はSendGrid以外の選択肢として「Sendinblue」をご紹介します。SendinblueはSendGrid同様感覚的に使いやすいUIで、ドラッグ＆ドロップでメールデザインを作成できるなどの特徴があり、初心者にもやさしいサービスです。
本記事では、実装方法に加えてメール配信サービスと連携することのメリットや連携することで生じる違いも具体的にご紹介しております。最近Bubbleで開発を始めたばかりという方にも役立つ内容になっているかと思いますので、どなたもぜひご覧ください！
■この記事がおすすめな方
- Bubbleと連携するメール送信サービスを探している方
- Sendinblueでできることが知りたい方
- Bubbleから直接送信されるメールと配信サービスと連携したメールの違いが知りたい方
Sendinblueとは
Sendinblueはメール送信自動化やキャンペーン機能などを備えたメールマーケティングサービスです。メールの作成からA/Bテスト、連絡先管理、配信結果（到達、開封など）の分析、ウェブチャットなどのマーケティング機能を備えています。メールのデザインはSendinblue提供のおしゃれなテンプレートを元に作成することもできます。メール内のリンクから遷移できるランディングページの作成機能は類似のメールサービスのなかでは珍しい機能です。
料金プランはFree、Starter（2,615円/月～）、Business（6,665円/月～）、Enterprise（価格要相談）の4種類があります（毎月のメール送信数によって費用が追加）。プランごとに日・月ごとの送信上限や分析の範囲、サポートの内容が異なります。Freeプランでも毎日の送信上限は300通で基本的な分析機能も利用できるので、小規模サービスでの利用なら十分でしょう。
※A/Bテスト、ランディングページ作成、より高度な分析機能は有料プランで利用できるようになります。プランごとの機能詳細はこちらからご確認ください。
ちなみに、Sendinblueの実際のトランザクションメールの分析画面はこのようになっています。類似のメールマーケティングサービスの分析画面と大差なく親しみのあるレイアウトですね。
今回の目標
- Bubbleでユーザー新規登録機能を実装する
- 新規登録完了メールをSendinblue経由で送信する機能をプラグインで実装する
- 新規登録完了メールはSendinblueで作成したテンプレートを使い、メールにユーザー名と新規登録日時を表示する。
今回は、新規登録完了時にユーザーに送信されるメールをSendinblue経由で送信する機能をBubbleで実装します。メールにはBubbleに登録されたユーザー名・登録日時を表示します。実装にはSendinblue連携用のプラグインを使用します。おまけとしてAPI Connectorの設定方法を簡単にご紹介しておりますので、プラグインではなくAPI Connectorを使いたい方はそちらをご参考ください。
なお、今回はSendinblue、Bubbleともに無料プランで実装します。有料プランの加入は不要です。
実装手順
Sendinblue
新規登録
Sendinblueのアカウントをお持ちでない方は、Sendinblueのトップページにアクセスし「Sign up free」ボタンから新規登録を行います。
メールアドレス、氏名、勤務先情報、電話番号などを登録し、二要素認証を完了したら料金プランを選択して登録完了です。今回は前述の通り無料プランを選択します。
テンプレート作成
登録できたら、Bubbleから送信するメールで使用するテンプレートを作成します。
Sendinblueにログインしたらサイドメニューから「Templates」を開き、「Create my first template」を押下して新規テンプレートを作成します。
テンプレートのセットアップ画面で、まずはテンプレート名、メールの件名、テキストのプレビュー、メール送信者アドレス、送信者名を設定します。以下の画像を参考に設定してください。なお、送信者アドレスはデフォルトではSendinblueアカウントに登録されたメールアドレスになっています。他のメールアドレスにしたい場合は、「Add a new sender」から登録してください。
ちなみに、「From Name」下の「Show Advanced Options」を押下すると、返信先アドレスなどのオプション設定欄が表示されます。返信先アドレスを送信元アドレスと異なるものにしたい場合、ここで設定してください。設定しない場合返信先は送信元アドレスと同じになりますので、今回は設定せず先に進みます。
設定項目の情報を入力できたら、画面右上の「Next Step」を押下します。次の画面でテンプレートのレイアウトを選択します。今回は「Layouts」>「Simple」を選択しました。
次の画面ではテンプレートの中身を設定します。皆様おなじみのBubbleのようにドラッグ＆ドロップでテキストや画像を含めたレイアウトを作成できます。
では、メールでBubbleに保存されるユーザー名と登録日時を表示できるようにしましょう。Sendinblueのテンプレートでは、パラメータ部分を{{ params.PARAMETER_NAME }}の形で表記します。以下を参考に設定してください。
- ユーザー名表示…
{{ params.NAME }} - 登録日時表示…
{{ params.DATE }}
※今回パラメータ名をNAMEとDATEとしましたが、分かりやすいようにお好きな名前を設定してください（Bubbleでもこのパラメータ名を使います）。
入力できたら、画面右上の「Continue」を押下します。プレビューが表示されるので、確認して問題なければ画面右上の「Save ＆ Activate」を押下します。
これでテンプレートの作成・有効化は完了です。
APIキー発行
では次に、APIキーを発行しましょう！ヘッダーの一番右にあるアカウント名横のプルダウンを押下してメニューを開き、「SMTP & API」を押下します。
開いた画面で、画面右上の「＋CREATE A NEW API KEY」を押下します。
APIキーの名前を設定する画面で、名前を設定して「GENERATE」を押下します。今回は名前を「Bubble Test」としました。
APIキーが発行されました。キーはこの画面でしか確認できないので、コピーしてどこかに控えておきます。
Bubble
Bubbleの基本的な準備（アプリとData Typeの作成）
それでは、Bubbleでの作業に進みます。新規アプリを作成します。無料プランのままで問題ありません。
次に、ユーザーデータベースを作成します。Dataタブを開き、「User」を押下してField一覧から「Name」Field（Textタイプ）を追加します。
プラグインの設定
「Plugins」タブを開いたら「Sendinblue SMTP」プラグインをインストールします。
「Sendinblue SMTP」の設定画面で先ほど発行・コピーしたAPIキーを「api-key(shared headers)」欄に貼り付けます。
新規登録ページ・Workflowの作成
新規登録ページを作成します。「Add a new page」から新規ページを作成し、ユーザー名とメールアドレス、パスワードを入力するインプットエレメントと新規登録ボタンを配置します。
新規登録Workflowを作成しましょう。「新規登録」ボタンを押下して新規Workflowを作成します。Step1に「Account」>「Sign the user up」を設定します。EmailとPasswordの値は、それぞれインプットエレメントの値の入力値に設定します。さらに追加で「Name」の値も、ユーザー名用インプットの入力値に設定します。
Step2には「Plugins」>「Sendinblue - Send SMTP Mail + Template (advanced)」を設定します。「Sendinblue SMTP」にはいくつかアクションがありますが、このアクションは自分で作成したテンプレートに自由にパラメータを挿入していても対応できます。
「(body)body」には、以下のJSONコードを入力します。
- body…
{"to":[{"email":"Input メールアドレス's value"}],"params":{"NAME":"Input ユーザー名's value, "DATE":"Current User's Creation Date:formatted as 2022/12/15 00:00"},"templateId":1}
※"params":{....}の部分がパラメータの値を設定する部分になります。テンプレートに「NAME」「DATE」以外のパラメータを挿入している方は、上記のコードを適宜修正してください。
※最後のtemplateIDは、使用するテンプレートIDを指定するBodyパラメータです。忘れずにテンプレートIDを指定してくださいね！なお、テンプレートIDは、Sendinblueで「Transactional」>「Templates」を開いて表示される一覧のテンプレート名の横に「#NO」の形で書かれています。
動作確認
ここまでで設定が完了しました！では、実際に新規登録からメール送信まで完了できるか確認してみましょう。
Bubbleの新規登録ページをPreviewで開き、必要な情報を入力して「新規登録」ボタンを押下します。
BubbleのDBを確認します。「Data」タブを開き、User Typeに先ほどの情報が登録されているのを確認します。
登録したメールアドレスのメールフォルダを確認します。以下のようなメールが届いているでしょうか。登録したユーザー名、登録日時が表示されていますね。
「To:自分」の横のプルダウンを押下すると、返信先アドレスなどの詳細を確認できます。Sendinblueでテンプレート作成時に「Show Advanced Options」で設定した返信先アドレスがここに反映されます。今回は特に設定していないので、送信元アドレスと同じアドレスが返信先になっているのが確認できます。
ではここで、Sendinblueなどのメール配信サービスを介さずアクション「Email」>「Send email」でBubbleから直接メールを送信した場合と比較してみます。
「Send email」でメールを送信する場合、送信元アドレスはデフォルトの「APPDOMAIN-no-reply@bubbleapps.io」になります。また、返信先のアドレスも同じアドレスになりますが、このアドレスには返信してもメールが届きません。返信を受け取りたい場合は、「Send email」アクションの「Specify a different reply-to address」をチェックして返信先アドレスを設定するか、メール内で返信用アドレスやリンクを配置する、または今回のようにメール配信サービスを介するなどの対応が必要になります。
では、Sendinblueではどのように確認できるか見てみます。Sendinblueを開き、ヘッダーの「Transactional」>「Email : Real time」を開きます。以下のように、過去30分のメールの送信履歴や開封・リンククリック履歴が確認できます。これはFreeプランでも利用できる基本的な分析機能ですね。
【おまけ】API Connectorでメール送信APIを設定する
API Connectorでメール送信機能を実装したい方向けに、設定方法を簡単にご紹介します。使用するSendinblue APIはこちらです。
以下を参考にAPI Connectorを設定してください。
- header①…Key…
api-keyValue…APIキーを入力してください - header②…Key…
Content-TypeValue…application/json - header③…Key…
AcceptValue…application/json - HTTP URL…
https://api.sendinblue.com/v3/smtp/email - Body…
{"to":[{"email":"<email>"}],"params":{"NAME":"<name>","DATE":"<created_date>"},"templateId":1}
以下のような応答が返ってきて、メールが受信できたら成功です。
なお、上記のドキュメントから分かるように、メール件名や送信元・返信先アドレス等もAPIで設定することができます。1つのテンプレートを複数のトランザクションメールで使用したい方や、メールの種類ごとに返信先等をAPIで変えたい方はぜひご参考ください。
このAPIを使ってWorkflowを作成したい場合は、「実装手順」>「新規登録ページ・Workflowの作成」で作成したWorkflowのStep2を「Plugins」>このAPI Connectorのアクションに置き換えてください。
まとめ
今回は、メール配信サービス「Sendinblue」とBubbleを連携して新規登録完了メールを送信する機能の実装方法をご紹介しました。
Sendinblueのようなメール配信サービスを利用すると、レイアウトを簡単に工夫できるだけでなく送信元アドレスの設定ができるなどのメリットを得られます。メールはマーケティングにおいて重要な役割を占めるので、有効活用するためにもメール配信サービスを介して送信する仕組みを実装するのがおすすめです。
今回ご紹介した「Sendinblue」ではなく「SendGrid」について詳しく知りたい方は、以下の記事をご参考ください。
■「SendGrid」に関する記事
