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