Editor de demostración Iniciar →
Diseño Marketing Plantillas How-to AMP
~ 21 min. leídos
78220 vistas
valóralo
11 marzo 2021

Cómo Crear Emails AMP con Stripo

Stripo / Blog / Cómo Crear Emails AMP con Stripo

Actualizaciones dinámicas, contenido en tiempo real, hiper-personalización, un nuevo nivel de gamificación, dejar comentarios en formularios abiertos, reservar reuniones, etc. - todas estas acciones son ahora posibles directamente en las bandejas de entrada de los usuarios con la llegada de AMP para el correo electrónico.

E-Mail mit dem Kalender¿Hace falta decir que estos correos electrónicos avivan tus boletines, tienen un aspecto fresco y novedoso en las bandejas de entrada de los usuarios y, como resultado, aumentan las conversiones, en algunos casos, 5 veces?

Pero, ¿cómo se construyen estos correos electrónicos?

Gmail en sus directrices sobre los correos electrónicos AMP dice que cuando se construyen estos correos electrónicos, es necesario añadir algunos elementos de código, scripts de componentes AMP a la cabecera del correo electrónico y a su doctype. Stripo lo hace todo por ti.

Hoy, vamos a mostrarte cómo construir un correo electrónico AMP con Stripo - todos los pasos desde la construcción hasta la validación - que se renderizan correctamente en los clientes de correo electrónico.

Formas fáciles de construir emails AMP con Stripo

Actualmente, hay seis formas:

Forma 1. Utilizando los bloques AMP de Stripo

Para crear un correo electrónico AMP utilizando este método, no necesitas ningún conocimiento de HTML.

Paso 1. Arrastrar un bloque AMP a una plantilla

Solo tienes que arrastrar un bloque necesario a tu plantilla de correo electrónico.

Actualmente, ofrecemos tres bloques AMP de arrastrar y soltar:

Bloques es

Es importante tener en cuenta:

Cualquier bloque AMP que hayas añadido en tu plantilla se incluye por defecto en la versión AMP HTML de tus correos electrónicos.

No necesitas insertar ninguna secuencia de comandos en el código del correo electrónico. Por lo tanto, este elemento se mostrará sólo a los destinatarios cuyos clientes de correo electrónico admitan AMP para correos electrónicos. Más adelante proporcionaremos la lista.AMPHTML-Modul-in-Email

Sin embargo, el resto de tu correo electrónico se mostrará tanto en la versión AMP HTML como en la versión HTML tradicional.

Paso 2. Configurar el bloque AMP

¿Cuáles son estos bloques y cómo configurarlos?

1. Carrusel de imágenes

El carrusel de imágenes permite colocar varios banners/imágenes en una sola pantalla si se utiliza el carrusel en los correos electrónicos de ventas.

Para más detalles sobre cómo configurar el carrusel, por favor consulte nuestro publicación de blog dedicado, u observa un breve video.AMP-für-E-Mail-Karussell

Además, puedes subir pequeñas partes de imágenes a los carruseles para que los usuarios las roten y hagan una gran foto con ellas; te recomendamos que lo utilices en correos electrónicos de gamificación o teaser.

Para obtener detalles de cómo construir este tipo de laberintos con el carrusel, por favor consulta la publicación del blog “Construcción de laberintos y rompecabezas”.

Laberintos que permiten a la gente adivinar a qué país pueden volar

2. Acordeón

El Acordeón reduce las necesidades de desplazamiento en los dispositivos móviles. Oculta el contenido del correo electrónico en secciones plegables y ampliables. Los usuarios ven el esquema del contenido y van a la sección necesaria.

Resumen de acordeón de AMPPuedes colocar texto, imágenes, botones CTA, y hasta videos en las secciones plegables.

Para obtener más detalles de cómo diseñar el acordeón con Stripo, por favor consulta la entrada del blog “Cómo construir el acordeón AMP para tus correos electrónicos”, u observa nuestro breve video.

3. Abrir un formulario

