このページはAIにより自動翻訳されており、不正確な内容が含まれている可能性があります。翻訳の誤りを報告するには、ページ右側の目次の下にあるフィードバックをご利用ください。

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

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

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

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

症状	参照先
テストメールのHTMLが正しく表示されない	テストメールでHTMLが正しくレンダリングされない
Chromeでエディターの動作がおかしい	拡張機能の競合
メールクライアントによってメールの表示が異なる	メールのレンダリング
メールにLiquidコードや壊れたリンクが表示される	LiquidテンプレートのHTMLタグの不整合
Inbox Visionのプレビューが送信されたメールと一致しない	CSSのインライン化
テストメールで画像の後に余白や線が表示される	画像の下の余白
クリック分析にクエリパラメーターが含まれない	リンククリック分析の制限
上付き文字によって行間が不均一になる	上付き文字の行の高さの問題

標準的な調査パス

HTMLメールのレンダリングやエディターの動作が想定と異なる場合は、このワークフローを使用してください。ステップ1から始めます。

エディターまたは外部のバリデーターでHTMLマークアップを検証します。
テストメールを送信し、問題が発生しているメールクライアントまたはブラウザーを記録します。
Inbox Visionでプレビューし、クライアント間のレンダリングを比較します。
エディター自体が正しく動作しない場合は、ブラウザー拡張機能の競合の可能性を排除します。
それでも問題が解決しない場合は、Inbox Visionと影響を受けるクライアントのスクリーンショットを添えてサポートチケットを提出してください。

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

症状

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

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

拡張機能の競合

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

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

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

メールのレンダリング

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

Inbox Visionを使用してメールをプレビューし、さまざまなブラウザーやメールクライアントでメールがどのように表示されるかを確認します。
問題を引き起こしているブラウザーやメールクライアントを特定したら、それらのブラウザーやメールクライアントに対応するためにHTMLを修正・編集する必要があることを開発者チームに伝えます。
問題が代替テキストの表示方法に関するものである場合、この動作はBrazeではなく受信者のメールクライアントによって制御されることに留意してください。

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

症状

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

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

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

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

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

不均衡な例

<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の条件文に分割されています。この構造はパーサーを混乱させ、タグの開始位置と終了位置を判断できなくなります。

バランスの取れた例

{% 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;を追加します。

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

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

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

リンククリック分析の制限事項

症状

一意のクエリパラメーターが多数含まれるメールのクリック分析が、期待どおりの結果と一致しません。最初の100個の一意のリンクを超えると、パラメーターが除去されたURLに対して集計されたクリック数が表示されることがあります。

リンククリックトラッキングの仕組み

Brazeは、パラメーター付きURL（クエリパラメーターあり）とパラメーターが除去されたベースURLの両方でクリックをトラッキングします。メールキャンペーンまたはキャンバスでクリックされた最初の100個の一意のパラメーター付きリンクについて、Brazeは以下の両方のデータを収集してレポートします。

完全なパラメーター付きURL（例：https://example.com?user_id=12345）
パラメーターが除去されたベースURL（例：https://example.com）

最初の100個の一意のパラメーター付きリンクがクリックされた後、Brazeはパラメーターが除去されたベースURLのクリック数のみを増加させます。これは以下を意味します。

クリック分析は、個々のクエリパラメーターの組み合わせではなく、ベースドメインとパスで集計されます
リンクパスに基づいて有意義なエンゲージメントをトラッキングすることは引き続き可能です
個々のユーザーレベルのクリックトラッキングは引き続き正常に機能します

この動作により、全体的なリンクエンゲージメントパターンをキャプチャしながら、数千の一意のクエリパラメーターの組み合わせによって分析が肥大化するのを防ぎます。

キャンペーンへの影響

外部プラットフォームでユーザー固有の行動をトラッキングするために一意のクエリパラメーターに依存している場合（例：https://example.com?user_id=USER_ID）、Brazeのクリック分析ではクリックされた最初の100個の一意のリンクについてのみそれらのパラメーターが保持されることに注意してください。そのしきい値を超えた後もクリックは分析に記録されますが、パラメーターが除去されたURLに帰属されます。

ユーザーレベルのクリックデータは、クリックされた一意のパラメーター付きリンクの数に関係なく、Currentsまたはメッセージアクティビティログを通じて引き続き利用可能です。

上付き文字の行の高さの問題

症状

上付き文字を含むテキストで、行間が意図したよりも近くなったり離れたりして、一貫性のない行間隔で表示されます。これはメールクライアント全般で見られる一般的なレンダリングの問題であり、Braze固有のものではありません。

メールで上付き文字を使用すると、メールクライアントごとに上付き文字テキストの処理方法が異なるため、予期しない行の高さの動作が発生する可能性があります。

解決方法

HTMLエディターを使用して、上付き文字と周囲の要素のスタイルを制御します。

行の高さを明示的に定義するには、インラインCSSを追加してテキストのline-heightを設定します。

<p style="line-height: 1.5;">Example text with superscript<sup style="line-height: inherit;">1</sup></p>

垂直方向の配置を調整するには、vertical-alignプロパティを使用して、行の高さを乱さずに上付き文字を配置します。

<sup style="vertical-align: top; font-size: smaller;">1</sup>

上付き文字が引き続き問題を引き起こす場合は、より細かい制御のために<sup>の代わりに<span>を使用します。

<span style="font-size: smaller; vertical-align: top;">1</span>

New Stuff!