Diseño Estructura Plantillas How-to AMP
~ 9 min. leídos
30490 vistas
valóralo
04 junio 2020

Fuente de Datos Stripo, o Cómo Usar Listas AMP en Emails con Stripo

Stripo / Blog / Fuente de Datos Stripo, o Cómo Usar Listas AMP en Emails con Stripo

Las listas AMP están para ayudarte a implementar la gamificación, para poder subir contenido en tiempo real al email, y para que tus usuarios confirmen citas directamente en los emails.

En mayo hicimos nuestra Serie de Cuestionarios. Los resultados de este Cuestionario mostraron que la tecnología AMP junto con la gamificación ha tenido un impacto contenido en CTOR. Nuestros lectores interactuaron con el contenido en los emails AMP 1.5 veces más activamente que en los emails HTML. 

Pero ¿qué detiene a los email marketers a implementar AMP en sus campañas? Una de las principales dificultades que te encuentras aquí es la necesidad de conectar estos emails a un servidor.

Conectar los emails a servidores es un proceso que consume tiempo, pero para tu conveniencia, hemos lanzado Fuentes de Datos Stripo...

Fuentes de Datos Stripo: ¿Para qué son? 

Los emails AMP contienen contenido dinámico. Muy a menudo, requieren componentes amp-list.

Como dijimos, para brindar este tipo de contenido en los emails, necesitas mantener una conexión entre los emails y los servidores. Era bastante complicado, ya que requería de bastante habilidad en programación o pedir mucha ayuda a los programadores. Y tenías que hacer eso para cada campaña. Ahora estos procesos son completamente de parte nuestra.

Fuente de Datos Stripo:

  • establece encabezados CORS apropiados, algo vital para los emails AMP;

  • crea una terminal para cada campaña de email con componentes AMP.

Hacemos todo para ayudarte a crear emails AMP más rápidamente.

Nuestra Fuente de Datos te ahorra horas, si no días, en la creación de emails AMP.

Utilizando Fuente de Datos Stripo

Para usar Stripo como Fuente de Datos, deberás:

  • ingresar a la sección “Datos”;

  • ir a la pestaña “Fuentes de Datos”;

6541387

  • hacer clic en el botón “Conecte una nueva fuente de datos”;

una nueva fuenta es

  • en una nueva ventana, ingresa toda la información requerida sobre esta conexión en particular;

  • copiar la dirección URL;

configuraction de la fuente de datos

  • pegar el archivo JSON que has preparado previamente (o el que crearemos juntos) en la sección JSON;

Pasting-Prepared-JSON-File

  • listo.

Nota importante:

Te recomendamos nombrar esta fuente según la meta de tu email si vas a usar este componente en varias campañas.

Necesitarás editar tu JSON cada vez que aparezca una nueva publicación o videos en tu blog para dar las últimas publicaciones. Pero no deberás hacer ningún cambio a tus emails. Stripo transmitirá estos cambios/actualizaciones a tus emails mediante el endpoint (la dirección URL que crearemos ahora). Reemplazará imágenes, texto, etc. Así que no tendrás que editar o reemplazar los emails de bienvenida en tu ESP.

Por cierto, de esta forma puedes siempre mostrar solo las ventas nuevas y actuales en tus emails, sin importar cuándo sean visualizados.

El eCommerce puede mostrar sus productos más populares usando una amp-list en sus boletines promocionales y de bienvenida.

Crear el archivo JSON

Antes de personalizar el JSON, debes decidir qué misión tendrá la amp-list.

Quiero mostrar las últimas publicaciones del blog en los emails de bienvenida (no es en vano, ¿cierto?).

Como base para nuestro archivo JSON, usaremos una muestra proporcionada por Google.

{

  "items": [

    {

      "title": "AMP YouTube Channel",

      "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"

    },

    {

      "title": "AMP Start",

      "url": "https://ampstart.com/"

    }

  ]

}

Esta parte del JSON es repetitiva. Puedes pegarla tantas veces como necesites. 


También puedes agregar más elementos en cada sección. Recomendamos que edites una sección y luego copies y pegues las veces que necesites, porque es importante que cada sección tenga los mismos elementos. Repetitive-Element-on-JSON