Los formularios incrustados en los correos electrónicos permiten dejar comentarios y enviar opiniones en los correos electrónicos.

Dejar un comentario en un correo electrónico

En 2020, realizamos una Prueba A/B. En un correo electrónico HTML normal, añadimos un enlace a un formulario en nuestro sitio, pidiendo a los usuarios que salieran del correo electrónico para llenarlo. En un correo electrónico AMP HTML, añadimos el formulario AMP, para que los usuarios dejaran sus comentarios sin salir del correo electrónico. El formulario AMP generó 5 veces más comentarios que el formulario clásico de nuestro sitio. ¿Por qué? Creemos que se trata de ahorrar tiempo. Cuantas menos acciones necesite una persona, más posibilidades tendrá de hacerlo.

Ahora añadimos el formulario AMP en todos nuestros correos electrónicos de activación y promoción. Ha generado 11 000 respuestas desde agosto de 2020.

Para obtener información detallada sobre cómo configurar el formulario AMP para sus boletines de noticias, consulte nuestra publicación del blog “Formulario AMP”, u observa ve nuestro breve vídeo

Es importante tener en cuenta:

Tendrás que conectar tus formularios a cualquier almacenamiento de datos - ya sea el Servicio de Datos de Stripo, o las Hojas de Cálculo de Google, o tus personalizadas a través de Zapier - para recibir y almacenar las respuestas de los usuarios. Observa cómo conectar los correos electrónicos con el almacenamiento de datos.

Prueba de formularios AMP en Hojas de cálculo de Google

Paso 3. Construir una Fallback

Dado que los elementos de AMP solo se muestran para aquellos usuarios cuyos clientes de correo electrónico admiten AMP para el correo electrónico, debemos crear una alternativa para aquellos cuyos clientes de correo electrónico aún no admiten AMP.

El tipo de fallback dependerá del bloque que hayas utilizado.

Por supuesto, es totalmente a su discreción. Pero aquí están los fallbacks más comunes para sus correos electrónicos:

  1. Para Carrusel AMP - banners; tarjetas de productos múltiples.

  2. Para Acordeón - listas con viñetas; múltiples filas con contenido, y múltiples tarjetas de producto.

  3. Para el formulario de AMP - un enlace a un formulario externo si necesitas comentarios; o una calificación similar a la de NPS si sólo necesitas una calificación.

Ideas para boletines informativos interactivos Clasificación de estrellas en correos electrónicos

Aquí, mostramos cómo construir éste. Es compatible con todos los clientes principales de correo electrónico

Para añadir un Fallback a su correo electrónico, necesitas:

  • arrastrar una nueva estructura en tu plantilla. El número de columnas en ella depende de tus objetivos;

Contenido-Bloques

  • configurarlo según las necesidades de la campaña actual;

  • habilitar este elemento sólo para el correo electrónico HTML haciendo clic en el botón "Incluir sólo en HTML.

Incluido en HTML-Estructura

Eso es todo.

Es importante tener en cuenta:

En el editor de Stripo, puedes ver fácilmente qué elementos están habilitados para la versión HTML tradicional de tu correo electrónico, qué elementos están habilitados para la versión AMP HTML, y cuáles se mostrarán en ambas versiones.

Correos electrónicos de AMP con elementos de AMP y respaldo marcados en consecuencia

(HTML - fragmento de producto; AMP HTML - carrusel con varios fragmentos de producto)

Los contenedores/elementos marcados como "HTML" sólo se mostrarán a los destinatarios cuyos clientes de correo electrónico no sean compatibles con AMP for Emails. Mientras que los elementos con el signo ⚡HTML se mostrarán sólo a aquellos destinatarios cuyos clientes de correo electrónico sí soporten AMP.

Los elementos/contenedores que no tienen marcas, funcionarán para ambas versiones del correo electrónico.

Forma 2. Utilizando las plantillas AMP preparadas de Stripo

Stripo ofrece una serie de plantillas de correo electrónico AMP listas para usar. Contienen módulos con carrusel AMP, con acordeón AMP, formularios AMP, y plantillas con elementos de gamificación.

