メールのためのAMP
メール用[AMP<1>}を使用すると、メールにインタラクティブな要素を追加し、顧客とのコミュニケーションを向上させ、ユーザーの受信トレイに直接完全な体験を提供できます。AMPは、アンケート、フィードバック質問票、投票キャンペーン、レビュー、サブスクリプションセンターなどのエキサイティングなメール提供を構築するのに役立つさまざまなコンポーネントを使用することで、これを可能にします。このようなツールは、エンゲージメント向上とリテンションの機会を提供することができます。
要件
Brazeは、Googleで登録するユーザーや必要なセキュリティ要件を満たすことに対して責任を負いません。
要件 | 説明 |
---|---|
AMPがメールでオンになりました | AMPは誰でも利用できます。この機能を有効にしたい場合は、アカウントマネージャーに連絡してください。 |
Gmailアカウントイネーブルメント | Gmailアカウントの有効化を参照してください。 |
Google送信者認証 | Gmail は送信者を認証します AMPメールのDKIM、SPF、およびDMARCを使用します。これらはあなたのアカウントに設定する必要があります。 ドメインキー識別メール (DKIM) 送信者ポリシーフレームワーク(SPF) ドメインベースのメッセージ認証、報告、および適合(DMARC) |
AMP メール要素 | 説得力のあるAMPメールには、さまざまなコンポーネントの戦略的な使用が含まれます。以下のコンポーネントセクションの必須タブを参照してください。 |
サポートされているクライアント
ユーザーにAMPメールを送信する前に、クライアントに登録する必要があります。登録プロセスには、承認を得るためにテストAMP HTMLメールを送信することが含まれます。承認時間はクライアントごとに異なります。詳細については、登録リンクに従ってください。
クライアント | 登録リンク |
---|---|
Gmail | グーグル |
フェアメール | フェアメール |
ヤフー | ヤフー |
Mail.ru | Mail.ru |
サポートされているプラットフォームの完全なリストについては、AMPドキュメントを参照してください。
Gmailアカウントを有効にする
Gmailの設定に移動し、ダイナミックなメールを有効にするを全般の下で選択します。
API使用
また、APIを使用してメールにAMPを使用することもできます。Brazeのメッセージングエンドポイントを使用してメールを送信する場合は、以下に示すようにamp_body
をオブジェクト仕様として追加します。
メール object specification
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 amp_body
HTMLを含めるようにしてください。
AMP HTML に加えて、通常の HTML body
バージョンが必要であり、AMP メールの plaintext_body
バージョンを提案します。すべてのAMPメールはマルチパートで送信されます。つまり、BrazeはHTML、プレーンテキスト、およびAMP HTMLをサポートするメールを送信します。これは、メールがAMP for emailをまだサポートしていないプロバイダー経由で送信された場合に役立ちます。なぜなら、メールはユーザーとそのデバイスに基づいて適切なバージョンに自動的にデフォルトするからです。
AMPメールを作成する際には、AMPコードをHTMLエディタに追加しないように、AMPエディタにいることを確認してください。
これらの追加リソースを参照してください:
- AMPチュートリアル
- サンプルコードが最終製品の見た目を確認するためのものです。
- AMP メール components ライブラリー
コンポーネント
これらはAMP HTML email…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>
コンポーネントを使用すると、指定された領域内のテキストのサイズとフィット感を管理できます。
例としては次のようなものがあります:
- テキストをエリアに合わせて拡大縮小する
- テキストをエリアに合わせてスケーリングし、最大フォントサイズを使用して最大フォントサイズを設定できます。
- コンテンツが領域を超えたときにテキストを切り捨てる
アンプ-ムスタッシュを使用する
Liquidと同様に、AMPはより高度なユースケースのためのスクリプト言語をサポートしています。このコンポーネントはamp-mustache
と呼ばれます。Liquidのraw
タグで囲む必要があります。LiquidとMustacheは構文スタイルを共有していることに注意してください。
コンテンツをraw
タグで囲むと、Braze処理エンジンはraw
タグ間のコンテンツを無視し、チームが必要とするMustache変数を送信します。
メトリクスと分析
メートル法 | 詳細 |
---|---|
開封数の合計 | AMPメールのHTMLおよびプレーンテキストバージョンの合計オープン数。 |
クリック数の合計 | AMPメールのHTMLおよびプレーンテキストバージョンでの総クリック数。 |
AMPが開く | AMP HTML メールおよび AMP HTML バージョンのメールの開封総数。 |
AMP クリック数 | AMP HTML メールのクリック数の合計、HTML、プレーンテキスト、および AMP HTML バージョンのメールの累積数。 |
テストとトラブルシューティング
総クリック数とユニーククリック数には、AMPメッセージから発生するクリックは含まれません(HTMLおよびプレーンテキストのみ)。AMP固有のクリックはamp_clickメトリックに帰属します。
送信する前に、AMPメールをこれらのGmailガイドラインに従ってテストすることをお勧めします。
AMPメールを任意のGmailアカウントに配信するには、メールが次の条件を満たしている必要があります:
- メールのセキュリティ要件のためのAMPを満たす必要があります。
- AMP MIMEパートには有効なAMPドキュメントが含まれている必要があります。
- メールにはHTML MIMEパートの前にAMP MIMEパートを含める必要があります。
- AMP MIME パートは 100 KB 未満である必要があります。
これらの条件のいずれもエラーを引き起こしていない場合は、[サポート][support]に連絡してください。
よくある質問
AMPメールでセグメント化すべきですか?
私たちは、すべての異なるタイプのユーザーに送信するためにセグメント化しないことを提唱しています。これは、元のメールに含まれる異なるバージョンを持つマルチパートでAMPメッセージを送信するためです。ユーザーがAMPバージョンを表示できない場合、デフォルトでHTMLに戻ります。
AMPメールを作成するための追加のヒントはありますか?
AMP要素を構築するために、開発チームに確認してください。これらの要素が設定された後、デザインリソースや要素を追加して、さらに磨きをかけることをお勧めします。
[support]: /docs/ja/support_contact/