PHP SenGrid プログラミング

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

サンプルなので簡単にですが、以下のようなテンプレ―トを作成しました。

モジュール内の「{{}}」はLaravelからのリクエストパラメータを設定するためのタグです。

参考:文字列の埋め込み

テンプレートが完成したら「Save Template」を押下し、テンプレート作成を終えます。

作成したテンプレ―トはプレビューと送信テストが可能です。

任意のテンプレートを選択し、「Preview&Test」を押下します。

プレビューはPCかスマートフォンの画面の確認ができます。

また「Send Test」から任意の宛先に実際に送信が可能です。

まとめ

以上がSendGridのテンプレート作成でした。

次回は作成したテンプレートをLaravelからリクエストを投げ実際に送信を行いたいと思います。

参考

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

Design & Code Editor

-PHP, SenGrid, プログラミング

関連記事

【VirtualBox】スナップショットの作成・適用・削除

業務では主にHyper-Vを使用しているのですが、「チェックポイント」という機能がとても便利で重宝しています。 機能の概要は、稼働している仮想環境を「チェックポイント」として保存することができ、作成し …

【Laravel-admin】Laravel-adminでのRoles(役割)とpermission(権限)について

前回「【laravel-admin】Laravel-adminで新規テーブルを作成しCRUD画面を追加する方法」でテーブルを作成し画面を追加しました。 今回は作成したテーブルの操作画面をメニューを追加 …

no image

【WordPress】WordPressをDockerToolboxを使用して構築する方法

どうも、こんばんは。 突然ですが、僕は開発にもっぱらxamppを使ってきました。 自宅での開発もLaravelとWordpressのみなので、xamppでも十分なのですが、会社の開発ではxamppでは …

【Laravel-admin】リレーション関係を持ったCRUD作成(1対1、1対多、多対多)

前回、【Laravel-admin】Laravel-adminで新規テーブルを作成しCRUD画面を追加する方法でLaravel-adminでテーブルのCRUD画面を作成しました。 単一のテーブルであれ …

仮想環境簡単設定ツール「Vagrant」のインストール

どうもこんばんは。 以前【WordPress】WordPressをDockerToolboxを使用して構築する方法にて、Wordpressをdockerコンテナ上で構築しました。 今回は最近よく触って …