Puedes editar tu JSON en cualquier editor de texto o en la app Sublime Text.

Los elementos dependen del contexto en que los mostrarás.

Quiero que mis lectores vean:

  • imagen de portada;

  • título;

  • descripción corta;

  • el botón “Seguir leyendo”.

Entonces, este es el JSON que utilizaré para los emails de bienvenida:

{

  "items": [

    {

      "title": "Father’s Day: 33 Catchy Email Subject Lines and Email Examples",

      "url": "https://stripo.email/blog/20-catchy-fathers-day-email-subject-lines-marketing-ideas/",

      "imgUrl": "https://stripo.email/photos/shares/Blog/Stripo-Fathers-Day-Featured-Image.jpg",

      "text": "According to NRF, in the United States alone on Father’s Day, people spent upwards of $16 billion in 2019. You will need to run a heartfelt email marketing..."

    },

    {

      "title": "10 Best Ways to Use AMP in Emails",

      "url": "https://stripo.email/blog/ways-to-use-amp-in-emails/",

       "imgUrl": "https://stripo.email/photos/shares/Blog//AMP_Ways-to-Use-AMP_Stripo_Featured-Image.png",

      "text": "AMP is proven to be effective. It does increase conversion by at least FIVE times. All Gmail and Mail.ru users are now able to see AMP in their inboxes. Yahoo users will join them soon, too...."

    }

  ]

}

Donde:

  • title — es un título de una publicación del blog;

  • url — es un enlace a esta publicación;

  • imgUrl — es un enlace a la imagen de portada de la publicación;

  • text — es una pequeña descripción/anotación. 

Nota importante:

Todo el texto que va después de cada punto y coma en las comillas debería ser reemplazado con tu contenido. Ahora lo haces de forma manual.

Por ejemplo:

  • "title": “el título de tu publicación”;

  • "url": "enlace a tu publicación",

  • "imgUrl": “enlace a la imagen”;

  • "text": “descripción/anotación”.

Solo insertas tu código en Fuente de Datos Stripo, en la sección JSON. 

Pasting-JSON-and-Copying-Links

Crear emails con listas AMP

Ahora que tenemos nuestra URL, la cual es un endpoint, podemos insertarla en nuestros emails de bienvenida.

Paso 1. Diseñar emails de bienvenida

Bien, antes que nada, debemos diseñar nuestros emails. 

Entonces trabajas en la parte de diseño del email donde colocarás las publicaciones del blog.

El mío tendrá este orden:

My-Blog-Posts-Area

  • imagen de portada;

  • título;

  • anotación;

  • botón.

Es importante establecer el tamaño adecuado para tu imagen de portada, fijas las proporciones aquí una sola vez.

Asegúrate de que todos los elementos pertenezcan a una sola estructura.

Paso 2. Insertar tu endpoint en el email

Esta es la parte más interesante...

Pero no es tan complicado como puede parecer a primera vista.

Sin embargo, si sigues nuestra guía paso a paso, tu email funcionará:

  • necesitas obtener el código de la estructura que hemos creado. Para esto, debes hacer clic en el ícono “Estructura” en tu plantilla, luego abrir el editor de código;

  • copia el código que comienza con <table width="100%" cellspacing…>;

  • lleva una nueva estructura de 1 contenedor exactamente donde deseas colocar tus publicaciones del blog;

  • arrastra el bloque básico “HTML”;

  • haz doble clic en este bloque para abrir su código;

Activating-HTML-Block-with-Double-Click

  • pega el elemento del código que hemos copiado en el paso anterior;

  • ahora, inserta el siguiente código de muestra en el código del bloque:

<amp-list layout="fixed-height" height="360" width="auto" src="https://stripo.email/emailformdata/v1/list/ecxs/stripo-welcome-emails">  <template type="amp-mustache">

Donde https://amp.stripo.email/v1/list/haig/welcome-emailsstripo-1 es el endpoint que hemos generado en la sección “Crear el archivo JSON”;

  • por favor, insértalo justo al inicio del código del bloque;