Construir correos electrónicos AMP con nuestras plantillas

Paso 1. Escoger la plantilla correcta

  • Elige la que mejor se adapte a las necesidades de tu campaña actual. Para ello, debes hacer clic en "+ Nuevo mensaje”;

Nuevo mensaje

  • entra en la pestaña "Plantillas preparadas;

  • en el filtro "Característica" habilitar sólo las plantillas AMP;

Plantillas predefinidas ES

  • edita esta plantilla.

Paso 2. Editar la plantilla

Hay tres tipos diferentes de plantillas: las que se pueden editar a través del editor visual, las que tienen componentes dinámicos para editar a través del editor de código HTML; y las combinadas. Tenemos que describirlas por separado.

Correos electrónicos AMP para editar a través del editor de código

Estos correos electrónicos contienen carruseles y acordeones, los hemos descrito anteriormente.

Para editarlos, tendrás que trabajar sólo en el editor visual. No es necesario lidiar con el código:

  • haz clic en el elemento AMP HTML de la plantilla;

Edición de AMP-Elements-in-Emails

  • reemplaza las imágenes por las tuyas (aplicable a los carruseles), y trabaja en el diseño y el contenido, etc. (aplicable para los acordeones).

Cambiar imagen

(Editar carruseles)

Trabajar en acordeones Creación de correos electrónicos AMP para boletines

(Editar el diseño del acordeón en el panel de configuración)

Edición de elementos AMP para correos electrónicos AMP Stripo

(Edición del contenido del acordeón en la plantilla)

Correos electrónicos AMP para editar a través del código, y el editor visual

La mayoría de los correos electrónicos contienen formularios - ya los hemos descrito antes.

a) se edita el diseño de estos formularios en el panel de configuración

Aquí, trabajarás en el panel de configuración:

  • haz clic en la franja con el formulario AMP en la plantilla para activar el panel de ajustes para el elemento en particular;

Raya-Contenido HTML

  • en el panel de ajustes, personalizas el formulario.

b) Conecta el formulario a tu almacén de datos

Aquí, trabajarás con el código del correo electrónico y el almacenamiento de datos: tendrás que pegar un punto final en el código de tu plantilla:

  • haga clic en el bloque con el formulario en la plantilla;

  • en el editor de código, que se abre automáticamente al hacer clic, pega tu endpoint.

Pegar el punto final en el correo electrónico¿Dónde se crea este endpoint? — Puedes pedirle a tus programadores que construyan uno de tu lado, o puedes conectar los formularios al Almacenamiento de Datos de Stripo, o conectar el tuyo personalizado (como las Hojas de Cálculo de Google) a través de Zapier. En nuestra publicación "Servicios de Datos", le mostramos cómo conectar los correos electrónicos a Google a través de Zapier o el servicio de datos de Stripo.

c) editar el contenido del formulario

Aquí puede personalizar el texto del botón y el mensaje de notificación de éxito ("Gracias por su opinión", y "¡Error! Por favor, inténtelo de nuevo más tarde") - texto que los usuarios ven después de enviar su opinión.

Construcción-de-mensajes-de-notificación-de-éxito-AMP-Elementos-de-correo electrónico-con-Stripo

  • haz clic en el formulario de la plantilla para abrir el editor de código;

  • edita el texto que va en blanco;

Edición de texto para formularios Creación de formularios de correo electrónico AMP

  • diseña los estilos, como los colores de los botones, los tamaños de las fuentes y los tipos que establezcas aquí - en el código.

Si elegiste el formulario con calificación, los colores de los botones de calificación deben ser editados aquí, en el editor de código, también.

Correos electrónicos AMP para editar sólo a través del código

Nos gustaría dividir estas plantillas de correo electrónico en dos grupos:

  • grupo A - los que no requieren ninguna conexión con la fuente de datos, y no contienen ningún código JSON;

  • grupo B - las que requieren estar conectadas a las Fuentes de Datos e incluyen JSON.

