AMP for email
AMP for email を使用すると、メールにインタラクティブな要素を追加し、顧客とのコミュニケーションを強化して、ユーザーの受信トレイに直接フル体験を届けることができます。AMP は、アンケート、フィードバック質問票、投票キャンペーン、レビュー、サブスクリプションセンターなど、魅力的なメールコンテンツの構築に役立つさまざまなコンポーネントを活用することでこれを実現します。これらのツールは、エンゲージメント向上とリテンションの機会を提供します。
要件
Braze は、ユーザーが Google に登録したり、必要なセキュリティ要件を満たしたりすることについて責任を負いません。AMP for email は SparkPost と SendGrid でのみ利用可能です。
| 要件 | 説明 |
|---|---|
| AMP for email の有効化 | AMP はすべてのユーザーが利用できます。 |
| Gmail アカウントのイネーブルメント | Gmail アカウントの有効化を参照してください。 |
| Google 送信者認証 | Gmail は DKIM、SPF、DMARC を使用して AMP メールの送信者を認証します。これらをアカウントに設定する必要があります。 - DomainKeys Identified Mail (DKIM) - Sender Policy Framework(SPF) - Domain-based Message Authentication, Reporting, and Conformance(DMARC) |
| AMP メール要素 | 魅力的な AMP メールには、さまざまなコンポーネントの戦略的な使用が含まれます。以下のコンポーネントセクションの「必須要素」タブを参照してください。 |
サポートされているメールクライアント
ユーザーに AMP メールを送信する前に、メールクライアントに登録する必要があります。登録プロセスでは、承認を得るためにテスト用の AMP HTML メールを送信します。承認にかかる時間はクライアントによって異なります。詳細については、登録リンクをご確認ください。
| クライアント | 登録リンク |
|---|---|
| Gmail | |
| FairEmail | FairEmail |
| Yahoo | Yahoo |
| Mail.ru | Mail.ru |
サポートされているメールクライアントの完全なリストについては、AMP ドキュメントを参照してください。
Gmail アカウントの有効化
Gmail の設定に移動し、全般の下にあるダイナミックメールを有効にするを選択します。

