Solución de problemas de CSS, JavaScript y HTML personalizados en Klaviyo

read
Last updated at:

Objetivos del artículo

Aprende a solucionar problemas de código personalizado al importar una plantilla HTML personalizada o al crear tu propia plantilla con código personalizado.

Solo recomendamos usar HTML personalizado a especialistas en marketing con conocimientos técnicos o a quienes tengan acceso a un desarrollador. Aunque nuestro producto sí es compatible con HTML personalizado, nuestro equipo de soporte no puede ayudarte a crear tus plantillas personalizadas más allá de ofrecer la orientación general incluida en esta documentación.

A fin de mantener la seguridad de los datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.

Elementos de HTML y CSS personalizados

Si estás creando una plantilla HTML personalizada, no puedes usar fuente de productos dentro del correo electrónico.

Actualmente, no se admiten ciertos elementos de HTML y CSS que se usan para hacer que los correos electrónicos sean interactivos. Por ejemplo, si buscas hacer que tu correo electrónico sea interactivo en Gmail mediante ciertos selectores de atributos de CSS, la plantilla puede activar un error en Klaviyo.

Actualmente, Klaviyo no admite ciertos operadores (como ~) en las plantillas de correo electrónico. Esto puede limitar el grado en el que se pueden usar ciertos elementos de HTML y CSS personalizados. Si la plantilla contiene HTML o CSS que no es totalmente compatible, no podrás generar una vista previa del correo electrónico y, en su lugar, verás un mensaje de error.

Problemas comunes de HTML

Si ves que tu correo electrónico HTML personalizado no se ve bien, aquí tienes algunos lugares comunes donde revisar para detectar problemas.

Comillas simples en la fuente

Donde sea que agregues un atributo font-family en CSS, busca comillas simples o comillas innecesarias. Elimina todas las comillas al agregar la fuente.

Problema Fijo
font-family:'Helvetica Neue', Helvetica, Arial font-family:Helvetica Neue, Helvetica, Arial

Consultas de medios

Si las media queries no están en el formato estándar, no se mostrarán correctamente. Sigue el formato estándar para todas las media queries.

Formato Standard de media query
@media only screen and (max-width: 460px)

Etiquetas center innecesarias

Si tienes varias etiquetas HTML <center> en toda la plantilla de correo electrónico, 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 correo electrónico, cerca de la etiqueta <body>. Todas las etiquetas <center> adicionales son superfluas.

Klaviyo no admite correos electrónicos con JavaScript

La mayoría de los clientes de correo (Gmail, Hotmail, Yahoo, etc.) ven JavaScript en los correos como una amenaza de seguridad. Esto se debe a que los scripts pueden ocultar contenido malicioso. Como resultado, estos principales clientes de correo bloquean por completo los scripts en los correos. Dada la amenaza de seguridad inherente asociada con JavaScipt en los correos y la falta de compatibilidad con este tipo de scripts por parte de la mayoría de los principales clientes de correo, cualquier script agregado se eliminará automáticamente.

Klaviyo no admite formularios ni videos incrustados

Klaviyo no admite formularios incrustados, widgets ni videos en las plantillas. Esto se debe a que nuestras pruebas muestran que este tipo de funciones no se representan de forma confiable en todos los principales clientes de correo electrónico. Al igual que los fragmentos de JavaScript, la mayoría de los clientes de correo electrónico consideran estos elementos como una amenaza de seguridad y los eliminan por completo de los correos electrónicos.

Si te interesa conocer soluciones alternativas para esto, consulta este artículo sobre cómo agregar un video o un GIF a un correo electrónico.

Otras etiquetas y atributos no admitidos

Las etiquetas y atributos de HTML que se mencionan aquí no son una lista exhaustiva de lo que admite Klaviyo. En general, los elementos de HTML que son compatibles con los principales proveedores de bandejas de entrada también son compatibles con Klaviyo.

Si la plantilla tiene HTML no compatible, Klaviyo intentará reemplazar los elementos no compatibles con una alternativa compatible (es decir, una etiqueta span). Si no hay un reemplazo claro, esa parte del HTML se eliminará. Si algunas partes del HTML parecen desaparecer después de agregarlas, significa que probablemente no son compatibles; prueba una etiqueta o un atributo HTML alternativos para lograr un efecto similar.

x
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 39 de 134