Diese Seite wurde automatisch übersetzt und kann Ungenauigkeiten enthalten. Um einen Übersetzungsfehler zu melden, nutzen Sie das Feedback unten im Inhaltsverzeichnis rechts auf der Seite.

Fehlerbehebung für HTML-E-Mails

Verwenden Sie diese Seite, um häufige Probleme mit dem HTML-E-Mail-Editor und dem Testversand zu beheben. Informationen zu Inbox Vision und Zustellbarkeit finden Sie unter Inbox Vision und E-Mail-Einrichtung.

Hier starten: Symptom zuordnen

Ordnen Sie Ihr Symptom in der folgenden Tabelle zu, um zum entsprechenden Abschnitt zu navigieren.

Symptom	Gehe zu
Test-E-Mail-HTML sieht falsch aus	HTML wird in Test-E-Mails nicht korrekt dargestellt
Editor verhält sich in Chrome ungewöhnlich	Erweiterungskonflikte
E-Mail sieht in verschiedenen Clients unterschiedlich aus	E-Mail-Rendering
E-Mail zeigt Liquid-Code oder fehlerhafte Links an	Unausgeglichenes HTML in Liquid-Templates
Inbox-Vision-Vorschau stimmt nicht mit gesendeter E-Mail überein	CSS-Inlining
Leerraum oder Linien nach Bildern in Test-E-Mails	Leerraum unter Bildern

Standardmäßiger Untersuchungspfad

Verwenden Sie diesen Workflow, wenn das Rendering von HTML-E-Mails oder das Verhalten des Editors nicht Ihren Erwartungen entspricht. Beginnen Sie bei Schritt 1.

Validieren Sie Ihr HTML-Markup im Editor oder einem externen Validator.
Senden Sie eine Test-E-Mail und notieren Sie, welche E-Mail-Clients oder Browser das Problem anzeigen.
Verwenden Sie die Vorschau mit Inbox Vision, um das Rendering über verschiedene Clients hinweg zu vergleichen.
Schließen Sie Konflikte mit Browsererweiterungen aus, wenn sich der Editor selbst fehlerhaft verhält.
Wenn das Problem weiterhin besteht, eröffnen Sie ein Support-Ticket mit Screenshots aus Inbox Vision und den betroffenen Clients.

HTML wird in Test-E-Mails nicht korrekt dargestellt

Symptom

Eine Test-E-Mail entspricht nicht dem, was Sie im Editor erwarten.

Überprüfen Sie zunächst Ihr HTML-Setup und sehen Sie sich dann Erweiterungskonflikte, E-Mail-Rendering, CSS-Inlining und Weißer Raum unter Bildern an.

Erweiterungskonflikte

Bestimmte Browser-Erweiterungen können Probleme mit dem E-Mail-Editor verursachen. Ein Beispiel ist Grammarly in Verbindung mit Google Chrome. Wenn Sie eine dieser Erweiterungen verwenden, sollten Sie entweder:

Braze-E-Mails in einem Browser bearbeiten, in dem Grammarly nicht als Browser-Erweiterung installiert ist
Ihren Braze Account Manager kontaktieren und darum bitten, Ihre E-Mail-Editoren auf reines HTML oder Nur-Text umzustellen.

Die Nur-Text-Ansicht entfernt Ihren WYSIWYG-Editor (What You See Is What You Get), daher sollten Sie zunächst sicherstellen, dass alle Teammitglieder mit HTML vertraut sind, bevor Sie diese Änderung anfordern.

E-Mail-Rendering

E-Mails werden je nach Browser und E-Mail-Client unterschiedlich dargestellt. Notieren Sie sich daher, bei welchen Browsern und E-Mail-Clients Probleme auftreten.

Nutzen Sie die Vorschau Ihrer E-Mails mit Inbox Vision, um zu sehen, wie Ihre E-Mails in verschiedenen Browsern und E-Mail-Clients aussehen.
Nachdem Sie festgestellt haben, welche Browser oder E-Mail-Clients Probleme verursachen, informieren Sie Ihr Entwickler:innen-Team, damit es das HTML anpassen und Änderungen für diese Browser oder E-Mail-Clients vornehmen kann.
Wenn das Problem speziell damit zusammenhängt, wie Alternativtext angezeigt wird, beachten Sie, dass dieses Verhalten vom E-Mail-Client der Empfänger:innen gesteuert wird, nicht von Braze.

