テンプレートを適用して送信する(Dynamic Transactional Template編)

トランザクションメールにテンプレートを適用する機能として、新しくDynamic Transactional Templateがリリースされました。従来のテンプレート機能に加え、Handlebarsを利用して条件分岐や繰り返しなどを実装することで、コンテンツを柔軟に制御できるようになっています。詳しい使用方法はチュートリアル(英語版)をご確認ください。

以下、テンプレートを適用したメールを送信する手順を紹介します。

テンプレートを編集する

テンプレートの編集は、Webポータルから行うことができます。まず、Webポータルのメニューから「Email API > Dynamic Templates」を選択します。

画面右上の「Create a Dynamic Template」ボタンを選択します。

新しいテンプレートの名前を入力して「Create」ボタンを選択します。

新しいテンプレートが作成されたら、テンプレート名をクリックして「Add Version」ボタンを選択します。

「Your Email Designs(ユーザが作成したテンプレート)」または「SendGrid Email Designs(SendGridが用意したテンプレート)」のどちらかを選びます。編集したいテンプレートにカーソルをあわせると「Select」が表示されますので、選択します。

「Design Editor(WYSIWYGエディタで編集する)」または「Code Editor(HTMLコードを編集する)」のどちらかを選び、「Select」を選択します。

Design EditorまたはCode Editorが表示されるので、テンプレート編集を行います。使用するエディタの種類はテンプレートのバージョンごとに切り替えることができます。

＜Design Editor＞

＜Code Editor＞

テンプレートを編集したら画面上部の「Save」ボタンを選択します。

テキストパートの編集

作成したHTMLパートの内容から自動的にテキストパートが生成されますが、テキストパートの内容を別途編集することも可能です。

編集する場合は、画面上部の「Plain Text」タブを選択し、「AUTOMATICALLY CREATE PLAIN TEXT VERSION」をOFFに切り替えてください（Design Editorでは、先に「PREVIEW」モードに切り替える必要があります）。

＜Design Editor＞

＜Code Editor＞

テンプレートのプレビュー

次に、プレビュー機能でテンプレートの表示を確認します。

テンプレートの縦三点リーダ（︙）から「Preview」メニューを選択すると、HTMLメール(PC)、HTMLメール(モバイル)、テキストメールの3種類のプレビューを確認できます。

テンプレートの編集中に「PREVIEW」モードに切り替えることでもプレビュー表示を確認できます。

テスト送信

プレビュー機能で表示確認したらテスト送信を行い、実際に受信して表示を確認します。

テンプレートの縦三点リーダ（︙）から「Edit」メニューを選択すると編集画面が表示されます。「Settings」タブの「TEST YOUR EMAIL」を選択し、テスト送信の宛先を指定して「Send Test Message」ボタンを選択すると、テストメールが送信されます。

テンプレートIDの確認

テンプレートの編集が完了したら、「Save」ボタンで保存後、画面左上の「←」ボタンを選択してテンプレート一覧に戻ります。

テンプレート一覧で表示されるテンプレートIDは送信時に必要になるので確認しておきます。各テンプレートには複数のバージョンを登録することができますが、「ACTIVE」と記載されたバージョンが自動的に適用されます。

テンプレートを指定してメール送信する

SMTP API(X-SMTPAPIヘッダ)は、Dynamic Transactional Templateをサポートしていないため、Web API v3の使用が必須です。

Web API v3でテンプレートを利用してメール送信する場合、リクエストパラメータ内の「template_id」パラメータで先ほど確認したテンプレートIDを指定します。詳しくはAPIリファレンスを参照してください。

1
2
3
4
5
6
7

{
  "personalizations": [
    ：
  ],
  "template_id": "d-0fb7f744de504ab3ad853f743942b3db"
  ：
}

文字列の埋め込み

Dynamic Transactional Templateで宛先ごとに異なる文字列を埋め込むためには、項目名を{{ }}で囲んだタグをテンプレート内に記載します。

以下は、メールの件名とメール本文の「ようこそ 〇〇 さん！」の箇所を動的に変更する例です。件名は {{title}} とし、本文に「ようこそ {{name}} さん！」のようにタグを埋め込みました。

実際に埋め込む文字列は、Web APIのリクエストパラメータ(dynamic_template_data)で指定します。 以下のように、項目名(name, title)と文字列をJSON形式で記載してください。

1
2
3
4
5
6
7
8
9
10

{
  "personalizations": [
    {
      "to": [{"email": "recipient_address@example.com"}],
      "dynamic_template_data": {"name": "構造計画研究所", "title":"テストメール"}
    }
  ],
  "from": {"email": "from_address@example.com"},
  "template_id": "d-0fb7f744de504ab3ad853f743942b3db"
}

その他のDynamic Transactional Templateの使用方法は、チュートリアル(英語版)をご確認ください。