Visualización de un documento html en un navegador. Edición del archivo fuente de un correo electrónico html Cómo abrir un correo electrónico en un navegador

¡Lee las dos partes anteriores, domina la tercera y estarás armado con todo el conocimiento técnico para trabajar completamente en el nuevo editor!

¿Cómo extraer el código de correo electrónico del nuevo editor?

Entonces, trabajé en la nueva versión del constructor. En general, me gustaba. Sin embargo, la desventaja es que no le permite convertir la carta creada, junto con el texto y las imágenes, en código HTML. Es triste. Pero hay una salida. Necesitas extraer el código tú mismo. ¿Cómo hacerlo?

Ahora te lo diré. En general, tienes una carta. O una plantilla de carta. De lo contrario, vuelva a leer esta parte después de crear una plantilla (o una carta preparada basada en ella).

Desde el principio

Entonces, repasemos todo el procedimiento por completo. Desde el principio. Hacemos todo en cuatro pasos.

Segundo paso. Seleccione una plantilla guardada.

Paso tres. Haga clic en el botón "Vista previa". A continuación, describiré el procedimiento en el navegador. Google Chrome. Al hacer clic en el botón "Vista previa", la carta se abre en la forma en que la verá el suscriptor.

Paso cuatro. Haga clic derecho para que aparezca el menú, donde seleccionamos la opción "Ver código". En el navegador Chrome, después de eso, se abre una ventana adicional ("ventana en una ventana") desde la parte inferior con el código HTML de la carta.

Para que quede más claro, a continuación se muestran capturas de pantalla de todos los pasos.

Cómo obtener el código HTML de un correo electrónico

Si mueve el cursor del mouse sobre cualquier línea de código, entonces en la ventana de vista previa del mensaje (lo tenemos abierto, no se ha ido a ningún lado) se marcará el campo que describe esta línea.

Avanzando, llegamos al principio de nuestra carta. Este puede ser el primer texto, por ejemplo, "Hola, querido suscriptor", o una imagen: el logotipo de su sitio.

Mi carta comienza con un logo. Entonces buscaremos el código a partir del cual comienza la descripción de todos los elementos de la carta: texto e imágenes.

La ventana con el código se puede colocar horizontalmente (en la parte inferior de la ventana del navegador), verticalmente (en el lado derecho de la ventana del navegador) o como una ventana independiente separada. Pero no necesitamos una ventana independiente separada, porque recorreremos el código y veremos qué elemento de la letra muestra. Es más conveniente para mí que la ventana adicional se encuentre en la parte inferior de la ventana del navegador.

Cómo configurar una ventana adicional

Seleccionar la ubicación de la ventana adicional es simple.

1. En el menú superior de la ventana adicional, en la parte derecha, junto a la cruz, hay un elemento señalado por tres puntos verticales. Se llama Personalizar y controlar DevTools (el nombre se muestra cuando pasa el mouse sobre él). Lo abrimos.
2. Seleccione el modo Acoplar al fondo.

Todo. Ahora nuestra ventana adicional se encuentra en la parte inferior. En este caso, se debe seleccionar el modo Elementos en la parte izquierda del menú superior.

Copiar el código de correo electrónico desde el navegador

Ahora avancemos a través del código de arriba a abajo. Una vez que hemos encontrado el código que cubre simultáneamente todos los elementos de la página de nuestra carta, llamamos al menú con el botón derecho del ratón y seleccionamos Editar como HTML.

Se abre un bloque: un rectángulo, dentro del cual hay mucho código. Copie todo el código dentro de este rectángulo (primero presione la combinación de teclas Ctrl + A, luego Ctrl + C).

Eso es todo, copiamos el código HTML al portapapeles, es decir, a la memoria temporal de nuestra computadora. Ahora puede guardar este código como plantilla en SmartResponder.