Grupo A

Los detalles del correo electrónico que puedes editar para estos correos son los siguientes: estilos de diseño, texto, colores y tamaños de fuente, imágenes, etc.

  • haz clic en la fila/raya con el elemento AMP;

  • reemplaza nuestros enlaces a las imágenes con enlaces a sus imágenes;

Edición de plantillas de correo electrónico a través de correos electrónicos AMP de código

  • edita los colores, si es necesario, y el texto.

Edición de colores para correos electrónicos de AMP en el editor de código

En nuestro creador de correos electrónicos AMP, el texto siempre va en blanco en el código - fácil de notar.

Grupo B

El código de este tipo de correos electrónicos es bastante complejo, y requiere algunos conocimientos de programación, ya que está conectado a JSON y fuentes de datos…

Dibuja tus tarjetas de Navidad en correos electrónicosPor lo tanto, es imposible mostrar aquí en unas pocas frases cómo trabajar en estos correos electrónicos. Así que es mejor utilizarlos (es decir, los elementos AMP) sin cambios o pedir ayuda a sus programadores.

Paso 3. Crear un fallback

Las plantillas de correo electrónico con carruseles, acordeones y formularios ya tienen un fallback. Por lo tanto, sólo tendrá que editar el fallback, así para tener su correo electrónico listo.

Elemento de construcción AMP para respaldo de correo electrónicoPara los correos electrónicos con elementos de gamificación, o con contenido en tiempo real en los correos electrónicos, necesitas insertar un enlace a la versión web de tu correo electrónico AMP en el correo electrónico HTML. Asegúrate de explicar a los destinatarios por qué necesitan ver la versión web e incluye esta CTA sólo en el HTML. O añade un elemento similar al de AMP y pide a los usuarios que envíen por correo electrónico sus respuestas correctas si se trata de concursos y rompecabezas.

Respaldo con elementos similares a los elementos AMP

(Elemento de correo electrónico AMP HMTL)

Fallbacks Versión HTML de correos electrónicos de AMP

(HTML fallback)

Forma 3. Utilizando los módulos AMP prediseñados de Stripo

Es muy fácil construir un email AMP utilizando nuestros módulos AMP. Simplemente arrastra uno a la plantilla con la que estás trabajando. Y nuestro editor añadirá el script necesario de un componente AMP respectivo.

Paso 1. Elegir el módulo adecuado

  • entra en la pestaña "Módulos" en el panel de configuración;

  • ve a la sección "Preconstruidos";

  • activa la opción "Filtro y agrupación";

  • activa sólo "AMP";

Preconstruido

  • arrástralo a tu plantilla.

Paso 2. Configurar el módulo

  • La parte HTML regular del módulo AMP debe editarse con las herramientas del panel lateral;

  • los elementos AMP del módulo deben editarse sólo a través del código. Para abrir el código de este elemento AMP en particular, sólo tienes que hacer clic en el signo AMP HTML en la plantilla.

Editando-Módulos-AMP-en-Stripo

Paso 3. Crear fallback

Por defecto, este módulo se incluye sólo en la versión AMP HTML de tu plantilla. Por lo tanto, tenemos que crear un fallback.

Más arriba, en la sección Forma 1, mostramos cómo construir un fallback para carruseles, acordeones y formularios.

Si tu módulo AMP contiene elementos de gamificación, asegúrate de añadir un enlace de "versión web" en el correo electrónico. E incluye este elemento sólo en HTML.

Incluido en HTML-Estructura

Forma 4. Utilizando el código de Gmail Playground

Esta forma requiere sólo unos pocos pasos:

Paso 1. Construir una plantilla de correo electrónico tradicional HTML

Para ello, puedes construir una desde cero arrastrando bloques, o puedes utilizar cualquiera de nuestras 500 plantillas de correo electrónico listas para usar

Paso 2. Construcción de elementos AMP para correos electrónicos con Gmail AMP para Email Playground

