SendGrid 新人成長記　第三回　宛先ごとに異なる商品おすすめメールを送ってみる

SendGrid 新人成長記

こんにちは！SendGridの機能を新人が紹介するブログ連載の第三回目です。今回は、Web APIを用いてより実用に近いメールを送ってみたいと思います。

前回は”Hello, world!”と一言書かれたメールを送っただけだったので、今回はメールの内容を充実させましょう。企業が複数の顧客へ一斉にメールを配信する際、メールのタイトルや本文に宛先に応じて異なる文章や画像などのコンテンツを入れたいことがあります。今回は、そのようなメールの一例として、相手に合わせた商品のおすすめメールを作ってみましょう。最終的には以下のようなメールを送ります。

相手に合わせた商品のおすすめメール

これを実現する方法はいくつかあるのですが、今回はDynamic Transactional Template機能を使います。以下の3つのステップで説明していきます。

宛先ごとにカスタマイズされた情報を作成（上の例では顧客の名前や野菜のリストなど）
共通部分のテンプレートを作成（「おすすめの商品はこちらです。」など共通する文章の部分）
Web APIを通してメールを送信

1. 宛先ごとの情報の作成

宛先ごとにカスタマイズされた情報として、メールアドレス以外に以下の3つを準備します。

顧客の名前 (customer)
おすすめする商品の名前 (name) 、値段 (price) 、画像 (img) のリスト
顧客が「ゴールドメンバー (gold_member) 」かどうか（もしそうなら、特典がある旨の文言をメール本文に追加します）

これら3つの情報をJSONと呼ばれるデータ形式にまとめます。

{
    "customer": "太郎",
    "gold_member": true,
    "items": [
        {
            "name": "キャベツ",
            "price": "158",
            "img": "cabbage.png"
        },
        {
            "name": "にんじん",
            "price": "48",
            "img": "carrot.png"
        }
    ]
}

JSONはパラメータの名前と値の組からなります。テンプレート作成時にこれらのパラメータを使って送信内容を指定できます。
ここではitemsという配列のなかに商品それぞれの情報を格納し、ゴールドメンバーかどうかはtrue/falseのbooleanで指定しています。

2. テンプレートの作成

次にメール本文の雛形となるテンプレートを作っていきます。
① ダッシュボードのメニューから、“Templates”を選び、“Transactional”をクリックします。
② テンプレートの作成が初めてなら“Create your first transactional template”と出てくるので、“Create Template”の青いボタンをクリックします。

①、②手順

③ テンプレートの名前を適当に決め、“Save”をクリックして保存します。

③の手順

④ 下のような画面が出るので、“Add Version”をクリックしてテンプレートの内容の作成に入りましょう。

④の手順

※青字で示したように、テンプレートごとにIDが付与されます。メール送信時にこのIDを指定することで対応するテンプレートを利用できます。

⑤ エディタの選択肢が表示されます。今回はHTMLを書いていくので“Code Editor”を選択し、“Continue”をクリックしましょう。ちなみに、“Design Editor”ではHTMLを意識せずに直感的にメールを作成できます。

⑤の手順

⑥ 以下のような画面が表示されるので、メール本文を生成するHTMLを左側の黒い部分に書きます。初めから表示されているハイフンを消して、下に示したHTMLのように入力します。

⑥、⑦、⑧の手順

HTML例

