プレビューとテスト

MailInAppは各メールを複数のバージョンで作ります。スタジオでは送信前に、スマートフォンでの表示、誰かが回答した後の表示、特定のメールアプリでの表示を、すべて確認できます。

デスクトップとスマートフォン

キャンバス上のデバイス切り替えで、メールをデスクトップの幅、または375 pxのスマートフォンで表示します。スマートフォンでの設定も適用されます。プレビューでは並べて表示で両方を同時に見られます。送信版の各段階では、スマートフォン表示を実際の375 pxの枠で描画するので、メール自身のスマートフォン用ルールが受信トレイとまったく同じように適用されます。

プレビューの段階

プレビューでは、段階の切り替えで表示内容を選びます。

ライブビュー: 受信者がリンクから開く、ホストされたWeb版。
送信版: 送信されるHTMLを、最新のメールアプリが読むとおりに表示。
Outlook: 送信されるHTMLで、クラシックOutlook専用の分岐を強制したもの。Outlookを持っていなくてもその表示を確認できます。
メールアプリ: 送信されるHTMLを、特定のメールアプリが表示するとおりに表示(下記を参照)。

隣のダークモード切り替えで、選んだ段階やアプリが描画するとおりのダークモード表示になります。

プレビューの状態

インタラクティブなブロックには、キャンバス上にプレビューの状態メニューが表示されます。状態を選ぶと、受信者が操作した後に見える状態でブロックを確認できます。状態は、回答済み(選んだ回答で)、送信済み、予約済み、締め切り、公開済み、当選(選んだ賞品で)、フォームのウィザードのページ、売り切れ、後で見る、終了、開始前です。ブロック上のバッジに、プレビュー中の状態が表示されます。

結果を表示するブロックでは、シミュレーション結果に数値(選択肢ごとの票数、評価と平均、NPS、高評価の数、参加人数)を入力して、その数値での結果バーや結果画像を確認できます。

状態とシミュレーションの数値はプレビュー専用です。メールと一緒に保存されることも、送信されることもありません。

メールアプリごとの表示

メールアプリの段階では、選んだメールアプリでの表示を確認できます。iOSのメール、iCloud Mail、Thunderbird、各Gmailアプリ、Outlook.comと各Outlookアプリ、Yahoo Mailです。これは実際の受信トレイでの計測から作ったシミュレーションで、スクリーンショットではありません。メールの下には、そのアプリで動くブロック、フォールバックを表示するブロック、そのアプリでフォームがどう動くか、ダークモードで何が起きるかが一覧表示されます。アプリごとに、スマートフォンの幅とダークモードの設定があります。

実際のスクリーンショット。 Proプラン以上では、設定 › 連携でMailgun Inspectを接続し、実際のスクリーンショットを撮るを押すと、シミュレーションの隣に実際の受信トレイでのメールが表示されます。スクリーンショットは、Mailgunプランに含まれるプレビューを使います。

各ブロックが動く場所

各インタラクティブブロックでは、インスペクタに対応状況の行が表示され、挿入パネルにも同じ内容がツールチップで表示されます。メール内でブロックが動くアプリ、フォールバックを表示するアプリ、まだ計測していないアプリがわかります。ワンタップのブロック(投票、評価、RSVP、予約)は、各選択肢がWebページで確定するリンクなので、すべてのアプリで動くと表示されます。この行はメールクライアントのサポート状況と同じ計測に基づいています。

フォールバックになるアプリで投票の下に「Webで投票する」と表示するなど、一方のバージョンだけに文を書くには、ブロックの表示する場所の設定を使います。

プリフライトチェック

🔍 プリフライトチェックは、送信前にメールを確認し、結果をタブに分けて表示します。

アクセシビリティ: ライトモードとダークモードでの色のコントラスト、見出しの順序、代替テキスト(リンク付き画像では必須)、「こちらをクリック」のようなリンクテキスト、メールの言語、小さすぎるタップ領域。
リンク: すべてのリンクをその場で確認し、ステータスコードとリダイレクトを表示します。httpsでないリンクと、UTMタグのないトラッキングリンクに印が付きます。
配信性: Gmailの切り詰めサイズ、テキストに対して多すぎる画像、スパムっぽい表現、すべて大文字の表記、短縮URL、リンク先と違うサイト名を示すリンクテキスト。
メールアプリ: 動くフォールバックのないブロック、クラシックOutlookが描画しない角や背景、代替フォントになるWebフォント。
コンテンツ: タイトルのないタブやコードのないクーポンなど、空または未完成のブロック。

多くの問題には修正ボタンがあり、修正を代わりに適用します(代替テキストの追加、十分なコントラストのある色への変更など)。キャンバスの下のGmail の切り詰めメーターには、作業中のメールのサイズが表示されます。Gmailは102 KBを超えるメールを切り詰め、配信停止リンクを含む残りの部分を隠します。

件名、プレヘッダー、テスト送信

スタジオのヘッダーには、メールの件名とプレヘッダー(受信トレイで件名の後に表示されるプレビュー行)があります。送信ページと同じフィールドです。

テスト送信は最大5件のアドレスにメールを送ります。プレビュー対象で受信者の行を選ぶと、マージタグと表示条件がその人向けと同じように解決されます。ギャラリーのテンプレートのページでは、この例を自分に送るでテンプレートを自分のアドレスに送れます。