Respetar las reglas de HTML
Para garantizar el correcto funcionamiento de su archivo HTML, existen algunas reglas y buenas prácticas que deben observarse.
Editor Actito
El editor Actito HTML aplica estrictamente algunas buenas prácticas.
Por lo tanto, no será posible importar un archivo HTML o codificarlo directamente si no se respetan las siguientes restricciones.
Estas restricciones también se aplican para la creación de plantillas personalizadas por parte de nuestros equipos de diseño.
Restricciones comerciales
No usar enlaces relativos
Los enlaces definidos bajo el atributo href de la etiqueta HTML <a> no se pueden insertar como enlaces relativos.
Todos los enlaces deben ser URL absolutas, empezando por http(s)://, o una personalización sintácticamente correcta (${variable}).
Es posible combinar una personalización con una ruta relativa, por ejemplo "${variable}/fe/actito-documentation-client/campaign/en/ACTITO_Documentation.html" (consulta Configuración de enlaces en sus correos electrónicos para obtener más información), pero no se permiten enlaces puramente relativos. Tampoco las URL sin http(s):// (como "www.actito.com").
<a href="www.actito.com/es-ES/plataforma/pro">Enlace al portal</a>
Máximo 255 caracteres en el título del enlace
El título del atributo HTML de un enlace (etiqueta <a>) solo puede contener un máximo de 255 caracteres.
La función del atributo de título es agregar información adicional al enlace, no proporcionar una descripción exhaustiva. Como tal, debe ser breve, de lo contrario impedirá la importación del archivo HTML
<a target="_blank" href="https://www.actito.com/es-ES" title="Este es un ejemplo de un título de un enlace que no se
puede importar en actito por sobrepasar el límite de los
255 caracteres permitidos. Este es un ejemplo de un
título de un enlace que no se puede importar en actito
por sobrepasar el límite de los 255 caracteres
permitidos. Este es un ejemplo de un título de un enlace
que no se puede importar en actito por sobrepasar el
límite de los 255 caracteres permitidos. "><img src="https://res.cloudinary.com/rimantas/image/upload/v1676997485/Actito/Retail/SpainRetail/bannerazul_ratuom.jpg" style="border: 0px; width: 640px; display: block;" width="640" class="c-image-responsive c-image"></a>
Sin adjunto
Como se explica en la ventana modal de importación del HTML, se puede hacer referencia a las imágenes utilizadas en el correo electrónico:
-
Incluyendo enlaces absolutos (imágenes alojadas en un servidor de terceros), en cuyo caso basta con cargar un archivo HTML solo
-
Incluyendo una carpeta que contenga las imágenes dentro de un archivo comprimido que también contiene el archivo HTML (uno por idioma)
En el segundo caso, se pueden insertar imágenes con una referencia relativa (ej. src="nombre_carpeta/nombre_imagen.jpg").
Las imágenes deben estar referenciadas directamente para ser alojadas en el correo electrónico. No se pueden codificar en base64.
Si el HTML hace referencia a una imagen que no está en la carpeta de imágenes (o en otra carpeta, o si el nombre de la imagen/carpeta es incorrecto), encontrará un error de "falta el archivo adjunto referenciado", con la referencia de la imagen que falta.
<img src="/image/upload/v1676997485/Actito/Retail/SpainRetail/bannerazul_ratuom.jpg" style="border: 0px; width: 640px; display: block;" width="640" class="c-image-responsive c-image">
Restricciones de CSS
No usar enlaces relativos
La hoja de estilo externa a la que se hace referencia en las etiquetas HTML <enlace> no se puede referenciar como enlaces relativo.
Todos los enlaces deben ser direcciones URL absolutas; de lo contrario, se considerará que falta el recurso.
<link rel="stylesheet" href="/build/actito-style.aaae10e3.css">
Astuce
Las imágenes utilizadas en el correo electrónico pueden referenciarse como un vínculo relativo y almacenarse en una carpeta del archivo comprimido que contiene el HTML (consulte la regla anterior).
Sin embargo, en el caso de las hojas de estilo en las reglas CSS, solo se permiten enlaces absolutos.
Error de formato de regla CSS
Las reglas CSS que se encuentran en las etiquetas <style> deben tener el formato correcto. Una regla CSS consiste en un selector y una declaración. El selector apunta hacia un elemento HTML, mientras que la declaración contiene el nombre de la propiedad y el valor asociado (ej.: propiedad: valor;).
Si una regla CSS no es válida, el validador Actito resaltará el token no válido y se presentarán las posibles anotaciones válidas.
Good to know
El número de la línea con error está relacionado con la etiqueta <style> en la que se encuentra la regla no válida, no con el HTML en su conjunto.
Si hay varias etiquetas <style> en el <head> del HTML, las líneas se contarán por separado para cada una de ellas.
En el siguiente ejemplo, el td en la línea 21 (de esta etiqueta <style> específica) .root.one-cols>tbody>tr>td>{width:660px} no debe cerrarse y provoca un error.
La sintaxis correcta es .root.one-cols>tbody>tr>td{width:660px} .
<style type="text/css" id="editor_required_emailwidth" ee-render="inline">.email-full-width{width:100%}
.email-body{min-width:100%}
.email-width{max-width:660px}
.row{max-width:660px}
.row.one-cols{max-width:auto}
.row .row{max-width:100%}
.row .row .row-inner{border-width:0;padding:0 0}
.row .row .row-inner.ee_basketcontent,.row .row
.row-inner.ee_productcontent{padding:10px}
.ee_dynamic .row-inner.element-pad{padding:0 10px}
.col-inner{border-width:0;padding:0}
.sub-sub-col-inner{border-width:0;padding:0}
.element-pad{padding:10px}
.element-pad.root-element-pad{padding:10px 20px}
.el-pad{padding:10px}
.el-pad.root-el-pad{padding:10px 20px}
.row-inner{border-width:0;padding:0 10px}
.row-inner.ee_basketcontent,.row-inner.ee_productcontent{padding:10px}
.element-bord{border-width:0}
.el-bord{border-width:0}
.one-cols>tbody>tr>td>.no-stack-column,.one-cols>tbody>tr>td>.stack-column{width:100%;min-width:100%;max-width:640px}
.root.one-cols>tbody>tr>td>{width:660px}
.two-cols>tbody>tr>td>.stack-column{max-width:50%;min-width:100%;width:50%}
.two-cols>tbody>tr>td>.no-stack-column{min-width:50%;max-width:50%;width:50%}
.three-cols>tbody>tr>td>.stack-column{max-width:33.333%;min-width:100%;width:33.333%}
.three-cols>tbody>tr>td>.no-stack-column{min-width:33.333%;max-width:33.333%;width:33.333%}
.four-cols>tbody>tr>td>.stack-column{max-width:25%;min-width:100%;width:25%}
.banner-padding{padding:0 0}
.hero-image-padding{padding:0 0}
.background-image-txt-mso{width:680px;height:175px;background-position:center
center!important}
.bg-img-txt-width{max-width:500px}
.bg-img-txt-text{padding:0 0}
.col-font-reset,.ee_element,.font-reset{min-width:100%}
.button-wrapper{min-width:auto}</style>
Restricciones de análisis
Error de "carácter inesperado"
Un carácter inesperado en medio de las etiquetas HTML puede bloquear la representación del correo electrónico.
Un 'carácter inesperado' puede entenderse como lo siguiente:
-
un carácter adicional en el código. Por ejemplo, 2 comillas dobles una tras otra pueden desplazar el análisis del correo electrónico.
-
por el contrario, las comillas faltantes también pueden desplazar el análisis del correo electrónico.
-
otros caracteres faltantes en el código. Si en el fragmento href="https://www.actito.com", falta el signo "=", la cita justo después del href se considerará inesperada.
Este ejemplo indica un error debido a un carácter no válido en la línea 111. La columna especifica la posición del carácter en la línea.
Notamos que falta el signo "=" después de href, lo que significa que la etiqueta del enlace no es válida.
<h2 align="center" style="color: #000000;font-family: Arial;font-size:
20px;mso-line-height-rule: exactly;line-height:
114%;font-weight: bold;font-style:
normal;text-transform: none;margin-top:
0.5em;margin-left: 0;margin-right: 0;margin-bottom:
0.5em;text-align: center;"><font color="#ffffff"><a data-order-id="28" target="_blank" style="color: #FFFFFF;font-family: Arial;font-size:
18px;font-weight: bold;font-style:
normal;text-transform: none;text-decoration:
none;" href"https://actitoservices.krxd.net/click_tracker/track?kxconfid=spqyu44mp&kxcampaignid=cliente&clk=${URL1}">CALCULA TU PRECIO</a>
</font></h2>
Atributo duplicado
Un atributo duplicado en una etiqueta HTML puede bloquear la representación del HTML.
En el siguiente ejemplo, notamos que la etiqueta img contiene el atributo de título dos veces, lo que provoca un error.
<a href="https://actito.com/go/171365e3a997376117" target="_blank"><img align="center"
border="0"
class="center autowidth fullwidth"
src="https://img.actito.com/repo-images/product/345846/01.jpg"
alt="Actito Easy, le vitrage facile à nettoyer" title="Actito Easy, le vitrage facile à nettoyer" style="outline: none;
-ms-interpolation-mode: bicubic; clear:
both;height: 100%; float: none; width: 100%;
max-width: 1100px; display: block;
border-radius: 6px;"title="Image"
width="168" height= "137"/></a>
Restricciones de seguridad
El uso de JavaScript en un correo electrónico es muy desaconsejable y se considera una mala práctica.
De hecho, los scripts se consideran una vulnerabilidad de seguridad en un correo electrónico, porque los perfiles no pueden saber qué tipo de script se activa cuando abren un correo electrónico. Esto es muy diferente a usar JavaScript en el HTML de un sitio web, porque los perfiles pueden elegir en qué sitio web navegan y evitar los riesgos. Por el contrario, con los correos electrónicos, el remitente tiene el mayor control sobre el contenido y abrir un correo electrónico es visto como un comportamiento inofensivo por parte de los perfiles... Aunque sabemos que no tiene malas intenciones con sus perfiles, los correos web no lo son. confiando y quieren proteger a sus usuarios.
Como resultado, el uso de JavaScript en un correo electrónico es un gran riesgo de entregabilidad. En el mejor de los casos, el script será bloqueado por la política de seguridad del webmail.
Lo más probable es que el correo electrónico se clasifique como correo no deseado o que el dominio o la dirección IP se marquen por intento de piratería.
Por estas razones, JavaScript no está permitido en los correos electrónicos de Actito.
Etiquetas de secuencia de comandos
No se permiten las etiquetas utilizadas para agregar un script como un todo (tanto en CSS como en el cuerpo):script, embed, iframe, object
<script type="text/javascript">
(function (e, t, o, n, p, r, i) {
e.visitorGlobalObjectAlias = n;
e[e.visitorGlobalObjectAlias] =
e[e.visitorGlobalObjectAlias] || function () {
(e[e.visitorGlobalObjectAlias].q =
e[e.visitorGlobalObjectAlias].q ||
[]).push(arguments)
};
e[e.visitorGlobalObjectAlias].l = (new Date).getTime();
r = t.createElement("script");
r.src = o;
r.async = true;
i = t.getElementsByTagName("script")[0];
i.parentNode.insertBefore(r, i)
})(window, document, "https://diffuser-cdn.app-us1.com/diffuser/diffuser.js", "vgo");
vgo('setAccount', '90387794');
vgo('setTrackByDefault', true);
vgo('process');
</script>
Atributos de eventos
Los llamados "atributos de evento" son atributos que se agregan a otra etiqueta (como medios o elementos de formulario) que tienen la capacidad de activar un script cuando el usuario realiza una acción en el correo electrónico.
Los siguientes atributos de evento no están permitidos:
onafterprint, onbeforeprint, onbeforeunload, onhashchange, onload, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onresize, onstorage, onunload, onblur, onchange, oncontextmenu, onfocus, oninput, oninvalid, onreset, onsearch, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onwheel, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onscroll, oncopy, oncut, onpaste, onabort, oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting, ontoggle
<a href="https://www.actito.be/actito-portal/images/logo" onerror="this.onerror=null;this.src='Images/logo/carousel_no_image.png';" target="_blank" data-actito-link-id="link_8"><img src="https://www.actito.be/actito-portal/images/logo.png" width="560" height="315" mc:edit="560_imges" class="full_img" alt="img_560X315" style="display:block; max-width:560px;" border="0"></a>
Expresiones añadidas a una etiqueta
También se pueden agregar scripts a los atributos de algunas etiquetas.
No está permitido usar etiquetas que tengan un atributo con valor que contenga uno de los siguientes: javascript:, eval( , expression(
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
window.onload = function () {// ww w . j ava2s . c om
var x = document.getElementById("myP").textContent;
eval("var e = " + x + ";");
document.body.innerHTML = e();
} </script>
</head>
Imágenes SVG
Debido a que el formato SVG se implementa en XML, puede contener CSS y Javascript, lo que puede permitir ataques XSS cuando se inserta un script malicioso.
Por lo tanto, no es posible utilizar imágenes SVG en los correos electrónicos.
<img src="happy.svg" alt="logo" width="165" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:13px;display:block;border:none" class="t_w100p m_w100p">
Compatibilidad del email
Algunas prácticas deben evitarse en sus HTML porque no son compatibles con algunos o todos los clientes de correo electrónico que pueden usar sus perfiles.
Por lo tanto, los siguientes elementos no son compatibles:
Prácticas a evitar
Algunas prácticas no son compatibles con todos los clientes de correo electrónico y, por lo tanto, pueden generar problemas. Esa es la razón por la que recomendamos encarecidamente evitar el uso de los siguientes elementos en los correos electrónicos que envíe a través de Actito.
Hojas de estilo externas
Formularios
Bmp, tiff e imágenes jpg
Flash
Sonidos
Area Map
Elementos solo admitidos por algunos clientes de correo electrónico
Atributo 'td' en 'Rowspan'
-
Imágenes de fondo ('background-image')
La etiqueta 'style' en el encabezado