Inserting-AMP-Code

  • inserta las siguientes etiquetas de cierre al final de tu bloque;

</template> 
</amp-list>

Closing-Tags_HMTL-Block

  • la parte resaltada del código (que lleva a la imagen) 

Code to Replace in the Code Editor_Stripo Source

debería ser reemplazada con

<a href="{{url}}" target="_blank">

<amp-img width="540" height="180" alt="{{title}}" src="{{imgUrl}}" layout="responsive"></amp-img>

                                                                            </a>

(Establece el ancho y alto de la imagen que te sea más apropiada).

Importante:

No hace falta insertar otro script en el <head> del email porque Stripo lo añade automáticamente.

Esto es necesario para mostrar imágenes en los emails AMP;

  • ahora, reemplaza todos los enlaces que están después de <a href> con {{url}} - ¡Importante! Debe ir entre comillas. Y no quites ninguna llave;

  • un enlace que va después de src debe ser reemplazado con {{imgUrl}};

  • el texto alternativo para la imagen debe ser reemplazado con {{title}};

  • la anotación que va en blanco debe ser reemplazada con {{text}} - no usar comillas aquí;

  • así luce mi código terminado:

Finalized-Custom-COde

  • míralo, el único enlace real que contiene el código, ese es tu endpoint;

  • todos los demás datos serán tomados de tu JSON;

  • incluyendo toda la “Estructura” que contiene nuestro bloque HTML en ⚡HTML;

The-Include-in-AMP-Control

  • por favor, haz una vista previa de tu plantilla - si está bien hecho, verás tus publicaciones en el email.

My-Welcome-Email

Importante:

Insertas este código una sola vez, agregará tanto contenido como necesite (la cantidad que establezcas en tu archivo JSON. 2 en nuestro caso). No hace falta hacerlo dos veces si lo que quieres es compartir dos publicaciones en un email.

Paso 3. Crear una alternativa

Hay muchas opciones para esta alternativa, pero mostraremos las dos más populares:

Opción 1. Mostrar las publicaciones más populares o las más útiles

Si deseas que los nuevos comiencen a usar tu servicio de inmediato y quieres ayudarles, deberías brindarles las publicaciones o guías más informativas sobre cómo sacar el mejor provecho de tu herramienta. 

Welcome-Email-by-Zapier

(Fuente: Email de bienvenida con integraciones populares de Zapier)

En el párrafo del “Paso 1”, diseñamos nuestro email de bienvenida con el área de publicaciones el blog.

Solo debes asegurarte de que será visible solamente en la versión HTML de tu email:

  • haz clic en el ícono “Estructura”;

  • en el panel de ajustes, activa la opción “Incluir en HTML”.

Including-Structures-in-HTML-Emails

Opción 2. Direccionar a los usuarios a tu sitio web

Si deseas dar a tus lectores contenido nuevo, pero no quieres actualizar tus emails de bienvenida cada semana, entonces podrías decirles que pueden encontrar bastante información útil y nueva en tu blog.

Directing-Users-to-Blog_Data-Source

(Fuente: Email de bienvenida con una invitación para ver el sitio web para mirar el catálogo completo, de Warner Bros Games).

Crear la unidad de contenido necesaria 

  • arrastra una estructura de 1 contenedor a tu plantilla;

  • diséñala a gusto;

  • ingresa el texto CTA necesario;

  • suelta el bloque “Botón” a esta estructura;

  • pega un enlace a tu blog;

  • haz clic en el ícono “Estructura” en tu plantilla;

  • incluye esta estructura solo en el email HTML (como se muestra en la sección “Opción 1”).

Palabras finales

Usando listas AMP puedes implementar la gamificación, mostrar contenido nuevo en los emails en tiempo real (como tus horarios de disponibilidad para reuniones y demostraciones, productos disponibles en stock, o el último contenido de tu blog).

Usando Fuente de Datos Stripo, creas emails dinámicos, con el componente amp-list, de cualquier complejidad sin necesidad de una política CORS para cada campaña y sin tener que conectar los emails a tu servidor, nosotros nos encargamos de eso.

Hacemos que la producción de emails AMP sea más fácil.

Prueba Stripo

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