Google ofrece una gran variedad de elementos AMP preparados.

Vamos a utilizar el elemento AMP-carrusel:

  • en el playground de Gmail, haz clic en el menú desplegable para elegir AMP-carrusel;

  • una vez que hayas hecho clic en él, a la izquierda en el editor de código, verás el código de AMP-carrusel. Encuentra la siguiente línea en el código:

<amp-img src="https://www.google.com/images/background/p1.jpg" width="800" height="600" layout="responsive"></amp-img>
  • ahora, en este ejemplo de código, edita el ancho de la imagen, que estaba establecido por defecto, de 800 a 600 píxeles ya que este es el tamaño de ancho más común;

  • cambia la altura de 600 a 480 píxeles para guardar la proporción de la imagen;

Stripo Cómo crear correos electrónicos AMP con Stripo Configuración del tamaño de imagen de carrusel de AMP

  • ahora, reemplaza todos los enlaces envueltos en los atributos <href> por los enlaces de las imágenes necesarias que alojas en tu sitio web o en cualquier otro sitio de alojamiento de imágenes;

Stripo Cómo crear correos electrónicos AMP con Stripo Reemplazando los enlaces a imágenes con los adecuados

  • copia el código de incrustación con 4 imágenes en AMP-image carousel;

<div class="images">

<amp-carousel width="600" height="480" layout="responsive" type="slides">

<amp-img src="https://image.freepik.com/free-photo/school-backpack-school-supplies-with-chalkboard-background_53476-528.jpg" width="600" height="480" alt="a sample image"></amp-img>

<amp-img src="https://image.freepik.com/free-photo/stylish-teenage-workspace-with-yellow-backpack-reading-lamp_23-2147878350.jpg" width="600" height="480" alt="another sample image"></amp-img>

<amp-img src="https://image.freepik.com/free-photo/father-leads-little-child-school-boy-go-hand-hand-parent-son-with-backpack-back_90791-15.jpg" width="600" height="480" alt="and another sample image"></amp-img>

<amp-img src="https://image.freepik.com/free-photo/rear-view-group-diverse-kids-wearing-backpack_53876-75383.jpg" width="600" height="480" alt="and another sample image"></amp-img>

</amp-carousel>

</div>

Paso 3. Pegar el código de incrustación en Stripo

En Stripo:

  • arrastra la estructura de 1 columna en tu plantilla preparada;

  • suelta el bloque HTML en ella;

  • haz doble clic en él para abrir el "editor de código HTML”;

  • sustituye el "Inserta tu código HTML" por el código de incrustación;

  • en el panel de configuración, en la sección "incluir en", establecer "⚡HTML”;

Incluido en AMPHTML bouton

Esto significa que el carrusel de imágenes AMP se mostrará sólo en aquellos clientes de correo electrónico que soporten AMP.

En Google Gmail Playground:

  • copia el script que especifica qué elemento AMP vas a utilizar. Se encuentra en el encabezado del correo electrónico debajo de los atributos <style> antes de la etiqueta de cierre </head> ;

Creación de stripo de correos electrónicos AMP con Google Playground Script

  • si, como nosotros, vas a utilizar AMP-carrusel, aquí está el script para incrustar:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  • abre el editor de código HTML de toda la plantilla de correo electrónico haciendo clic en el botón "Editor de código" por encima de la plantilla;

  • insertar el script incrustado justo encima del atributo de cierre</head> ;

Stripo Cómo crear correos electrónicos AMP con Stripo insertando el script incrustado.

  • cierra el editor de código.

Termina tu plantilla añadiendo elementos como el pie de página, la cabecera, la información de contacto, etc.

Paso 4. Construir un fallback

Aquellos destinatarios cuyos clientes de correo electrónico soportan AMP verán este carrusel de imágenes AMP, mientras que otros - no. Por lo tanto, tenemos que crear un banner perfecto para ellos también, como alternativa.

Para ello, es necesario:

  • arrastrar la estructura de una columna a tu plantilla;

  • en el panel de configuración en la sección "Incluir en", elegir la versión "HTML" de su correo electrónico;

