Skip to content

HTMLメールのトラブルシューティング

このページでは、HTMLメールエディターやテスト送信に関するよくある問題を解決します。Inbox Visionや到達性については、Inbox Visionおよびメール設定を参照してください。

まずはここから：症状を確認する

以下の表から該当する症状を見つけて、適切なセクションに移動してください。

症状 参照先
テストメールのHTMLが正しく表示されない テストメールでHTMLが正しくレンダリングされない
Chromeでエディターの動作がおかしい 拡張機能の競合
メールクライアントによって表示が異なる メールのレンダリング
メールにLiquidコードや壊れたリンクが表示される LiquidテンプレートのHTML不均衡
Inbox Visionのプレビューが送信済みメールと一致しない CSSインライン化
テストメールで画像の後に余白や線が表示される 画像下の余白

標準的な調査パス

HTMLメールのレンダリングやエディターの動作が期待どおりでない場合は、このワークフローを使用してください。ステップ1から始めてください。

  1. エディターまたは外部バリデーターでHTMLマークアップを検証します。
  2. テストメールを送信し、どのメールクライアントやブラウザーで問題が発生するかを確認します。
  3. Inbox Visionでプレビューし、クライアント間のレンダリングを比較します。
  4. エディター自体が正常に動作しない場合は、ブラウザー拡張機能の競合を除外します。
  5. 問題が解決しない場合は、Inbox Visionのスクリーンショットと影響を受けたクライアントの情報を添えてサポートチケットを作成してください。

テストメールでHTMLが正しくレンダリングされない

症状

テストメールの表示がエディターでの見た目と一致しません。

まずHTMLの設定を確認し、次に拡張機能の競合、メールのレンダリング、CSSインライン化、画像下の余白を確認してください。

拡張機能の競合

特定のブラウザ拡張機能がメールエディターで問題を引き起こすことがあります。例えば、Google Chromeで使用するGrammarlyがその一例です。これらの拡張機能を使用している場合は、以下のいずれかを行ってください。

  • Grammarlyがブラウザ拡張機能としてインストールされていないブラウザでBrazeメールを編集する
  • Brazeアカウントマネージャーに連絡して、メールエディターをHTMLのみまたはプレーンテキストに切り替えるよう依頼する

プレーンテキストビューではWYSIWYG（見たままが得られる）エディターが削除されるため、このリクエストを行う前に、すべてのチームメンバーがHTMLに慣れていることを確認してください。

メールのレンダリング

メールはブラウザやメールクライアントによってレンダリングが異なるため、問題が発生しているブラウザやメールクライアントを記録しておいてください。

  • Inbox Visionを使用してメールをプレビューし、さまざまなブラウザやメールクライアントでメールがどのように表示されるかを確認してください。
  • 問題を引き起こしているブラウザやメールクライアントを特定したら、開発者チームにHTMLを修正し、それらのブラウザやメールクライアントに対応するための編集が必要であることを伝えてください。

LiquidテンプレートでのHTMLの不均衡

症状

一部のユーザーが、Liquidコードがメッセージ内に表示されたり、リンクが壊れたり、間隔が正しくなかったりする、変更されたバージョンのメールを受信します。

Brazeは送信前にメールを準備するために内部HTMLパーサーを使用しています。このパーサーは、プリヘッダーの生成、トラッキングピクセルの配置、リンクテンプレート、リンクエイリアスなどの機能をサポートしています。HTMLタグが対応するLiquidロジックブロックやContent Blocks内でバランスが取れていない場合、パーサーが基盤となるHTMLを予期しない方法で変更することがあります。これにより、以下のような問題が発生する可能性があります。

  • 一部のメールクライアントでLiquidレンダリングによる改行が表示される
  • メール本文に追加された<p>タグによる不自然な間隔
  • <head>タグのコンテンツがプリヘッダーに移動する
  • モバイルオペレーティングシステム間でのレンダリングの不一致
  • AMPメール本文からAMP固有のコードが削除され、バリデーションエラーが発生する
  • 多数の異なるクエリパラメーターやメディアクエリが使用されている場合にリンクが壊れる

Liquidブロック内でHTMLのバランスを取る

すべてのHTMLタグが、対応するLiquidロジックブロックまたはContent Blocks内で開閉されるようにしてください。これにより、内部パーサーがHTMLを無効と解釈して変更することを防ぎます。

不均衡な例

1

<img src={% if ${language} == 'en' %}"https://example.com/images/banner-en.png" style="width: 100%"{% elsif ${language} == 'de' %}"https://example.com/images/banner-de.png"{% else %}"https://example.com/images/banner-default.png" {% endif %} />

この例では、開始の<imgタグがLiquidブロックの外側で始まり、タグの属性のさまざまな部分がLiquid条件文に分割されています。この構造はパーサーを混乱させ、タグの開始位置と終了位置を判断できなくなります。

バランスの取れた例

1
2
3
4
5
6
7

{% if ${language} == 'en' %}
  <img src="https://example.com/images/banner-en.png" style="width: 100%;" />
{% elsif ${language} == 'de' %}
  <img src="https://example.com/images/banner-de.png" style="width: 100%;" />
{% else %}
  <img src="https://example.com/images/banner-default.png" style="width: 100%;" />
{% endif %}

バランスの取れたバージョンでは、各Liquidブランチに完全で自己完結した<img>タグが含まれています。このアプローチにより、パーサーが各ブランチを正しく処理できます。

その他の修正方法

メディアクエリや多数のクエリパラメーターでレンダリングの問題が発生している場合は、メール設定でCSSインライン化をオフにしてみてください。これにより、HTMLパーサーと複雑なCSSルール間の競合を解決できる場合があります。

CSSインライン化

Inbox Visionのプレビューが、Brazeで送信されたものと一致しない場合があります。これは、Brazeと他のツールで実行されるCSSインライン化の違いが原因である可能性があります。これが原因と思われる場合は、CSSインライン化をオフにしてください。

画像下の余白

症状

テストメールで画像の後に余白や線が表示されます。

テストメールで画像の下に余白や線が表示される場合、これは通常、メールクライアントがインラインレベル要素をレンダリングする方法が原因です。画像はデフォルトでインラインレベルであり、ベースラインに揃えられます。これにより、ブラウザがディセンダー（「g」や「y」のようにベースラインより下に伸びる文字の部分）に対応できるようになりますが、余白として表示される小さな隙間が生じます。

これを修正するには、画像のCSSにdisplay: block;を追加します。

1
2
3
4
5

<style>
  img {
    display: block;
  }
</style>

または、特定の画像にスタイルを直接適用することもできます。

1

<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />
New Stuff!