Problemen oplossen met aangepaste CSS, JavaScript en HTML in Klaviyo
Wat je leert
Leer hoe je problemen met aangepaste code oplost bij het importeren van een aangepaste HTML template of bij het bouwen van je eigen aangepaste code template.
We raden het gebruik van aangepaste HTML alleen aan voor technisch onderlegde marketeers, of voor iedereen die toegang heeft tot een ontwikkelaar. Hoewel ons product support aangepaste HTML bevat, kan ons supportteam je niet helpen bij het maken van je eigen sjabloon, afgezien van de algemene richtlijnen in deze documentatie.
Om de veiligheid van je gegevens te waarborgen, kan Klaviyo's supportteam je HTML-bestanden niet openen.
Aangepast HTML- en CSS-element
Bepaalde HTML- en CSS-elementen die worden gebruikt om e-mail interactief te maken, worden momenteel niet ondersteund. Als je bijvoorbeeld je e-mail interactief wilt maken in Gmail door bepaalde CSS attribuut selectors te gebruiken, kan je template een fout veroorzaken in Klaviyo.
Klaviyo doet momenteel niet support bepaalde operatoren (zoals ~) in e-mailtemplate. Dit kan de mate waarin bepaalde aangepaste HTML en CSS kunnen worden gebruikt beperken. Als je template HTML of CSS bevat die niet volledig wordt ondersteund, kun je geen voorbeeld van je e-mail genereren en krijg je een foutmelding te zien.
Veelvoorkomende HTML-problemen
Als je merkt dat je aangepaste HTML-e-mail er niet goed uitziet, zijn hier een paar veelvoorkomende plekken om te controleren op problemen.
Enkele aanhalingstekens in lettertypeEnkele aanhalingstekens in lettertype
Waar je ook een font-family attribuut toevoegt in CSS, zoek naar enkele aanhalingstekens of onnodige aanhalingstekens. Verwijder alle aanhalingstekens wanneer je je lettertype toevoegt.
| Probleem | Vast |
| lettertype:'Helvetica Neue', Helvetica, Arial | lettertype:Helvetica Neue, Helvetica, Arial |
mediaverzoeken
Als media queries niet het standaard formaat hebben, worden ze niet goed weergegeven. Volg het standaardformaat voor alle media queries.
| Standard media queryformaat |
| @media only screen en (max-width: 460px) |
Onnodige middelste tag
Als je meerdere HTML <center> tags in je e-mailtemplate hebt staan, wordt deze mogelijk niet goed weergegeven in Gmail. Om dit probleem op te lossen, verwijder je alle onnodige <center> tag. Er is maar één <center> tag nodig bovenaan de e-mailtemplate bij de <body> tag. Alle extra <center> tag zijn overbodig.
Klaviyo geen support JavaScript e-mail
De meeste e-mailclients (Gmail, Hotmail, Yahoo, etc.) zien JavaScript in e-mail als een veiligheidsrisico. Dit komt omdat scripts kwaadaardige inhoud kunnen verbergen. Als gevolg daarvan blokeren deze grote e-mailclients scripts in e-mail volledig. Gezien het inherente veiligheidsrisico van JavaScipt in e-mail en het gebrek aan support voor zulke scripts door de meeste grote e-mailclients, worden toegevoegde scripts automatisch verwijderd.
Klaviyo geen support ingesloten formulieren of video'sKlaviyo geen support ingesloten formulieren of video's
Klaviyo geen support ingesloten formulieren, widgets of video's in sjablonen. Dit komt omdat uit onze tests blijkt dat dit soort functies niet betrouwbaar worden weergegeven in alle grote e-mailclients. Net als JavaScript snippets zien de meeste e-mail clients deze elementen als een bedreiging voor de veiligheid en strippen ze helemaal uit e-mail.
Als je geïnteresseerd bent in workarounds hiervoor, afrekenen dit artikel over het toevoegen van een video of GIF aan een e-mail.
Andere niet-ondersteunde tags en attributenAndere niet-ondersteunde tags en attributen
De HTML-tags en -attributen die hier worden besproken, zijn geen volledige lijst van wat Klaviyo ondersteunt. In het algemeen worden HTML-elementen die door grote inbox-aanbieders worden ondersteund, ook ondersteund door Klaviyo.
Als je template niet-ondersteunde HTML heeft, zal Klaviyo proberen het niet-ondersteunde element te vervangen door een ondersteund alternatief (bijvoorbeeld een span tag). Als er geen duidelijke vervanging is, wordt dat deel van je HTML verwijderd. Als delen van je HTML lijken te verdwijnen nadat je ze hebt toegevoegd, betekent dit dat ze waarschijnlijk niet worden ondersteund; probeer een alternatieve HTML-tag of -attribuut om een vergelijkbaar effect te bereiken.
Extra hulpbronnen