Résoudre les problèmes liés au CSS, au JavaScript et au HTML personnalisés dans Klaviyo
Objectif de cet article
Découvrez comment dépanner du code personnalisé lors de l’importation d’un modèle HTML personnalisé ou de la création de votre propre modèle codé sur mesure.
Nous recommandons d’utiliser du HTML personnalisé uniquement aux spécialistes du marketing qui disposent de solides compétences techniques, ou à toute personne ayant accès à un développeur. Bien que notre produit prenne en charge le HTML personnalisé, notre équipe d’assistance ne peut pas vous aider à créer vos modèles personnalisés au-delà des conseils généraux présentés dans cette documentation.
Pour assurer la sécurité de vos données, l’équipe d’assistance de Klaviyo n’est pas en mesure d’ouvrir vos fichiers HTML.
Éléments HTML et CSS personnalisés
Si vous créez un modèle HTML personnalisé, vous ne pouvez pas utiliser de flux de produits dans votre e-mail.
Certains éléments HTML et CSS utilisés pour rendre les e-mails interactifs ne sont pas pris en charge actuellement. Par exemple, si vous cherchez à rendre votre courriel interactif dans Gmail en utilisant certains sélecteurs d'attributs CSS, votre modèle peut déclencher une erreur dans Klaviyo.
Actuellement, Klaviyo ne prend pas en charge certains opérateurs (comme ~) dans les modèles d’e-mail. Cela peut limiter la mesure dans laquelle certains éléments HTML et CSS personnalisés peuvent être utilisés. Si votre modèle contient du HTML ou du CSS qui n’est pas entièrement pris en charge, vous ne pourrez pas générer un aperçu de votre e-mail et vous verrez un message d’erreur à la place.
Problèmes HTML courants
Si vous constatez que votre e-mail HTML personnalisé ne s’affiche pas correctement, voici quelques points courants à vérifier pour détecter des problèmes.
Guillemets simples dans la police
Chaque fois que vous ajoutez un attribut font-family en CSS, recherchez les apostrophes ou les guillemets inutiles. Supprimez toutes les guillemets lorsque vous ajoutez votre police.
Le défi | Fixe |
font-family:'Helvetica Neue', Helvetica, Arial | font-family:Helvetica Neue, Helvetica, Arial |
Requêtes de média
Si les media queries ne sont pas au format standard, elles ne s’afficheront pas correctement. Suivez le format standard pour toutes les requêtes media.
Format Standard de requête média |
@media only screen and (max-width: 460px) |
Tags center inutiles
Si vous avez plusieurs balises HTML <center> dans votre modèle d’e-mail, il est possible qu’il ne s’affiche pas correctement dans Gmail. Pour corriger ce problème, supprimez toutes les balises <center> inutiles. Un seul <center> tag est nécessaire en haut du modèle d’e-mail, près de la tag <body>. Toutes les <center> tags supplémentaires sont superflues.
Klaviyo ne prend pas en charge les e-mails JavaScript
La plupart des clients de messagerie (Gmail, Hotmail, Yahoo, etc.) considèrent que la présence de JavaScript dans les e-mails constitue une menace pour la sécurité. En effet, les scripts peuvent cacher des contenus malveillants. En conséquence, ces principaux clients de messagerie bloquent totalement les scripts dans les e-mails. Compte tenu de la menace de sécurité inhérente à l’utilisation de JavaScipt dans les e-mails et de l’absence de prise en charge de ces scripts par la plupart des principaux clients de messagerie, tout script ajouté sera automatiquement supprimé.
Klaviyo ne prend pas en charge les formulaires ou les vidéos intégrés
Klaviyo ne prend pas en charge les formulaires intégrés, les widgets ou les vidéos dans les modèles. En effet, nos tests montrent que ces types de fonctionnalités ne s’affichent pas de manière fiable dans tous les principaux clients de messagerie. Comme pour les extraits JavaScript, la plupart des clients de messagerie considèrent ces éléments comme une menace pour la sécurité et les suppriment complètement des e-mails.
Si vous souhaitez découvrir des solutions de contournement pour cela, consultez cet article sur l’ajout d’une vidéo ou d’un GIF à un e-mail.
Autres tags et attributs non pris en charge
Les tags HTML et les attributs abordés ici ne constituent pas une liste exhaustive de ce que Klaviyo prend en charge. En général, les éléments HTML qui sont pris en charge par les principaux fournisseurs de boîtes de réception sont également pris en charge par Klaviyo.
Si votre modèle contient du HTML non pris en charge, Klaviyo tentera de remplacer les éléments non pris en charge par une alternative prise en charge (par exemple, un tag span). S’il n’existe pas de remplacement clair, cette partie de votre HTML sera supprimée. Si certaines parties de votre HTML semblent disparaître après les avoir ajoutées, cela signifie qu’elles ne sont probablement pas prises en charge ; essayez une autre balise ou un autre attribut HTML pour obtenir un effet similaire.