Code Editor

コードエディタは、テンプレートの作成や編集およびキャンペーンの作成時に使用するもので、直接HTMLを記述することができます。プレビューやタグの補完、エラーの指摘などの便利な機能により、快適にHTMLを編集することができます。

コードエディタ入門

  1. 画面左側のナビゲーションメニューからMarketings > Campaignsをクリックします。

  2. Create Campaignをクリックします。
    未送信のキャンペーンを元に作成する場合は、そのキャンペーンのアクションメニューをクリックし、EditまたはDuplicateを選択します。送信済のキャンペーンから作成する場合は、Duplicateのみ選択可能です。

  3. キャンペーンで使用するテンプレートを選択します。
    このとき、空白のテンプレート、過去に作成したカスタムテンプレート、SendGridのデフォルトのテンプレートのいずれかが選択可能です。詳しくはTemplatesを参照してください。

  4. Code Editorを選択してContinueをクリックします。
    すでに別のアプリケーションで使っているHTMLコードがある場合は、コードエディタのコンテンツエリアにコードを直接コピー&ペーストしてください。コードエディタにはタグの補完、シンタックスハイライト、エラーの詳細表示の各機能があります。

  5. コードエディタのコンテンツエリアの記述内容については、Live Preview機能を使用できます。Live Preview機能ではHTMLの変更を即時反映してプレビュー表示します。デフォルトのプレビューモードはPC版です。
    画面上部のPCまたはモバイルのアイコンをクリックすることで、PC/モバイル版のプレビューを切り替えることができます。また、Tアイコンをクリックすると、キャンペーンやテンプレートのテキストメールを表示します。このモードでEdit Plain TextボタンをONにすると、キャンペーンやテンプレートのテキストメールを編集することができます。

コードエディタで作成したキャンペーンやテンプレートは、デザインエディタに切り替えることはできません。

画像をアップロードする

  1. HTMLコード上部の画像アイコンを選択します。開いたウィンドウで、Image Libraryに画像を追加します。

  2. 使用する画像をImage Libraryから選択します。

  3. Images Detailsタブを選択し、Image Source URLタブのCopy URLをクリックしてURLをコピーします。

  4. <img src="http://画像のURL">のように、コピーしたURLをキャンペーンやテンプレートのimgタグにペーストします。

Substitution Tagsを使用する

Substitution Tagsを使用すると、宛先ごとに異なる内容（宛名など）を動的に埋め込むことができます。一般的な例としては、キャンペーンの本文または件名に、受信者の名前を追加するといったことが挙げられます。

キャンペーンにSubstitution Tagを追加する方法

  1. エディタ左側のSettingsタブをクリックします。

  2. SettingsのTagsタブをクリックします。

  3. 追加するタグをクリックすると、自動的にそのタグの内容がクリップボードへコピーされます。

  4. HTMLコードにコピーしたタグをペーストします。

マーケティングキャンペーンに追加できるSubstitution Tagsは以下の通りです。

Substitution Tag 説明 種類
[%email%] 受信者のメールアドレス Personalization
[%first_name%] 受信者の名 Personalization
[%last_name%] 受信者の姓 Personalization
[Sender_Name] 差出人の名前（SenderのFrom Name） Sender Identity
[Sender_City] 差出人の市区町村（SenderのCity） Sender Identity
[Sender_State] 差出人の都道府県（SenderのState） Sender Identity
[Sender_Zip] 差出人の郵便番号（SenderのZip Code） Sender Identity
[Unsubscribe] 指定した配信停止グループの配信停止リンク Unsubscribe
[Unsubscribe_Preferences] 受信者自身がメルマガ等の配信停止または購読再開を設定するためのページへのリンク Unsubscribe
[Weblink] メールが正しく表示されない場合に、メールソフトの代わりにブラウザで表示してもらうためのリンク Weblink

カスタムフィールドの情報が未登録の宛先については、Substitution Tagの箇所が空欄になります。初期値を設定するには次のように記載します。

[%first_name | 初期値%]

例）宛先情報のfirst nameを使って「太郎様」などと表示するが、未設定であれば「お客様」とする場合

[%first_name | お客%]様

配信停止タグを配置する

マーケティングキャンペーンでは配信停止タグの配置が必須のため、本文に以下のいずれかを配置してください。

  • Global Unsubscribe
    <%asm_global_unsubscribe_raw_url%>
  • Group Unsubscribe
    <%asm_group_unsubscribe_raw_url%>

＜配信停止タグ：Group Unsubscribeの使用例＞

例）テキストパートで任意の場所に配信停止URLを配置する

1
2
3

<%asm_group_unsubscribe_raw_url%>
↓
配信停止URL（http(s)://～）

例）HTMLパートで任意の場所に設定したタグに配信停止URLを指定する

1
2
3

<a href="<%asm_group_unsubscribe_raw_url%>">配信停止する</a>
↓
<a href="配信停止URL（http(s)://～）">配信停止する</a>

配信停止用のタグとあわせて、受信者自身が購読管理できるページへのリンクを挿入することも可能です。以下のタグを使用してください。

  • 購読管理ページ
    <%asm_preferences_raw_url%>

SendGridには様々な種類の配信停止タグが用意されています。その他の配信停止タグについてはこちらをご確認ください。

※SendGridの配信停止機能ではなく、独自の配信停止機能を使用する場合は「Custom Unsubscribe Link」を利用してください。

カテゴリを追加する

キャンペーンにカテゴリを追加すると、設定したカテゴリに従ってメールをトラッキングすることができます。キャンペーンをカテゴリにアサインすることで、複数の類似したキャンペーンの統計情報をまとめて確認できます。カテゴリの例としては、「Weekly Digest」「Product Announcements」などがあげられます。カテゴリとして使用できるのはASCII文字のみです。

  1. 画面左側のsettingsパネルを開きます。

  2. Settingsタブを開き、Campaigns Settingsメニューを展開します。

  3. Campaigns SettingsのCategoriesの入力欄を選択します。

  4. Add Categoriesを選択した後、タグをタイプし、Enterキーを押下することによりカテゴリを追加します。

現在、キャンペーン１つ当たり10件までのカテゴリを追加できます。

カテゴリには日本語を使わないことを推奨します。日本語のカテゴリを使用した場合、マーケティングキャンペーンの送信自体は可能ですが、Category Statsには表示されません。

参考