カスタムHTMLでメールを作成する
メールメッセージは、ユーザーが望むタイミングでコンテンツを届けるのに最適です。また、アプリをアンインストールしたユーザーを再エンゲージするための優れたツールでもあります。カスタマイズされたメールメッセージを送信することで、ユーザー体験が向上し、アプリから最大限の価値を引き出す手助けになります。
メールCampaignの例については、ケーススタディをご覧ください。
メールCampaignを初めて作成する場合は、以下のBrazeラーニングコースを確認することを強くお勧めします。
ステップ 1: メッセージの作成場所を選択する
シンプルな単一メッセージにはCampaignを使用します。複数ステップのユーザージャーニーにはCanvasを使用します。
- メッセージング > Campaigns に移動し、キャンペーンを作成を選択します。
- メールを選択するか、複数チャネルを対象とするCampaignの場合はマルチチャネルを選択します。
- Campaignにわかりやすく意味のある名前を付けます。
- 必要に応じてチームとタグを追加します。
- タグを使うと、Campaignの検索やレポートの作成が容易になります。たとえば、レポートビルダーを使用する際に、特定のタグでフィルタリングできます。
- Campaignに必要な数のバリアントを追加して名前を付けます。このトピックの詳細については、多変量テストとABテストを参照してください。
Campaign内のすべてのメッセージが類似している、または同じコンテンツを持つ場合は、追加のバリアントを追加する前にメッセージを作成してください。その後、バリアントを追加ドロップダウンからバリアントからコピーを選択できます。
- Canvasコンポーザーを使用してCanvasを作成します。
- Canvasの設定が完了したら、Canvasビルダーでステップを追加します。ステップにわかりやすく意味のある名前を付けます。
- ステップスケジュールを選択し、必要に応じて遅延を指定します。
- 必要に応じて、このステップのオーディエンスをフィルタリングします。Segmentを指定し、追加のフィルターを追加することで、このステップの受信者をさらに絞り込むことができます。オーディエンスオプションは、遅延後のメッセージ送信時にチェックされます。
- 進行動作を選択します。
- メッセージと組み合わせたい他のメッセージングチャネルを選択します。
カスタムHTMLを構築する予定で、デバイスのダークモードがオンの状態でGmailモバイルアプリの背景の一貫性を保つ必要がある場合は、Gmailモバイルアプリとダークモードの背景色を参照してください。
HTMLエディタにアクセスするには、IT管理者に連絡し、ファイアウォールが*.bz-rndr.com allowlistedになっていることを確認する。
ステップ 2: 編集エクスペリエンスを選択する
Brazeでは、メールCampaignを作成する際に2つの編集エクスペリエンスを提供しています。ドラッグ＆ドロップエディターと標準HTMLエディターです。お好みの編集エクスペリエンスに対応するタイルを選択してください。
次に、既存のメールテンプレートを選択するか、ファイルからテンプレートをアップロードするか（HTMLエディターのみ）、空白のテンプレートを使用できます。
HTMLエディターを使用していて、デバイスがダークモードの場合にGmailモバイルアプリで背景色の一貫性を保つ必要がある場合は、Gmailモバイルアプリとダークモードの背景色を参照してください。
メールCampaignごとに1つの編集エクスペリエンスを選択することをお勧めします。たとえば、1つのメールCampaign内でHTML ClassicまたはBlock editorのいずれかを選択し、エディター間を切り替えないようにしてください。
ステップ 3: メールを作成する
テンプレートを選択すると、メールの概要が表示され、フルスクリーンエディターに直接移動してメールを作成したり、送信情報を変更したり、配信性やコンプライアンスに関する警告を確認したりできます。作成中は、HTML、クラシック、プレーンテキスト、AMPタブを切り替えることができます。
Brazeは、プレーンテキストバージョンへの編集が検出されるまで、HTMLバージョンからプレーンテキストバージョンを自動的に更新します。Brazeが編集を検出すると、意図的な変更が行われたと判断し、プレーンテキストの更新を停止します。自動同期を復元するには、Plaintextに移動してRegenerate from HTMLを選択します（プレーンテキストが同期していない場合にのみ表示されます）。
正確なプレビューでメールにモーションを追加するには、JavaScriptの代わりにGIFを使用してください。ほとんどの受信トレイはJavaScriptをサポートしていません。
Brazeは、属性として参照されるHTMLイベントハンドラーを自動的に削除します。これによりHTMLが変更されるため、完了後にメールを再確認してください。HTMLハンドラーの詳細をご覧ください。
素晴らしいコピーの作成にお困りですか？AIコピーライティングアシスタントをお試しください。製品名や説明を入力すると、AIがメッセージングに使用できる人間らしいマーケティングコピーを生成します。
アラビア語やヘブライ語などの右から左に書く言語のメッセージ作成にお困りですか？ベストプラクティスについては、右から左に書くメッセージの作成を参照してください。
Gmailモバイルアプリとダークモード
Gmailモバイルアプリ（AndroidおよびiOS）は、デバイスがダークモードの場合に背景色を反転させることがあります。これにより、メールの背景が画像の端や特定のブランドカラーと一致する必要があるレイアウトが崩れる可能性があります。
これを回避するには、安定した背景が必要なテーブルセルで、background-colorの代わりに単色のCSS linear-gradientを使用します。Gmailは、フラットな背景色よりもこの処理を反転させる可能性が低くなります。
たとえば、セルに白い背景を維持するには、以下を使用します。
1
<td style="background-image: linear-gradient(#ffffff, #ffffff);">
#ffffffを目的の色に置き換えてください。
このアプローチは<table>要素単体には確実に適用されないため、テーブルだけでなくセルにグラデーションを設定してください。
グラデーション構文の詳細については、W3SchoolsのCSSグラデーションを参照してください。
ステップ 3.1: 送信情報を追加する
メールメッセージのデザインと構築が完了したら、送信設定で送信情報を追加します。
- 送信情報で、差出人表示名 + アドレスとしてメールを選択します。差出人表示名 + アドレスをカスタマイズを選択してカスタマイズすることもできます。
- 返信先アドレスとしてメールを選択します。返信先アドレスをカスタマイズを選択してカスタマイズすることもできます。
- 次に、BCCアドレスとしてメールを選択し、このアドレスにメールが表示されるようにします。
- メールに件名を追加します。オプションで、プリヘッダーとプリヘッダー後の空白を追加することもできます。
From Display Name + Address と 返信先 Address のフィールドでは、カスタム属性に基づいてダイナミックなテンプレートを作成するために Liquid を使用できる。これにより、単一のメールキャンペーンやキャンバスステップを使って、異なるブランド、地域、部門から送信できる。
右側のパネルのプレビューに、追加した送信情報が表示されます。この情報は、設定 > メール設定 > 送信設定に移動して更新することもできます。
詳細設定
送信設定 > 詳細設定で、インラインCSSをオンにすると、最も幅広いクライアントサポートが得られます。メッセージがクリップされたり、画像が行の高さに引き伸ばされたりする場合は、インラインCSSを一時的にオフにしてみてください。一部のテンプレートはインライン化なしの方がうまく動作します。
メールヘッダーやメールエクストラのパーソナライゼーションを追加して、他のメールサービスプロバイダーに追加データを送信することもできます。
メールヘッダー
メールヘッダーを追加するには、Add New Headerを選択します。メールヘッダーには、送信されるメールに関する情報が含まれています。これらのキーと値のペアには、通常、送信者、受信者、認証プロトコル、ルーティング情報が含まれます。Brazeは、メールが受信トレイプロバイダーに到達するために必要なRFC準拠のヘッダー情報を自動的に追加します。
Brazeでは、高度なユースケースに必要な追加のメールヘッダーを柔軟に追加できます。Brazeプラットフォームが送信時に上書きする予約フィールドがいくつかあります。
以下のキーの使用は避けてください。
| 予約フィールド | ||
|---|---|---|
| BCC | dkim-signature | Reply-To |
| CC | From | Subject |
| Content-Transfer-Encoding | MIME-Version | To |
| Content-Type | Received | x-sg-eid |
| DKIM-Signature | received | x-sg-id |
メールエクストラの追加
メールエクストラを使用すると、他のメールサービスプロバイダーに追加データを送信できます。これは高度なユースケースにのみ適用されるため、会社でこの設定が既に行われている場合にのみメールエクストラを使用してください。
メールエクストラを追加するには、送信情報に移動してAdd New Extraを選択します。
追加されたキーと値のペアの合計は1 KBを超えてはなりません。超えた場合、メッセージは中止されます。
メールエクストラの値はCurrentsやSnowflakeには公開されません。追加のメタデータやダイナミックな値をCurrentsやSnowflakeに送信する場合は、代わりにmessage_extrasを使用してください。
ステップ 3.2: メッセージをプレビューしてテストする
メールの作成が完了したら、送信前にテストします。概要画面の下部からプレビューとテストを選択します。
ここでは、顧客の受信トレイでメールがどのように表示されるかをプレビューできます。ユーザーとしてプレビューを選択すると、ランダムなユーザーとしてメールをプレビューしたり、特定のユーザーを選択したり、カスタムユーザーを作成したりできます。これにより、コネクテッドコンテンツやパーソナライゼーションの呼び出しが正しく機能しているかテストできます。
次に、プレビューリンクをコピーを使用して、ランダムなユーザーに対してメールがどのように表示されるかを示す共有可能なプレビューリンクを生成してコピーできます。リンクは7日間有効で、その後再生成が必要です。
デスクトップ、モバイル、プレーンテキストのビューを切り替えて、さまざまなコンテキストでメッセージがどのように表示されるかを確認することもできます。
ダークモードユーザーにメールがどのように見えるか気になりますか？プレビューとテストセクションにあるダークモードプレビュートグルを選択してください（ドラッグ＆ドロップエディターのみ）。HTMLエディターを使用している場合でも、GmailモバイルアプリとダークモードでGmailモバイルのダークモードレンダリングに対応できます。
最終確認の準備ができたら、テスト送信を選択し、自分自身またはテスターグループにテストメッセージを送信して、デバイスやクライアント間でメールが正しく表示されることを確認します。
メールに問題がある場合や変更を加えたい場合は、メールを編集を選択してエディターに戻ります。
プレビューテキストをサポートするメールクライアントは、利用可能なプレビューテキストスペースを埋めるのに十分な文字数を常に取得します。しかし、これによりプレビューテキストが不完全になったり、最適化されていない状態になることがあります。
これを回避するには、目的のプレビューテキストの後に空白を作成して、メールクライアントが他の邪魔なテキストや文字をエンベロープコンテンツに取り込まないようにします。これを行うには、表示したいプレビューテキストの後にゼロ幅非結合子（‌）とノーブレークスペース（ ）のチェーンを追加します。
プリヘッダーセクションのプレビューテキストの末尾に追加すると、HTMLエディター用の以下のコードで目的の空白が追加されます。
1
<div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
ドラッグ＆ドロップエディターの場合は、送信設定セクションのプリヘッダーに<div>フォーマットなしでゼロ幅非結合子（‌）のみを直接追加してください。
ステップ 3.3: メールエラーを確認する
送信前に、エディターが一般的な問題をフラグします。
- 差出人表示名とヘッダーが一緒に設定されていない
- 無効な差出人アドレスまたは返信先アドレス
- 重複するヘッダーキー
- Liquid構文エラー
- 完全な
<!DOCTYPE html>を含むContent Blocks - メール本文が400 KBを超えている
- クリッピングを避けるため、102 KB未満を目指してください。
- 空の本文または件名
- 配信停止リンクがない
- 差出人ドメインが許可リストに登録されていない（送信が大幅にスロットリングされます）
ステップ 4: CampaignまたはCanvasの残りを構築する
次に、Campaignの残りの部分を構築します。Brazeのツールを使用してメールCampaignを構築する方法の詳細については、以下のセクションを参照してください。
配信スケジュールまたはトリガーを選択する
スケジュールされた時間、アクション、またはAPIトリガーに基づいてメールを配信します。詳細については、Campaignのスケジュール設定を参照してください。
APIトリガーCampaignの場合、トリガーアクションがInteract With Campaignに設定されている場合、インタラクションとしてReceiveオプションを選択すると、Brazeが選択したCampaignを送信済みとしてマークした時点で新しいCampaignがトリガーされます。これは、そのメッセージがバウンスしたり配信に失敗した場合でも同様です。
Campaignの期間を設定したり、サイレント時間を指定したり、フリークエンシーキャップルールを設定したりすることもできます。
ターゲットユーザーを選択する
次に、Segmentまたはフィルターを選択してユーザーをターゲットします。Brazeは、メールでリーチ可能なユーザー数を含むSegment人口のライブプレビューを表示します。正確なSegmentメンバーシップは送信直前に計算されます。
メッセージは、ターゲットオーディエンスステップで設定した条件に既に合致しているユーザーにのみ送信される。その後も、スケジュール配信ステップで定義したトリガーを満たす必要がある。オーディエンスを待合室だと思え。次のアクションが起こった時、先に進めるのは既に中にいる者だけだ。
特定のサブスクリプションステータスを持つユーザー（購読中でメールにオプトインしているユーザーなど）にのみCampaignを送信することもできます。
オプションで、Segment内の指定された数のユーザーに配信を制限したり、Campaignの繰り返し時にユーザーが同じメッセージを2回受信できるようにしたりすることもできます。
新しいメールCampaignを作成する場合、コントロールグループはデフォルトで20%に設定されており、Campaignの必要に応じて調整または削除できます。
メールとプッシュのマルチチャネルCampaign
メールとプッシュの両方のチャネルをターゲットとするマルチチャネルCampaignでは、明示的にオプトインしたユーザーのみがメッセージを受信するようにCampaignを制限したい場合があります（購読中または購読解除のユーザーを除外）。たとえば、異なるオプトインステータスを持つ3人のユーザーがいるとします。
- ユーザーAはメールを購読中で、プッシュが有効です。このユーザーはメールを受信しませんが、プッシュを受信します。
- ユーザーBはメールにオプトインしていますが、プッシュは有効ではありません。このユーザーはメールを受信しますが、プッシュは受信しません。
- ユーザーCはメールにオプトインしており、プッシュも有効です。このユーザーはメールとプッシュの両方を受信します。
これを行うには、オーディエンスの概要で、このCampaignを「オプトインしたユーザーのみ」に送信するように選択します。このオプションにより、オプトインしたユーザーのみがメールを受信し、Brazeはデフォルトでプッシュが有効なユーザーにのみプッシュを送信します。
この設定では、ターゲットオーディエンスステップにオーディエンスを単一チャネルに制限するフィルター（たとえば、Foreground Push Enabled = TrueやEmail Subscription = Opted-In）を含めないでください。
コンバージョンイベントを選択する
Brazeでは、Campaignを受信した後にユーザーが特定のアクション（コンバージョンイベント）を実行する頻度を追跡できます。以下のアクションのいずれかをコンバージョンイベントとして指定できます。
- アプリを開く
- 購入する（一般的な購入または特定のアイテム）
- 特定のカスタムイベントを実行する
- メールを開封する
ユーザーが指定されたアクションを実行した場合にBrazeがコンバージョンをカウントする最大30日間の時間枠を設定できます。Brazeは開封とクリックを自動的に追跡しますが、インテリジェントセレクションを使用するために、コンバージョンイベントを開封またはクリックに設定することもできます。
まだ完了していない場合は、Canvasコンポーネントの残りのセクションを完了してください。Canvasの残りの構築方法、多変量テストとインテリジェントセレクションの実装などの詳細については、CanvasドキュメントのCanvasを構築するステップを参照してください。
ステップ 5: 確認してデプロイする
最後のセクションでは、設計したCampaignの概要が表示されます。関連するすべての詳細を確認し、Launch Campaignを選択します。
メールCampaignの結果にアクセスする方法については、メールレポートをご覧ください。