Resolución de problemas de CSS, JavaScript y HTML personalizados en Klaviyo
Qué aprenderás
Aprende a solucionar problemas del código personalizado al importar una plantilla HTML personalizada o al crear tu propia plantilla con código personalizado.
Solo recomendamos el uso de HTML personalizado a especialistas en marketing con conocimientos técnicos o a cualquiera que tenga acceso a un desarrollador. Aunque nuestro producto sí que es compatible con HTML personalizado, nuestro equipo de asistencia no puede ayudarte a crear tus plantillas personalizadas más allá de ofrecerte la orientación general que se recoge en esta documentación.
Para mantener la seguridad de tus datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.
Elementos HTML y CSS personalizados
Si estás creando una plantilla HTML personalizada, no puedes usar feed de productos en tu email.
Actualmente, no se admiten determinados elementos HTML y CSS que se utilizan para hacer que los email sean interactivos. Por ejemplo, si quieres hacer que tu email sea interactivo en Gmail mediante determinados selectores de atributos CSS, tu plantilla puede activar un error en Klaviyo.
Actualmente, Klaviyo no admite ciertos operadores (como ~) en las plantillas de email. Esto puede limitar en qué medida se puede usar cierto HTML y CSS personalizados. Si tu plantilla contiene HTML o CSS que no es totalmente compatible, no podrás generar una vista previa de tu email y verás un mensaje de error en su lugar.
Problemas comunes de HTML
Si tu email HTML personalizado no se ve bien, aquí tienes algunos lugares habituales donde comprobar si hay problemas.
Comillas simples en la fuente
Siempre que añadas un atributo font-family en CSS, busca comillas simples o comillas innecesarias. Eliminad todas las comillas al añadir la fuente.
El problema | Fija |
font-family:'Helvetica Neue', Helvetica, Arial | font-family: Helvetica Neue, Helvetica, Arial |
Consultas de medios
Si las consultas de medios no están en el formato estándar, no se mostrarán correctamente. Sigue el formato estándar para todas las consultas de medios.
Formato de consulta de medios Standard |
@media only screen and (max-width: 460px) |
Etiquetas center innecesarias
Si tienes varias etiquetas HTML <center> en tu plantilla de email, es posible que no se muestre correctamente en Gmail. Para solucionar este problema, elimina todas las etiquetas <center> innecesarias. Solo se necesita una etiqueta <center> en la parte superior de la plantilla de email, cerca de la etiqueta <body>. Todas las etiquetas <center> adicionales son superfluas.
Klaviyo no admite emails con JavaScript
La mayoría de los clientes de email (Gmail, Hotmail, Yahoo, etc.) consideran que JavaScript en los emails es una amenaza para la seguridad. Esto se debe a que los scripts pueden ocultar contenido malicioso. Como resultado, estos importantes clientes de email bloquean por completo los scripts en los emails. Dada la amenaza de seguridad inherente asociada a JavaScipt en los email y la falta de compatibilidad con esos scripts por parte de la mayoría de los principales clientes de email, cualquier script añadido se eliminará automáticamente.
Klaviyo no es compatible con formularios o vídeos incrustados
Klaviyo no admite formularios, widgets ni vídeos incrustados en las plantillas. Esto se debe a que nuestras pruebas muestran que este tipo de funciones no se renderizan de forma fiable en todos los principales clientes de email. Al igual que los fragmentos de JavaScript, la mayoría de los clientes de email consideran estos elementos una amenaza para la seguridad y los eliminan por completo de los emails.
Si te interesa conocer soluciones alternativas para esto, consulta este artículo sobre cómo añadir un vídeo o un GIF a un email.
Otras etiquetas y atributos no compatibles
Las etiquetas y los atributos HTML que se describen aquí no son una lista exhaustiva de lo que admite Klaviyo. En general, los elementos HTML que los principales proveedores de bandejas de entrada admiten también son compatibles con Klaviyo.
Si tu plantilla tiene HTML no compatible, Klaviyo intentará sustituir los elementos no compatibles por una alternativa compatible (es decir, una etiqueta span). Si no hay una sustitución clara, se eliminará esa parte del HTML. Si parece que algunas partes del HTML desaparecen tras añadirlas, esto significa que probablemente no son compatibles; prueba una etiqueta o un atributo HTML alternativos para lograr un efecto similar.
Recursos adicionales
- Cómo importar una plantilla HTML personalizada
Aprende a importar una plantilla HTML personalizada en Klaviyo.
- Solucionar problemas con los mensajes de error de las plantillas de email
Si encuentras errores o advertencias en una plantilla de email, es posible que tengas que resolverlos antes de enviar tu mensaje. Busca en este recurso el mensaje de error o la advertencia que estás viendo para encontrar consejos para resolver el problema.