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

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

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

テンプレートを編集する

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

画面右上の「Create Template」ボタンを選択して、新しいテンプレートの名前を入力したら「Save」ボタンを選択します。

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

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

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

<Design Editor>

<Code Editor>

画面上部の「T」アイコンを選択し、「EDIT PLAIN TEXT」をONに切り替えるとテキストメールのテンプレートを編集できます。テンプレートはHTML、テキスト両方必須です。

<Design Editor>

<Code Editor>

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

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

次に、プレビュー機能でテンプレートの表示を確認します。テンプレートのACTIONS > Preview & Testメニューを選択すると、HTML(PC)、HTML(モバイル)のプレビューを確認できます。

また、Design EditorまたはCode Editorを開くと、HTML(PC)、HTML(モバイル)、テキストの3種類のプレビューを確認できます。

テスト送信

プレビュー機能で表示確認したらテスト送信を行い、実際の宛先で表示を確認します。テンプレートのACTIONS > Preview & TestメニューからPreview画面を開き、「Send Test」を選択します。

テスト送信の宛先を指定して「Send」ボタンを選択すると実際にメールが送信されます。

テンプレートIDの確認

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

テンプレート一覧で表示されるテンプレート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-5884a7d8a8344875aee3b8b13dcc0cd1"
  
}

文字列の埋め込み

Dynamic Transactional Templateで宛先ごとに異なる文字列を埋め込むためには、項目名を{{ }}で囲んだタグをテンプレート内に記載します。 以下は、メールの件名とメール本文の「ようこそ 〇〇 さん!」の箇所を動的に変更する例です。件名は {{title}} とし、本文に「ようこそ {{name}} さん!」のようにタグを埋め込みました。

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

1
2
3
4
5
6
7
8
{
  "personalizations": [
    
    "dynamic_template_data": {"name": "構造計画研究所", "title":"テストメール"}
  ],
  "template_id": "d-5884a7d8a8344875aee3b8b13dcc0cd1"
  
}

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