Problemen oplossen met aangepaste CSS, JavaScript en HTML in Klaviyo
Wat je leert
Lees hoe je problemen met aangepaste code oplost bij het importeren van een aangepaste HTML-template of het bouwen van je eigen aangepaste template met code.
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 aangepaste HTML ondersteunt, kan ons supportteam je niet helpen met het opbouwen van je aangepaste templates, behalve door de algemene richtlijnen te geven die in deze documentatie worden behandeld.
Om de veiligheid van je gegevens te waarborgen, kan het supportteam van Klaviyo je HTML-bestanden niet openen.
Aangepaste HTML- en CSS-elementen
Als je een aangepaste HTML-template maakt, kun je geen productfeed gebruiken in je e-mail.
Bepaalde HTML- en CSS-elementen die worden gebruikt om e-mails interactief te maken, worden momenteel niet ondersteund. Als je je e-mail bijvoorbeeld interactief wilt maken in Gmail door bepaalde CSS-attribuutselectors te gebruiken, kan je template een foutmelding veroorzaken in Klaviyo.
Klaviyo ondersteunt momenteel bepaalde operators (zoals ~) niet in e-mailtemplates. Dit kan beperken in hoeverre bepaalde aangepaste HTML en CSS kunnen worden gebruikt. Als je template HTML of CSS bevat die niet volledig wordt ondersteund, kun je geen voorbeeld van je e-mail genereren en zie je in plaats daarvan een foutmelding.
Veelvoorkomende HTML-problemen
Als je merkt dat je aangepaste HTML-e-mail er niet goed uitziet, zijn dit een paar veelvoorkomende plekken om te controleren op problemen.
Enkele aanhalingstekens in lettertype
Controleer waar je in CSS een font-family-attribuut toevoegt of er enkele aanhalingstekens of onnodige aanhalingstekens staan. Verwijder alle aanhalingstekens wanneer je je lettertype toevoegt.
Probleem | Vast |
font-family:'Helvetica Neue', Helvetica, Arial | font-family:Helvetica Neue, Helvetica, Arial |
Mediaqueries
Als media queries niet de standaardindeling hebben, worden ze niet goed weergegeven. Volg de standaardindeling voor alle media queries.
Standard media query-indeling |
@media only screen and (max-width: 460px) |
Onnodige center-tag
Als je meerdere HTML <center> -tag hebt in je e-mailtemplate, 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, vlak bij de <body> -tag. Alle extra <center> -tag zijn overbodig.
Klaviyo ondersteunt geen JavaScript-e-mails
De meeste e-mailclients (Gmail, Hotmail, Yahoo, enz.) zien JavaScript in e-mails als een beveiligingsrisico. Dit komt doordat scripts schadelijke content kunnen verbergen. Daardoor blokkeren deze grote e-mailclients scripts in e-mails volledig. Gezien de inherente beveiligingsdreiging die JavaScipt in e-mails met zich meebrengt en het gebrek aan ondersteuning voor dit soort scripts door de meeste grote e-mailclients, worden eventuele toegevoegde scripts automatisch verwijderd.
Klaviyo ondersteunt geen ingesloten formulieren of video's
Klaviyo biedt geen ondersteuning voor ingesloten formulieren, widgets of video's in templates. Dit komt doordat onze tests laten zien dat dit soort functies niet betrouwbaar worden weergegeven in alle belangrijke e-mailclients. Net als JavaScript-snippets zien de meeste e-mailclients deze elementen als een beveiligingsrisico en verwijderen ze ze volledig uit e-mails.
Als je meer wilt weten over tijdelijke oplossingen hiervoor, bekijk dan dit artikel over het toevoegen van een video of GIF aan een e-mail.
Andere niet-ondersteunde tags en kenmerken
De HTML-tags en -attributen die hier worden behandeld, vormen geen uitputtende lijst van wat Klaviyo ondersteunt. Over het algemeen worden HTML-elementen die door ondersteund worden door grote inboxproviders ook ondersteund door Klaviyo.
Als je template niet-ondersteunde HTML heeft, probeert Klaviyo de niet-ondersteunde elementen te vervangen door een ondersteund alternatief (bijv. 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.