AMP for Email入門 Vol.2 ～Salesforce Marketing Cloudでテストメール送信編～

こんちには！
LIFULLエンジニアの吉永です。

本日はAMP for EmailをSalesforce Marketing Cloud（以降SFMCと略します）でAMP for Emailを送信する際の手順について紹介します。

前回の記事は[こちら](https://qiita.com/YoshinagaYuta/items/aaa1978545d1c71e08bd)

## SFMCでAMP for Emailを作成

SFMCでのAMP for Emailについての詳細はこちらの[公式ドキュメント](https://help.salesforce.com/s/articleView?language=en_US&type=5&id=sf.mc_es_create_an_amp_email.htm)を参照ください。

SFMCでAMP for Emailを作成するにはContent BuilderでHTMLメールのコンテンツを作成する必要があります。
今回は前回の記事でご紹介した[Gmail AMP for Email Playgroud](https://qiita.com/YoshinagaYuta/items/aaa1978545d1c71e08bd#%E3%81%B2%E3%81%A8%E3%81%BE%E3%81%9Aamp-for-email%E3%82%92%E9%80%81%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B)のコードでメールを作成したいと思います。

1. Content Builderの画面を開き、作成を押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/0884fe1e-474f-0c43-9e26-e8005987e114.png)
1. メールメッセージを選択します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/b86ca1b2-44e1-f529-232f-0da629fae959.png)
1. 作成オプションを選択をクリックし、`HTML + AMP`を選択します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/78c18fcc-876a-fc8a-7842-cef5be67d694.png)
1. 名前に`AMP4Email`と入力し、次へボタンを押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/d08aaa21-f8e9-25b1-8eb1-3e43ee801e04.png)
1. 件名に`Hello AMP for Email`を入力し、[HTMLメール用のコード](#htmlメール用のコード)を貼り付けます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/1c42982c-2085-7f2b-4336-7d545b02fce8.png)
1. 右カラムのタブを`AMP`に切り替え、[AMP for HTML用のコード](#amp-for-htmlメール用のコード)を貼り付けます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/e336ee26-7382-8adf-23f8-7fc3a8dc92a2.png)
1. 次へを押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/06b21c8b-e668-97aa-092f-79713bf6e698.png)
1. テスト送信時に利用する購読者を選択します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/6cddd842-4fc4-e1e8-2d7c-d10b31b39fb3.png)
1. メールアイコンのタブに切り替え、テスト送信先のメアドを設定後にテストの送信ボタンを押します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690018/9ba963b6-f00c-418c-0047-612390145284.png)

以上で、前回の`Gmail AMP for Email Playgroud`からテスト送信したメールと同じものが受信確認できると思います。
もし受信できない場合は、Gmailの動的メールのデベロッパー向け設定より、SFMCから送信する際のメールアドレスを許可する設定が必要になりますので、設定してみてください。

### HTMLメール用のコード

```html
This is the <b>HTML content</b>. To see dynamic emails sent from amp@gmail.dev in Gmail, whitelist amp@gmail.dev in Gmail Settings > General > Dynamic email > Developer settings.
```
 
### AMP for HTMLメール用のコード

```html
<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>
```

## まとめ

SFMCからAMP for Emailを送る手順は割と簡単だったと思います。

反面、運用面で少々つらいところがありまして、HTMLメールのテンプレートを元にコンテンツを作成する場合は、HTMLテンプレートの内容はコンテンツに反映され、メール毎に変更する個所のみを変更することで簡単に様々なメールを作成できるのですが、AMP for EmailはHTMLメールのテンプレートとは全くの別管理となり、基本的にはそのコンテンツ内でしか管理できません。
なので、テンプレートを用いて運用している場合は、AMP for Emailのその他メールへの横展開を全て手作業で行う必要があり、テンプレートを用いる利点が薄れてしまっていることが少し残念です。

AMP for Email自体まだまだ利用されている会社が少ないと思うので、Salesforce社の今後の改善に期待して待ちたいと思います。

最後までご覧いただき、ありがとうございました。
それではまた次の記事でお会いしましょう。