Incluido en HTML bouton

Forma 5. Extrayendo información de las hojas de cálculo de Google

Conectando el contenido de los correos electrónicos con Google Spreadsheets — obtienes contenido actualizado en tiempo real en los correos electrónicos después de haberlos enviado. Como resultado, los usuarios siempre ven sólo los precios reales de los productos, y las descripciones, sin importar cuándo abran el correo electrónico.

Actualización de datos en correos electrónicos mediante la actualización de información en Google SheetsNo es necesario diseñar estos correos electrónicos cada vez que se lanza una nueva campaña. Los construye una vez y guarda este elemento en su biblioteca personal de Content Modules.

Cuando construyas un nuevo correo electrónico, sólo tienes que arrastrar este módulo a tu plantilla y actualizar la información sobre los productos/posiciones del blog/vídeos recientes en tus hojas de cálculo de Google. Y la información en el correo electrónico se actualiza automáticamente.

Dado que se trata de un proceso complejo y que requiere una serie de pasos, incluyendo la construcción de un archivo JSON y la construcción de un punto final, no lo describiremos aquí. Sin embargo, estamos convencidos de que los resultados de las campañas con contenido en tiempo real superarán las expectativas.

Para obtener más información sobre cómo conectar los correos electrónicos con las Google Spreadsheets, consulte nuestra publicación del blog, u observa un video breve.

Forma 6. Codificando los correos electrónicos por su cuenta con guías

Hemos compartido 5 formas diferentes de construir correos electrónicos AMP. La sexta no es la más fácil, ya que requiere un código personalizado. Pero vale la pena darle una oportunidad. ¿Por qué?

En primer lugar, proporcionamos guías paso a paso para ayudarte a construirlos. En segundo lugar, se utilizan sobre todo en la gamificación, que como sabemos, anima nuestros boletines:

  • construyendo cuestionarios — ejecutar varias pruebas, cuestionarios. Se utilizan sobre todo en los correos electrónicos gamificados;

  • construir boletines con el contenido que se actualiza en los correos electrónicos después de ser enviados para proporcionar a los usuarios sólo información fresca. Se utiliza sobre todo en los correos electrónicos de bienvenida;

  • construir laberintos — para utilizar la gamificación en los correos electrónicos. Se utiliza en correos electrónicos de promoción y de vacaciones.

Father-Day_Labirynth

Hay muchas más guías por venir. Actualmente estamos trabajando en varias de ellas.

El servicio Stripo Data

El servicio Stripo Data fue diseñado para almacenar todas las respuestas de los usuarios de los formularios AMP/ratings incrustados en los correos electrónicos, y toda la información que los usuarios comparten con usted a través de esos formularios, incluyendo sus direcciones de correo electrónico, números de teléfono, sus preferencias, y su NPS.

Como dijimos anteriormente, puedes conectar tu almacenamiento personalizado, incluyendo las Google Spreadsheets, a través de Zapier utilizando nuestro Servicio de Datos. Esto evita que tengas que configurar CORS por tu parte y construir un endpoint personalizado con la ayuda de tus programadores y sin conocimientos de codificación. Te ahorra mucho tiempo

El servicio de datos también se utiliza para muchos elementos de gamificación donde una acción en los correos electrónicos envía una solicitud a un servidor.

Para conectar el servicio de datos de Stripo a los formularios AMP, necesitas:

  • crear tu servicio de datos;

  • copiar el punto final;

Construyendo un nuevo servicio de datos en Stripo Formas de construir correos electrónicos AMP

  • pégalo en tu plantilla si trabajas con módulos o plantillas preconstruidas;

Insertar-dirección-URL-en-formulario-AMP

  • o simplemente elige un "Servicio de recogida de datos" necesario al configurar el bloque de formularios de AMP. Por lo que te recomendamos que les des nombres claros y descriptivos, quizá incluso con fechas si piensas pedir a los usuarios su opinión con frecuencia.

