Fehlerbehebung bei benutzerdefiniertem CSS, JavaScript und HTML in Klaviyo
Übersicht
Erfahre, wie du benutzerdefinierten Code behebst, wenn du eine benutzerdefinierte HTML-Vorlage importierst oder deine eigene Vorlage mit benutzerdefiniertem Code erstellst.
Wir empfehlen die Verwendung von benutzerdefiniertem HTML nur für technisch versierte Marketer*innen oder für alle, die Zugang zu Entwickler*innen haben. Obwohl unser Produkt benutzerdefiniertes HTML unterstützt, kann dir unser Support-Team beim Erstellen deiner benutzerdefinierten Vorlagen nicht über die allgemeinen Hinweise hinaus helfen, die in dieser Dokumentation behandelt werden.
Um die Sicherheit deiner Daten zu gewährleisten, kann das Support-Team von Klaviyo deine HTML-Dateien nicht öffnen.
Benutzerdefinierte HTML- und CSS-Elemente
Wenn du eine benutzerdefinierte HTML-Vorlage erstellst, kannst du keine Produkt-Feeds in deiner E-Mail verwenden.
Bestimmte HTML- und CSS-Elemente, die verwendet werden, um E-Mails interaktiv zu machen, werden derzeit nicht unterstützt. Wenn du beispielsweise versuchst, deine E-Mail in Gmail interaktiv zu machen, indem du bestimmte CSS-Attributselektoren verwendest, kann deine Vorlage in Klaviyo einen Fehler auslösen.
Klaviyo unterstützt derzeit bestimmte Operatoren (wie ~) in E-Mail-Vorlagen nicht. Das kann den Umfang einschränken, in dem bestimmte benutzerdefinierte HTML- und CSS-Elemente verwendet werden können. Wenn deine Vorlage HTML oder CSS enthält, das nicht vollständig unterstützt wird, kannst du keine Vorschau deiner E-Mail generieren und siehst stattdessen eine Fehlermeldung.
Häufige HTML-Probleme
Wenn du feststellst, dass deine benutzerdefinierte HTML-E-Mail nicht korrekt aussieht, findest du hier ein paar häufige Stellen, an denen du nach Problemen suchen kannst.
Einfache Anführungszeichen in der Schriftart
Wenn du in CSS ein Attribut für die Schriftfamilie hinzufügst, achte immer auf einfache Anführungszeichen oder unnötige Anführungszeichen. Entferne alle Anführungszeichen, wenn du deine Schriftart hinzufügst.
Problem | Fix |
font-family:'Helvetica Neue', Helvetica, Arial | font-family:Helvetica Neue, Helvetica, Arial |
Medienabfragen
Wenn Media Queries nicht im Standardformat vorliegen, werden sie nicht richtig gerendert. Befolge das Standardformat für alle Media Queries.
Standard-Medienabfrageformat |
@media only screen and (max-width: 460px) |
Unnötige center-Tags
Wenn du in deiner E-Mail-Vorlage mehrere HTML- <center> -Tag über die gesamte Vorlage hinweg verwendest, wird sie in Gmail möglicherweise nicht korrekt gerendert. Um dieses Problem zu beheben, entferne alle unnötigen <center> -Tags. Es wird nur ein <center> -Tag oben in der E-Mail-Vorlage in der Nähe des <body> -Tags benötigt. Alle zusätzlichen <center> -Tags sind überflüssig.
Klaviyo unterstützt keine JavaScript-E-Mails
Die meisten E-Mail-Clients (Gmail, Hotmail, Yahoo usw.) betrachten JavaScript in E-Mails als Sicherheitsbedrohung. Das liegt daran, dass Skripte schädliche Inhalte verbergen können. Daher blockieren diese wichtigen E-Mail-Clients Skripte in E-Mails vollständig. Angesichts der inhärenten Sicherheitsbedrohung durch JavaScipt in E-Mails und der fehlenden Unterstützung für solche Skripte durch die meisten wichtigen E-Mail-Clients werden alle hinzugefügten Skripte automatisch entfernt.
Klaviyo unterstützt keine eingebetteten Formulare oder Videos
Klaviyo unterstützt keine eingebetteten Formulare, Widgets oder Videos in Vorlagen. Das liegt daran, dass unsere Tests zeigen, dass diese Arten von Funktionen nicht zuverlässig in allen gängigen E-Mail-Clients gerendert werden. Ähnlich wie JavaScript-Snippets betrachten die meisten E-Mail-Clients diese Elemente als Sicherheitsrisiko und entfernen sie vollständig aus E-Mails.
Wenn du dich dafür interessierst, Workarounds dafür zu lernen, sieh dir diesen Artikel zum Hinzufügen eines Videos oder GIF zu einer E-Mail an.
Andere nicht unterstützte Tags und Attribute
Die hier behandelten HTML-Tags und -Attribute sind keine vollständige Liste dessen, was Klaviyo unterstützt. Im Allgemeinen werden HTML-Elemente, die von großen Inbox-Anbietern unterstützt werden, auch von Klaviyo unterstützt.
Wenn deine Vorlage nicht unterstütztes HTML enthält, versucht Klaviyo, die nicht unterstützten Elemente durch eine unterstützte Alternative zu ersetzen (z. B. ein span-Tag). Wenn es keinen eindeutigen Ersatz gibt, wird dieser Teil deines HTML entfernt. Wenn Teile deines HTML nach dem Hinzufügen scheinbar verschwinden, bedeutet das, dass sie wahrscheinlich nicht unterstützt werden; versuche ein alternatives HTML-Tag oder -Attribut, um einen ähnlichen Effekt zu erzielen.
Weitere Ressourcen
- How to import a custom HTML template
Learn how to import a custom HTML template into Klaviyo.
- Troubleshooting email template error messages
If you encounter errors or warnings in an email template, you may need to resolve them before sending your message. Search this resource for the error message or warning you’re encountering to find tips for resolving the issue.