Template Engine チュートリアル

Template Engine チュートリアル

この記事は SendGrid’s Template Engine Tutorial の抄訳です。

前回ご紹介したように、Template Engineを使うとマーケティングチームと開発チームの間の壁を取り払うことができます。つまり、マーケターは自分達で簡単にトランザクションメール用のテンプレートを管理することができるようになり、開発者もアプリケーションの開発に集中できるようになります。

今回は、その使い方について具体的にご紹介します。

テンプレートの作成

まずはダッシュボードにログインし、AppsのTemplate Engineを表示します。

「Create Template」をクリックして、テンプレートを作成していきます。
Create Template ボタンのクリック

テンプレートの名前を入力し、保存(Save)をクリックします。
テンプレート名の入力

デザイン画面が表示されます。ここで、テンプレートの名前を変更したり、コンテンツを編集したりできます。
デザイン画面

本文の編集には、WYSIWYGエディタがご利用いただけます。
WYSIWYGエディタ

コードエディタに切り替えれば、HTMLコードを直接書くこともできます。
コードエディタ

作成したテンプレートには、最初から <%subject%><%body%> という2つの置換タグが設定されています。これらはテンプレートに必ず必要なタグで、メールの送信時に内容が動的に置き換えられます。
デザイン画面の初期状態

実際にやってみましょう。サンプルとしてこんなテンプレートを用意しました。
サンプルテンプレート

メール送信スクリプト(Python)はこれを使います。このスクリプトでは、件名に SMTP API のヘッダ情報に基づいた顧客の名前が設定され、本文にスクリプトで指定した文字列が設定されるようになっています。
サンプルスクリプト

先ほどのテンプレートを使って、このスクリプトでメールを送信すると、 <%subject%> の部分が顧客名で置き換えられ、<%body%> の部分がスクリプトで指定された内容で置き換えられます。
送信されたメールのサンプル

置換タグの挙動についてはご理解いただけたでしょうか?
テンプレートには置換タグが必ず必要です。テンプレートとプログラムでどのようにデータをやり取りするか、開発チームとよく話し合ってください。

次に、テキストメール用のテンプレートを設定します。Plain Text Email をクリックしてください。
Plain Text Email ボタンをクリック

Template Engineでは、HTMLメールのテンプレートの内容からテキストメールのテンプレートの内容を自動生成することができます。自動生成する場合はここで Import From HTML をクリックします。
テキストメールの自動生成確認ダイアログ

メールの到達率を高めるためにも、HTMLメールとテキストメールを両方送ることが大切です。テキストメール用のテンプレートも必ず設定するようにしましょう。
自動生成されたテキストメールのサンプル

プレビュー機能

全て設定したら、プレビューで表示を確認しましょう。デスクトップ用とモバイル用の2種類のプレビュー機能があります。
デスクトッププレビューモバイルプレビュー

テンプレートを保存すると、以下の機能も使えるようになります。

テスト機能

まずはテスト機能です。右端のTest ボタンをクリックすると、サイドバーが表示されます。
Test ボタンをクリック

デスクトップ/モバイルでのプレビューを確認したり、メールアドレスを指定してテストメールを送信したりすることができます。
Test機能用サイドバー

ドロップダウンメニュー

次に、ドロップダウンメニューの中を見ていきましょう。メニューには、Make Active(有効化)、Duplicate(複製)、Send a Test(送信テスト)、Delete(削除)があります。
ドロップダウンメニュー

各テンプレートは、複数のバージョンを持つことができます。作成したバージョンを実際にメールテンプレートとして使用するには、Make Active をクリックしてそのバージョンを有効(Active)にする必要があります。有効なバージョンの場合、左上に緑色のACTIVEアイコンが表示されます。
ACTIVE表示

ACTIVEアイコンの左にある、Backボタンをクリックするとテンプレート一覧画面に戻ります。テンプレート一覧画面では、有効なバージョンは枠が緑色になり、ACTIVEアイコンが表示されているのが分かります。
テンプレート一覧画面

テンプレートの上部には「ID」が表示されています。
テンプレートIDの確認

IDは開発者にとって非常に重要な意味を持つものです。APIからメールを送信する際、どのテンプレートを適用するかを指定するのにこのIDを使うからです。なお、APIやSMTP経由でシステム連携しているかどうかに関わらず、送信するメールのSMTP APIヘッダにテンプレートIDを指定しておけば、そのテンプレートの有効なバージョンがメールに適用されます。

その他の機能

テンプレート一覧画面では、ビュータイプの変更や、テンプレートの作成・管理ができます。
テンプレート一覧画面のドロップダウンメニュー

今回ご紹介したのは、Template Engine の機能の一部です。是非一度、この機能を使って実際にテンプレートを作成してみてください!