Elegir-servicio-de-datos_ENG

Para más información sobre el Servicio de Datos de Stripo, consulta nuestra publicación de blog dedicada.

La fuente de datos de Stripo

Otra herramienta que te permite sacar el máximo provecho de AMP para la tecnología del correo electrónico.

Para habilitar el contenido en tiempo real, las actualizaciones en los correos electrónicos después de haber sido enviados, la gamificación - es necesario utilizar el componente amp-list. Proporciona una manera de actualizar el contenido. En los casos con gamificación, muestra a los usuarios sus resultados de inmediato, también conocido como sistema de retroalimentación, y permite el siguiente paso del juego.

Superman

Y este componente requiere estar conectado a una Fuente de Datos.

Por supuesto, usted puede utilizar el suyo. Pero la fuente de datos de Stripo:

  • establece las cabeceras CORS decuadas que son vitales para los correos electrónicos AMP;

  • crea un endpoint para cada campaña de correo electrónico con componentes AMP.

Lo hacemos todo para ayudarte a construir correos electrónicos AMP mucho más rápido. Nuestra fuente de datos le ahorra horas, si no dice días, en la construcción de correos electrónicos AMP.

Actualmente, hay dos maneras de utilizar nuestra Fuente de Datos:

  • conectando los archivos JSON a los correos electrónicos - para información detallada sobre cómo conectar los correos electrónicos a un archivo JSON, por favor consulta una publicación de blog dedicada nuestra;

  • conectando los correos electrónicos a las Google Spreadsheets - para información detallada sobre cómo conectar los correos electrónicos a las Google Spreadsheets, por favor consulte esta publicación de post.

Pegar archivo JSON preparado

Cómo previsualizar los correos electrónicos AMP con Stripo

Este es un paso muy esencial en la construcción de cualquier tipo de correos electrónicos: tanto AMP HTML como los correos electrónicos HTML tradicionales.

  • para previsualizar el correo electrónico AMP HTML con Stripo, haz clic en el botón de previsualización situado encima de la plantilla;

  • en el panel de configuración en el modo de vista previa del correo electrónico, haz clic en la versión necesaria de tu correo electrónico;

  • para comprobar la otra versión de tu correo electrónico, simplemente cambia el botón;

  • si ves una notificación de Error, como la de abajo, esto significa que hay un error en el código de tu correo electrónico;

Validación de código en modo de vista previa

  • haz clic en la notificación para ver qué errores hay en tu código;

Validación de correos electrónicos de AMP en modo de vista previa con Stripo

  • arregla esos errores. Para volver al código del correo electrónico, sólo tienes que hacer clic en el botón "Arreglar en el editor;

  • una vez que los errores se fijan, validar su código de correo electrónico una vez más haciendo clic en el mensaje de notificación "Error" a la derecha en el editor, y repetir la comprobación.

Validación de correos electrónicos AMP con corrección de errores de Stripo

(Mi comprobación en el GIF todavía muestra tres errores porque no he arreglado nada;)

Cómo probar los correos electrónicos AMP con Stripo

Dado que los correos electrónicos AMP son dinámicos, y necesitamos comprobar si funcionan bien, ejecutar una prueba de captura de pantalla no será suficiente. Así que tenemos que enviar correos electrónicos de prueba a nuestras direcciones de correo electrónico y abrir esos correos tanto en dispositivos móviles como de escritorio.

Para poder enviar correos electrónicos de prueba desde Stripo a Gmail, tienes que permitirnos enviar correos electrónicos de prueba a tu cuenta.

Si se trata de tu cuenta personal, necesitas:

  • en Gmail, ir al panel de configuración - hacer clic en el icono "Configuración;

  • en el menú desplegable, hacer clic en la sección "Configuración;

Creación de correos electrónicos AMP con configuración de Stripo en Gmail

  • en la nueva ventana, en la sección "General", buscar el "Contenido dinámico" y abrir la "Configuración del desarrollador";