API の使用
API を使用して AMP for email を利用することもできます。Braze のメッセージングエンドポイントのいずれかを使用してメールを送信する場合、以下に示すようにオブジェクト仕様として amp_body を追加します。
メールオブジェクト仕様
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"app_id": (required, string) see app identifier above,
"subject": (optional, string),
"from": (required, valid email address in the format "Display Name <[email protected]>"),
"reply_to": (optional, valid email address in the format "[email protected]" - defaults to your workspace's default reply to if not set),
"plaintext_body": (optional, valid plaintext, defaults to autogenerating plaintext from "body" when this is not set),
"amp_body": (optional, updates the text-amp-html MIME type) the email body in AMP HTML. The MIME (Multipurpose Internet Mail Extensions) type to be referenced is "text/x-amp-html",
"body": (required unless email_template_id is given, valid HTML),
"preheader": (optional*, string) Recommended length 50-100 characters,
"email_template_id": (optional, string) If provided, we will use the subject/body/should_inline_css values from the given email template UNLESS they are specified here, in which case we will override the provided template,
"message_variation_id": (optional, string) used when providing a campaign_id to specify which message variation this message should be tracked under,
"extras": (optional, valid key-value hash), extra hash - for SendGrid customers, this will be passed to SendGrid as Unique Arguments,
"headers": (optional, valid key-value hash), hash of custom extensions headers. Currently, only supported for SendGrid customers,
"should_inline_css": (optional, boolean), whether to inline CSS on the body. If not provided, falls back to the default CSS inlining value for the workspace,
"attachments": (optional, array), array of JSON objects like [{"file_name","url"}] that define the files you need attached. Your file name's extension will be detected automatically from the URL, which should return the appropriate `Content-Type` as a response header,
}
AMP メールの作成
まず、コンポーネントを使用して AMP メールを作成します。次に、Braze API を使用してメッセージを送信し、AMP HTML 用の amp_body を必ず含めます。
AMP HTML に加えて、通常の HTML body バージョンが必要であり、AMP メールの plaintext_body バージョンも推奨されます。すべての AMP メールはマルチパートで送信されます。つまり、Braze は HTML、プレーンテキスト、AMP HTML をサポートするメールを送信します。これは、AMP for email をまだサポートしていないプロバイダー経由でメールが送信された場合に便利です。メールはユーザーとそのデバイスに基づいて適切なバージョンに自動的にデフォルト設定されます。
AMP メールを作成する際は、AMP エディターで作業していることを確認してください。AMP コードは HTML エディターに追加しないでください。
以下の追加リソースを参照してください:
- AMP チュートリアル
- 最終的な仕上がりを確認するためのサンプルコード。
- AMP メールコンポーネントライブラリー
コンポーネント
AMP 要素を構築する際は、エンジニアリングチームに確認し、デザインリソースや要素を含めて仕上がりの質を高めることをお勧めします。
以下の各要素は、AMP メールの本文に必須です。
| コンポーネント | 説明 | 例 |
|---|---|---|
識別子 ⚡4email または amp4email |
メールを AMP HTML メールとして識別します。 | <!doctype html> <html ⚡4email> <head> |
AMP ランタイムの読み込み <script> |
JavaScript を使用してメール内で AMP を実行できるようにします。 | <script async src="https://cdn.ampproject.org/v0.js"></script> |
| CSS ボイラープレート | AMP が読み込まれるまでコンテンツを非表示にします。 AMP メールをサポートするメールプロバイダーは、検証済みの AMP スクリプトのみがクライアントで実行されるようにセキュリティチェックを実施します。 |
<style amp4email-boilerplate>body{visibility:hidden}</style> |
これらのコンポーネントを使用して、メール内にダイナミックなレイアウトと動作を作成します。
| コンポーネント | 説明 | 必要なスクリプト |
|---|---|---|
アコーディオン amp-accordion |
ユーザーがコンテンツの概要を表示し、任意のセクションにジャンプできるようにします。 | <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
フォーム amp-form |
AMP ドキュメント内で入力フィールドを送信するフォームを作成します。 | <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> |
ユーザーの認証が必要なコンポーネントは、Google アクセストークンまたはプロキシアサーショントークンを使用する必要があります。
AMP のコンポーネントを活用して、オーディエンスに合わせたメールを作成しましょう。
| コンポーネント | 説明 | 必要なスクリプト |
|---|---|---|
アニメーション画像 amp-anim |
ランタイムで管理されるアニメーション画像(通常は GIF)を表示します。 | <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> |
カルーセル amp-carousel |
類似した複数のコンテンツを水平軸に沿って表示します。 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
| 画像 | HTML の img タグに代わるランタイム管理の要素です。画像のライトボックスを作成することもできます。 |
<amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive"> </amp-img> |
ユーザーの認証が必要なコンポーネントは、Google アクセストークンまたはプロキシアサーショントークンを使用する必要があります。
| コンポーネント | 説明 |
|---|---|
データバインディングと式 amp-bind |
データバインディングと JavaScript ライクな式を使用して、AMP ページにカスタムのステートフルなインタラクティビティを追加します。 |
ユーザーの認証が必要なコンポーネントは、Google アクセストークンまたはプロキシアサーショントークンを使用する必要があります。
AMP コンポーネントの完全なリストについては、AMP ドキュメントをご確認ください。
ユースケース
<amp-form> コンポーネントを使用すると、メールの受信トレイを離れることなく完了できるインタラクティブなアンケートを作成できます。これは、<amp-form> を使用してアンケートの回答を送信し、バックエンドでこの集計データを提供することで実現できます。
例:
- カンファレンスアンケートメール
- フィード内のアイテムのダイナミックな更新
- 記事ブックマークメール
このコンポーネントを使用すると、ユーザーはフィールドの値を送信またはクリアできます。また、メールの設定方法に応じて、アンケートの送信が成功したかどうかなどの追加プロンプトをユーザーに表示したり、アンケート結果(投票キャンペーンなど)を表示してユーザーの回答をレンダリングしたりできます。
<amp-accordion> コンポーネントを使用して、コンテンツセクションを展開できます。このコンポーネントを使用すると、折りたたみ可能で展開可能なコンテンツセクションを表示でき、閲覧者がコンテンツの概要を一目で確認し、任意のセクションにジャンプできるようになります。
長い教育記事やパーソナライズ済みのおすすめを送信する場合、閲覧者がコンテンツの概要を一目で確認し、任意のセクションや特定の製品のおすすめにジャンプして詳細を確認できるようになります。これは、セクション内の数文でもスクロールが必要になるモバイルユーザーにとって特に便利です。
小売ブランドのように多くのプロフェッショナルな写真を含むメールを送信する場合、<amp-image-lightbox> コンポーネントを使用すると、ユーザーが気に入った画像を操作できるようになります。ユーザーが画像をクリックすると、このコンポーネントはメッセージの中央に画像を表示し、ライトボックス効果を作成します。
さらに、<amp-image-lightbox> コンポーネントを使用すると、ユーザーは詳細な画像の説明を表示できます。同じコンポーネントを複数の画像に使用できます。たとえば、メールに複数の画像が含まれている場合、ユーザーがいずれかの画像をクリックすると、その画像がライトボックスに表示されます。
主にテキストコピーに依存するメールの場合、<amp-fit-text> コンポーネントを使用すると、指定された領域内のテキストのサイズとフィットを管理できます。
例:
- テキストを領域に合わせてスケーリング
- 最大フォントサイズを使用してテキストを領域に合わせてスケーリング(最大フォントサイズを設定可能)
- コンテンツが領域をオーバーフローした場合にテキストを切り詰め
amp-mustache の使用
Liquid と同様に、AMP はより高度なユースケース向けのスクリプト言語をサポートしています。このコンポーネントは amp-mustache と呼ばれます。Mustache マークアップ言語を含める場合は、Liquid の raw タグで囲む必要があります。Liquid と Mustache は構文スタイルを共有していることに注意してください。
コンテンツを raw タグで囲むと、Braze の処理エンジンは raw タグ間のコンテンツを無視し、チームが必要とする Mustache 変数を送信します。
指標と分析
| 指標 | 詳細 |
|---|---|
| 開封数合計 | 開封数の合計とは、開封されたメッセージ数の合計です。 AMP メールの場合、これは HTML バージョンとプレーンテキストバージョンの合計開封数です。 |
| クリック数合計 | クリック数の合計は、配信されたメッセージ内のリンクをクリックしたユニークな受信者の数です。 AMP メールの場合、これは HTML バージョンとプレーンテキストバージョンの合計クリック数です。 |
| AMP 開封数 | AMP 開封数は AMP HTML メールおよび AMP HTML バージョンのメールの開封総数です。 |
| AMP クリック数 | AMP クリック数は、AMP HTML メールのクリック数の合計、HTML、プレーンテキスト、および AMP HTML バージョンのメールの総計です。 |
テストとトラブルシューティング
合計クリック数とユニーククリック数には、AMP メッセージから発生したクリック(HTML とプレーンテキストのみ)は含まれないことに注意してください。AMP 固有のクリックは amp_click 指標に帰属されます。
AMP メールを送信する前に、これらの Gmail ガイドラインに従ってテストすることをお勧めします。
AMP メールが Gmail アカウントに配信されるためには、メールが以下の条件を満たす必要があります:
- AMP for email のセキュリティ要件を満たしていること。
- AMP MIME パートに有効な AMP ドキュメントが含まれていること。
- メールに HTML MIME パートの前に AMP MIME パートが含まれていること。
- AMP MIME パートが 100 KB 未満であること。
これらの条件のいずれもエラーの原因でない場合は、サポートにお問い合わせください。
よくある質問
AMP メールでセグメンテーションを使用すべきですか?
さまざまなタイプのユーザーに送信するためにセグメンテーションを使用しないことをお勧めします。これは、AMP メッセージをマルチパートで送信し、元のメールに異なるバージョンが含まれているためです。ユーザーが AMP バージョンを表示できない場合、HTML にデフォルトで戻ります。