Se abre un campo en blanco de una nueva plantilla, en cuyo menú definitivamente debe hacer clic en el botón "Fuente" (justo hoy vi que ahora este botón ha sido renombrado como "código HTML").

Luego pegamos nuestro código HTML con el atajo de teclado Ctrl+V. Luego indique el asunto de la carta (este es un campo obligatorio) y presione el botón "Guardar". ¡Listo!

Guardar correctamente el código de correo electrónico

Sí, eso está resuelto. Ahora también puede guardar el código como un archivo HTML en su computadora. Para hacer esto, simplemente abra el Bloc de notas y guarde el código en él. Luego cambie la extensión *.txt a *.html y abra el archivo. Verá una copia de su carta en la ventana del navegador.

Estrictamente hablando, para guardar códigos de programa, es mejor descargar el editor NotePad++. Siempre lo uso porque el Bloc de notas es:

a) presentación visual de la estructura del código;
b) resaltado de sintaxis (es decir, enlaces entre elementos de código: dónde se abre y se cierra qué y qué se escribe entre estos “dónde qué” se escribe).

Cierto, en aprender a procesar el código de una carta creada específicamente en el servicio de correo SmartResponder, incluso NotePad ++ no me ayudó a obtener un marcado de código hermoso. ayudó aquí adobe dreamweaver cc.

Solo gracias a él fue posible estructurar el código usando el comando "Formatear código fuente".

Ahora puede transferir el código a NotePad++ y guardarlo. Aunque, no. Antes de guardar, debe hacer clic en "Convertir a ANSI" para que no haya garabatos en lugar de texto al visualizar.

También puede seleccionar "Ver" - "Ajustar líneas". Entonces todo el código se ubicará en el ancho de la página, y no en una línea.

Después de eso, todo debería abrirse y mostrarse como en la plantilla de carta en el servicio SmartResponder.

Red de seguridad: guarda el código en SmartResponder

Como “pescamos” el código de nuestra carta creada en el nuevo editor, como ya lo tenemos, podemos guardarlo en el servicio SmartResponder por seguridad. ¿Para qué? Para crear nuevas letras basadas en él, cámbielas y, lo que es más importante, utilícelas en otros recursos (le recuerdo que simplemente no existen tales características en el nuevo editor).

Para hacer esto, el código copiado del navegador Google Chrome debe pegarse en el antiguo constructor de SmartResponder.

Esto se hace fácilmente.

1. Seleccione la sección "Lista de plantillas de cartas" en la pestaña "Envíos por correo".
2. Haga clic en el botón "Crear plantilla".
3. Seleccione el tipo "Correo electrónico HTML colorido (editor antiguo)" y haga clic en "Siguiente".
4. En el editor que se abre, en el menú de herramientas para crear una carta, haga clic en el botón "Código HTML".
5. Pegue nuestro código (presione Ctrl + V). Podemos hacer clic nuevamente en el botón "Código HTML", es decir, desactivar el modo de visualización del código y activar el modo de visualización de la apariencia de la letra.
6. Asegúrese de completar el campo "Asunto de la carta" (en ruso: le damos el nombre a nuestra plantilla).
7. Presiono el botón "Guardar".

Eso, de hecho, es todo lo que quería contarles sobre el nuevo editor de SmartResponder después de crear mi primera carta en él.

Quiero decir que no estaba familiarizado con el servicio SmartResponder antes. Es decir, no tenía habilidades para trabajar ni en el editor antiguo ni en el nuevo. Pero me registré y lo descubrí. Bueno, ahora ya sabes cómo trabajar en el nuevo constructor de SmartResponder.

¿Y qué servicios para crear y enviar cartas utilizas en tu trabajo?

A menudo nos preguntan sobre las posibilidades de editar correos electrónicos html. Como regla general, no hay problemas con esto, ya que los servicios de correo están equipados con varios editores de cartas.

Pero, ¿qué sucede si necesita enviar cartas a solo unos pocos destinatarios y cada uno de ellos debe ser individual? ¿Pagar dinero solo por la oportunidad de usar el editor de servicios?

No es necesario. Hoy te contamos cómo reemplazar el contenido de la carta en el código fuente usando como ejemplo el editor de texto Sublime Text.

Conociendo al editor

Al mismo tiempo, para ver la carta en sí y realizar un seguimiento de los cambios en ella, solo necesita abrir el archivo html de la carta en una ventana del navegador. Después de guardar los cambios (Ctrl + S) en el texto del código, simplemente actualice la página y verá los cambios realizados.

Como puede ver, Sublime destaca diferentes formatos de datos con colores, en nuestra versión: rosa para etiquetas html, verde para opciones, amarillo, morado y azul para valor de varias opciones y blanco para texto.

Sustitución del texto de la carta.

Gracias a las características del editor mencionadas anteriormente, un niño también puede reemplazar el texto de una carta. Todo lo que se requiere de usted es simplemente reemplazar el texto en sí, resaltado en blanco por Sublime.

Vale la pena señalar que Sublime, así como el Bloc de notas, restablece automáticamente el formato del texto. Por lo tanto, puede copiar con seguridad cualquier texto y pegarlo en el lugar correcto, se mostrará en la carta de acuerdo con los parámetros especificados en el código.

Y un pequeño consejo más, para encontrar el texto deseado en toda la matriz de código, presione Ctrl + F; después de eso, aparecerá un campo de búsqueda de texto en la parte inferior del editor.

Si es necesario, puede cambiar el estilo de fuente.

Recomendamos utilizar una de las siguientes fuentes: Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman Estas son fuentes estándar que son reconocidas por cualquier sistema. De lo contrario, su texto en otra computadora puede convertirse en un galimatías.

Tamaño- sustituir el valor deseado en el parámetro “tamaño de fuente: 14px;” . Aumentemos el tamaño de fuente de 14px a 16px.

Color- el valor del color se establece en el parámetro HEX “color: #323232;” .

Puede elegir el valor del color utilizando uno de los servicios en línea, por ejemplo aquí: get-color.ru.

Haremos que el texto sea gris - #4F4F4F.

Espaciado entre líneas- por analogía con el tamaño de fuente, establecido por el parámetro altura de línea: 18px;

formato de fuente- establecido por etiquetas texto - gordo, texto - cursiva y texto - subrayado.

Vale la pena señalar que Sublime, al abrir una etiqueta, agrega automáticamente un comando para cerrar la etiqueta. Ten cuidado.

Pongamos nuestro texto en cursiva.

Salto de línea- establecido por etiqueta
. Simplemente inserte esta etiqueta antes de la sección de texto deseada.

Reemplace el texto, guarde, actualice y listo.

Insertar un enlace en el texto

destino = "_en blanco" - este comando para abrir el enlace en una nueva pestaña. Si desea que el enlace se abra en la pestaña actual, simplemente déjelo fuera.

decoración de texto: subrayado; - un comando al navegador para subrayar el enlace. Si no es necesario subrayar, debe escribir texto-decoración: ninguno;

En cualquier caso, asegúrese de escribir este comando, de lo contrario, cada navegador decidirá a su manera si subrayar o no.

Este también es un comando obligatorio; de lo contrario, los navegadores mostrarán el color como mejor les parezca.

¡Atención! Algunos clientes de correo electrónico son más inteligentes de lo que parecen, y si ven un enlace en el texto, por ejemplo, "Puedes ir al sitio del sitio para estudiar más...", entonces pueden resaltarlo por su cuenta y en su propio forma.

Insertar/reemplazar un enlace en una imagen

Las imágenes de la carta no se almacenan como archivos adjuntos, sino que se encuentran en los servidores. En consecuencia, en el código, la imagen es un enlace a él, y el comando para agregarlo es similar al discutido anteriormente.

www.ejemplo.com”target=”_blank” style=”texto-decoración: subrayado; ”>

color:#234322; - el comando de configuración de color no es relevante para la imagen.

frontera = "0" - Comando de encuadre de imagen. Un valor de 0 elimina el borde blanco alrededor de la imagen, los valores más grandes que eso eliminarán su ancho de píxel correspondiente.

Asegúrese de ingresar este comando. Por ejemplo, Outlook asigna automáticamente un marco a una imagen si no registra este comando.

Encontrar un fragmento de código con una imagen será más fácil en el navegador. Para hacer esto, haga clic derecho en la imagen requerida y seleccione "Ver código" (estos son los nombres de esta opción en Google Chrome, el nombre y la ruta en otros navegadores pueden diferir). El navegador resaltará automáticamente la parte correcta para usted, copiará el código y lo pegará en la búsqueda de Sublime.

Al reemplazar una imagen, tenga cuidado: si el tamaño de la nueva imagen difiere del tamaño de la anterior, debe cambiar todos los parámetros ancho Y altura a los actuales.

Epílogo

Te contamos las opciones más “indoloras” para editar el código de correo electrónico. Si necesita realizar cambios más significativos, le recomendamos que confíe dicha tarea a un especialista en diseño, o al menos cree una copia del código antes de editarlo.

¡Hola a todos!

Rustem nos dejó para Sochi, para disfrutar del cálido clima marítimo. Alina y yo recibimos instrucciones de continuar la historia sobre el marketing por correo electrónico. Bueno, esta semana es mi post. Te hablaré de OpenRate.

La tasa de apertura de cartas (Open Rate en inglés) es una de las más importantes. Enviaste 10.000 cartas y solo 10 personas lo leyeron. La tasa de apertura fue del 0,1 %. ¡Tristeza! Pero si hay 2000 personas, entonces no está mal: 20%. Pero surge la pregunta, ¿cómo saber cuántas personas han leído la carta? Servicios como Unisender, Mailchimp, etc. brindan esta información en la interfaz. Tratemos de averiguar cómo obtienen estos datos. Afortunadamente, hay algunas formas, solo dos.

Opción 1. Imagen de un solo píxel.

¡El método es extremadamente simple! El servicio inserta una imagen transparente de 1 × 1 píxel en el correo electrónico. Cuando el usuario abre el correo electrónico, la imagen se carga en el navegador. Al mismo tiempo, la imagen parece estar ubicada en los servidores del "mailer". Cuando llega una solicitud de imagen (una solicitud al servidor), el servicio puede rastrear qué imagen se solicitó. Y para sacar una conclusión: qué carta, desde qué lista de correo se abrió.

Por cierto, puede rastrear la apertura de letras individuales de esta manera insertando el código de GoogleAnalytics en el código en lugar de la dirección de la imagen. Y luego el número de aperturas se mostrará en sus estadísticas.

Las desventajas de dicho seguimiento: no funciona en todas las interfaces de los remitentes (y programas de correo), y el método también es aplicable solo si su carta está en formato HTML. Después de todo, este es un cierto código html. En un mensaje de texto normal, el método no funcionará.

Opción 2. Seguir enlaces.

La segunda solución también está en la superficie. Marcamos los enlaces en la carta, agregamos un código especial a la dirección de cada enlace. Si alguien los siguió hasta nuestro sitio, abrió la carta. Mediante el código, puede identificar de qué lista de correo proviene el usuario. Este método complementa la primera opción: si no funcionó, las estadísticas se aclararán mediante clics en el enlace.

Por cierto, una vez hubo una idea para rastrear la tasa de apertura de cartas no para enviar por correo, sino para aquellas enviadas por vendedores con ofertas comerciales. Se descubrieron una serie de servicios extranjeros que, en última instancia, funcionan aproximadamente con los mismos principios.

Eso es básicamente todo. ¡Que tengas una fructífera semana de trabajo!