Creación de correos electrónicos AMP que habilitan contenido dinámico para Gmail

  • pega esta dirección de correo electrónico info@stripo-test.email;

Agregar Stripo como remitente de confianza

  • hacer clic en guardar.

Si esta es tu cuenta corporativa con Workspace (antes G-Suite), necesitas:

Pedir a tu gestor que te habilite los "Correos electrónicos dinámicos". Y entonces sólo tendrás que añadir nuestra dirección para recibir correos electrónicos de prueba potenciados por AMP de Stripo.

Por favor, ten en cuenta: Los cambios entran en vigor en 24 horas.

Cómo exportar correos electrónicos AMP a tu ESP

Stripo permite exportar correos electrónicos directamente a ciertos ESP. Sólo tienes que exportarlos como correos electrónicos normales.

Exportar a ESP ES

Si tu ESP soporta AMP, pero no hemos habilitado la exportación directa de los emails AMP, sólo tienes que descargar tu email como el archivo AMP HTML. Y abrirlo en su ESP.

Los destinatarios cuyos clientes de correo electrónico no soportan AMP verán el correo electrónico HTML tradicional; mientras que aquellos cuyos clientes de correo electrónico sí soportan AMP, verán tus sofisticados correos electrónicos. Recuerda que hemos aprendido a ocultar los elementos AMP en los correos electrónicos normales.Descarga de correos electrónicos de AMP para importar en ESP

Un consejo

Este es un recordatorio amistoso. Para poder enviar contenido AMP, necesitas:

  • entrar en la whitelisted con Google, Mail.ru, y Yahoo. Ahora puedes hacerlo enviando sólo un breve formulario;

  • arreglar todos los errores si se produce alguno. Los verás en el modo de Vista Previa (de lo contrario, los usuarios verán el correo electrónico HTML);

  • añadir el fallback - versión HTML - en este correo electrónico;

  • asegurarte de que tu ESP/CRM es capaz de enviar correos electrónicos AMP;

  • tener en cuenta que actualmente Gmail, Yahoo, y Mail.ru son capaces de renderizar los correos electrónicos AMP tanto en la web como en las aplicaciones móviles;

  • Los correos electrónicos AMP pierden sus componentes AMP si los reenvías.

  • Encuentra más formas e ideas sobre cómo utilizar AMP en los correos electrónicos en nuestra publicación de blog dedicada.

Si tienes alguna duda, pregunta en los comentarios de abajo.

Bart Tutaj hace 2 años

This is awesome, just like everything I've seen so far from Stripo. One _small_ detail, though, after spending years in front of Photoshop resizing images for large corporates: the proportional resize from 800x600 is 640x480. That correctly maintains the aspect ratio. :)

Bart Tutaj comentado en Bart Tutaj hace 2 años

If you _do_ need 600 pixels in width, the proportional height to go for would be 450px. :)

Hanna Kuznietsova comentado en Bart Tutaj hace 2 años

Bart, thank you so much for your feedback — we are glad you like our tool. And thank you for this valuable comment on the ratio :) It’s highly appreciated. You are right: it should be 600x450 )))

Te podría interesar

anterior siguiente
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
24 septiembre 2021 · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Es fácil trabajar con las fuentes en los correos...

Diseño Plantillas
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
banner9
11 septiembre 2020 · 15 min. leídos
10 Mejores Creadores de Plantillas Para Email Gratuitos del 2021

¿Todos los creadores de plantillas para email lucen similares? ¿Estás confundido sobre cuál usar para crear las mejores plantillas para email? Por supuesto, hay muchos de ellos. Vamos a analizar varios de ellos para encontrar sus características que los distinguen. Intentaré crear la misma plantilla en todos los editores para los mismos archivos de medios. Veamos en qué difieren los creadores. Para esto hemos elegido Stripo.email y sus competidores: BEE Free, CampaignMonitor, EDM Designer, GetResponse, Mailchimp, MailStyler2, Mosaico, Topol.io, Unlayer. Algunas...

Diseño Marketing Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones