【SendGrid】SendGridでトランザクションテンプレート作成

はじめに

前回SendGridに登録を行いAPIKeyの作成を行いました。

関連記事：【SendGrid】SendGridについての概要

この記事ではSenGridのトランザクションメールのテンプレートを作成していきたいと思います。

なお、トランザクションメールとは、何らかの契機によってメールの自動送信を行う機能になります。

トランザクションメールのほかにマーケティングメールがあり、こちらは決まった時間に宛先リストに対して送信する機能になります。

詳しい内容については以下のSendGrindブログで紹介されています。

参考記事：トランザクションメールとマーケティングメールの違いとは？

はじめに
作成対象
テンプレート作成方法
まとめ
参考

作成対象

・Dynamic Transactional Template

・Design Editor

テンプレート作成方法

まずログインページよりログインを行い、サイドメニュー「Templates」より「Transactional」を選択し、遷移した画面で「Create Template」を押下します。

※「Legacy Template」は従来のテンプレート機能であり、条件分岐してコンテンツを切り替える等の細か設定に対応していない部分があるため、本記事では新しいテンプレート機能である「Dynamic Transactional Template」の紹介を行います。

遷移した画面でテンプレート名を入力し「Save」を押下します。

新しいテンプレートが作成されますので、「Add Version」を押下し、「Design Editor」を選択後、「Continue」を押下します。

Design Editorに遷移します。

まずSettingsタブに関してですがこちらのタブはメールの件名等基本設定となります。

「Template Name」は現在開いているテンプレートバージョンの名称になります。

SendGridのテンプレートは、初めに作成したテンプレートが親テンプレートのような役割を持っていて、その下にテンプレートを作成し任意の子テンプレートをアクティブにすることで、その子テンプレートを使用し送信ができる機能を持っており、その際に区別を行うため子テンプレートにも名称を設定する必要があります。

「Email Subject」は件名、「Email Preheader」は件名の後に表示されるプリヘッダーテキストです。

次にBuildタグですが、こちらのタグのモジュールを使用しメール本文の編集を行っていきます。

作成の流れとしては、「ADD MODULES」の中の任意のモジュールをテンプレート内にドラッグにより追加し、追加したモジュールへテキストや画像を挿入する、という感じです。

モジュール内容はザックリと以下です。

※Unsubscribeのみまだ詳しく調べられていません。確認次第更新します。

モジュール	説明	指定可能なオプション
Button	URLの埋め込みができるボタンです。	ボタンの色、境界線の色、フォントの色、幅、高さ、余白、境界線の半径、フォントサイズ、ボタンのテキスト、ボタンのURL、配置、背景色、padding
Columns	テンプレートに列を追加します。また、このモジュールには、他の非カラムモジュール用(Textモジュールなど)の複数（１～４）のドロップゾーンがあります。	列の背景、padding、セルのパディング、列数
Code	HTMLを入力することができるモジュールです。	-
Text	テキスト、表、画像を含めることができます。	背景色、padding、行の高さ
Image	単一の画像を含めることができます。データ属性は<img>タグに直接挿入できます。	画像の背景、画像の余白、リンクのURL、代替テキスト、配置、レスポンシブ、高さ、幅
Image and Text	2つの列を持つモジュールです。画像かテキストを含むことができます。	画像、画像位置、画像背景、画像余白、テキスト背景、テキスト余白
Spacer	スペースを挿入できます。	背景色、間隔（余白）
Divider	モジュール間に配置できる仕切りです。	背景色、線の色、高さ、padding
Social	キャンペーン内のソーシャルメディア統合を可能にするアイコン（Facebook、Twitter、Instagram、Google +、Pinterest）を配置できます。またURLが未入力のアイコンは非表示にできます。	背景色、アイコン色、サイズ、境界線の半径、各アイコンのURL。
Unsubscribe	このモジュールに関してはまだ詳しく調べられていません。	-