Unausgeglichenes HTML in Liquid-Templates

Symptom

Einige Nutzer:innen erhalten eine veränderte Version der E-Mail, in der Liquid-Code in der Nachricht angezeigt wird, Links fehlerhaft sind oder Abstände falsch aussehen.

Braze verwendet einen internen HTML-Parser, um E-Mails vor dem Versand aufzubereiten. Dieser Parser unterstützt Features wie Preheader-Generierung, Tracking-Pixel-Platzierung, Link-Templating und Link Aliasing. Wenn HTML-Tags innerhalb der zugehörigen Liquid-Logikblöcke oder Content Blocks nicht ausgeglichen sind, kann der Parser das zugrunde liegende HTML auf unerwartete Weise verändern. Dies kann zu folgenden Problemen führen:

Zeilenumbrüche aus dem Liquid-Rendering in einigen E-Mail-Clients
Ungewöhnliche Abstände durch <p>-Tags, die dem E-Mail-Body hinzugefügt werden
Inhalte des <head>-Tags werden in den Preheader verschoben
Inkonsistentes Rendering auf verschiedenen mobilen Betriebssystemen
AMP-spezifischer Code wird aus AMP-E-Mail-Bodys entfernt, was zu Validierungsfehlern führt
Fehlerhafte Links bei Verwendung vieler verschiedener Query-Parameter oder Media Queries

HTML innerhalb von Liquid-Blöcken ausgleichen

Stellen Sie sicher, dass alle HTML-Tags innerhalb des zugehörigen Liquid-Logikblocks oder Content-Blocks geöffnet und geschlossen werden. Dies verhindert, dass der interne Parser das HTML als ungültig interpretiert und es verändert.

Unausgeglichenes Beispiel

<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 %} />

In diesem Beispiel beginnt das öffnende <img-Tag außerhalb eines Liquid-Blocks, und verschiedene Teile der Tag-Attribute sind über Liquid-Bedingungsanweisungen verteilt. Diese Struktur verwirrt den Parser, der nicht bestimmen kann, wo das Tag beginnt oder endet.

Ausgeglichenes Beispiel

{% 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 %}

In der ausgeglichenen Version enthält jeder Liquid-Zweig ein vollständiges, eigenständiges <img>-Tag. Dieser Ansatz stellt sicher, dass der Parser jeden Zweig korrekt verarbeitet.

Zusätzliche Korrekturen

Wenn bei Ihnen Rendering-Probleme mit Media Queries oder vielen Query-Parametern auftreten, versuchen Sie, das CSS-Inlining in Ihren E-Mail-Einstellungen zu deaktivieren. Dies kann Konflikte zwischen dem HTML-Parser und komplexen CSS-Regeln beheben.

CSS-Inlining

Es kann vorkommen, dass die Vorschauen in Inbox Vision nicht mit dem übereinstimmen, was mit Braze versendet wird. Dies kann durch Unterschiede beim CSS-Inlining verursacht werden, das von Braze und anderen Tools durchgeführt wird. Wenn Sie vermuten, dass dies der Fall ist, deaktivieren Sie das CSS-Inlining.

Weißer Raum unter Bildern

Symptom

Weißer Raum oder Linien erscheinen nach Bildern in Test-E-Mails.

Wenn Sie in Ihren Test-E-Mails weißen Raum oder Linien nach Bildern bemerken, liegt dies in der Regel daran, wie E-Mail-Clients Inline-Elemente rendern. Bilder sind standardmäßig Inline-Elemente und werden an der Grundlinie ausgerichtet, sodass Browser Unterlängen berücksichtigen können (der Teil von Buchstaben wie „g“ oder „y“, der unter die Grundlinie reicht). Dadurch entsteht ein kleiner Abstand, der als weißer Raum erscheint.

Um dies zu beheben, fügen Sie display: block; zu Ihrem Bild-CSS hinzu:

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

Alternativ können Sie den Stil direkt auf bestimmte Bilder anwenden:

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

New Stuff!