<html>
  <head>
    <title></title>
  </head>
  <body>
    <h2>こんにちは、{{customer}}さん</h2>
    <p>おすすめの商品はこちらです。</p>
    <ol>{{#each items}} 
      <li>
        <p>
          <img src={{img}} width="64" align="center" />{{name}} （{{price}}円） 
        </p>
      </li>{{/each}} 
    </ol>
    <p>{{#if gold_member}} ゴールドメンバーのあなたは、表示価格よりさらに5%引き！
      <br>{{/if}} ご来店をお待ちしております。 
    </p>
  </body>
</html>

この内容を簡潔に補足すると、

6行目の{{customer}}は、customerのパラメータで指定されている顧客の名前に置換されます。以後同様です。
{{#each items}}から{{/each}}の間ではitemsリストのそれぞれの要素ごとに処理が行われます。
{{#if gold_member}}から{{/if}}に挟まれた文はgold_memberがtrueの時だけ記載されます。

⑦ メールのタイトルは、画面左側のSettingsをクリックし、“Email Subject”を編集することで設定できます。ここでは“{{customer}}さんにおすすめの野菜があります”にしましょう。このように、メールタイトルにも{{customer}}のような記法が使えます。以上の記法はHandlebars.jsというテンプレートエンジンに従っています。詳細はSendGrid公式ドキュメント（英語）を参照してください。

⑧ 次に上の“{ } TEST DATA”というタブを選択して、先ほど作ったJSON形式のデータを入力してみましょう。すると、宛先の情報を反映したメールが右側の欄にプレビューされます（ただし、画像ファイルはきちんと画像のURLを指定しないと正しく表示されません）。
最後に、上にある“Save Template”で保存しておきます。

3. メールの送信

それでは、作成したカスタマイズ情報とテンプレートを用いてメールを送信しましょう。今回も前回と同様に英語版APIリファレンスのTry it outを使うことにします。前回の記事と同じ手順でAPIキーの入力まで進めます。前回と異なるのはRequest Bodyの中に入れるパラメータです。こんな感じです。

{
    "personalizations": [
        {
            "to": [
                {
                    "email": "<<YOUR_ADDRESS>>"
                }
            ],
            "dynamic_template_data": {
                "customer": "太郎",
                "gold_member": true,
                "items": [
                    {
                        "name": "キャベツ",
                        "price": "158",
                        "img": "cabbage.png"
                    },
                    {
                        "name": "にんじん",
                        "price": "38",
                        "img": "carrot.png"
                    },
                    {
                        "name": "たまねぎ",
                        "price": "28",
                        "img": "onion.png"
                    }
                ]
            }
        },
        {
            "to": [
                {
                    "email": "<<YOUR_ADDRESS>>"
                }
            ],
            "dynamic_template_data": {
                "customer": "花子",
                "gold_member": false,
                "items": [
                    {
                        "name": "レタス",
                        "price": "98",
                        "img": "lettuce.png"
                    },
                    {
                        "name": "トマト",
                        "price": "128",
                        "img": "tomato.png"
                    },
                    {
                        "name": "じゃがいも",
                        "price": "28",
                        "img": "potato.png"
                    }
                ]
            }
        }
    ],
    "from": {
        "email": "yaoya@example.com",
        "name": "yaoya"
    },
    "template_id": "d-XXXXXXXXXXXXXXXX"
}

Dynamic transactional templateを使う場合、

“dynamic_template_data”（代入するパラメータを記載したJSON）
“template_id”（テンプレートのID）

の二つを必ず指定する必要があります。

“dynamic_template_data”では“personalizations”の中の”to”と同じ階層に先ほど作ったJSON形式の宛先ごとのデータを指定しましょう。“personalizations”の中に{}で囲まれた“to”と“dynamic_template_data”の組を複数用意することで、複数の宛先にカスタマイズされた内容を送ることができます。上の例では太郎さんと花子さんに異なる商品をおすすめしています。
“template_id”には“personalizations”や“from”と同じ階層に「2. テンプレートの作成」で確認したIDを指定してください。

あとは、“<<YOUR_ADDRESS>>”の部分を受信が確認できるメールアドレスに変え、“SEND REQUEST”ボタンを押します。最初に示したような太郎さん宛と花子さん宛の2通のメールが受信ボックスに届いていれば成功です！

日々色々なサービスや企業からメールが送られてきますが、そういうメールがどうやって作成、送信されているか、自分自身これまで気に留めてはきませんでした。今回実際に作成してみて、HTMLで書かれたメールや個人ごとにカスタマイズされたメールがどのようにできているのか、その一端を知れたように思います。