このページは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ロジックブロックやContent Blocks内でバランスが取れていない場合、パーサーが基盤となるHTMLを予期しない方法で変更することがあります。これにより、以下のような問題が発生する可能性があります。

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

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

すべてのHTMLタグが、対応するLiquidロジックブロックまたはContent Blocks内で開閉されるようにしてください。これにより、内部パーサーが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!