Diseño Plantillas How-to AMP Gamificación
~ 9 min. leídos
29202 vistas
valóralo
15 junio 2020

Creando Cuestionarios AMP con Stripo Usando Módulos Prediseñados

Stripo / Blog / Creando Cuestionarios AMP con Stripo Usando Módulos Prediseñados

Hola a todos.

Hoy iniciamos nuestra serie de tutoriales donde mostraremos cómo crear emails AMP antes de que escribas un párrafo de texto promocional.

Pequeña introducción

Como ya probablemente sepas, el mes pasado lanzamos nuestra serie de Preguntas Stripo AMP. Consistía en 3 emails, cada uno con elementos de gamificación. El objetivo de esta campaña era demostrar a nuestros lectores algunas de las capacidades de la tecnología AMP. 

Como resultado, recibimos literalmente miles de respuestas, como “¿Cómo creo esos emails para mis campañas?”.

Por eso decidimos hacer estos tutoriales.

Comencemos con el cuestionario AMP, ya que fue nuestro primer email de la serie de Preguntas...

Cómo crear cuestionarios AMP con Stripo

Normalmente, para crear este elemento de email, tendrías que usar código AMP, insertar múltiples componentes amp en tus emails, conectarlos a tus servidores con ayuda de los desarrolladores para activar AMP en los emails. Con nosotros se ha vuelto mucho más sencillo...

Tan solo sigue nuestra guía paso a paso y diseñarás este email para tus campañas tú solo.

Paso 1. Colocar un módulo AMP prediseñado en tu plantilla

Para tu conveniencia, he creado un módulo “Cuestionario AMP” listo para usar. Consiste en tres preguntas. De hecho, como base, utilizamos nuestro email 1 de la serie, quitamos toda la identidad de Stripo y nuestra introducción. Eso es todo.

Entonces tu módulo tendrá tres secciones para preguntas.

Colocas este módulo en tu plantilla. Está incluido en la versión AMP HTML por defecto. Screen-of-Entire-AMP-Module

Para colocar el módulo en una plantilla, por favor:

  • arrastra una plantilla de 1 contenedor en tu email;

  • ve a la sección "Módulos”;

  • ingresa a la pestaña “prediseñado”;

  • Ingresa “Cuestionario”;

  • solo arrastra este módulo a tu plantilla.

Aquí podrás editar los colores; los colores para la palabra “Pregunta” y su fondo ,y los colores para los campos con respuesta.

Para hacer esto, haz clic en el ícono “Estructura”, luego abre el editor de código como se muestra a continuación:

Editando la sección “Pregunta”Editing-Colors-for-the-Module

Necesitas reemplazar los colores existentes con los colores que necesites pegando los números de colores de nuestra paleta.

Para obtener los números del color, comienza a editar el texto y diseñar los botones, y en la paleta de colores copia el número de color necesario.Editing-the-Answer-Section

Editando el diseño de los campos "Respuestas”

En los campos “Respuestas”, muestras si la respuesta era correcta o incorrecta.

Para encontrarlas en tu código, baja:

Replacing-Colors-for-Answer-Option-Section

  • donde “a1” es para la respuesta correcta;

  • “a0” es para la respuesta incorrecta.

Aquí podrás reemplazar el color de fondo y de borde.

Por defecto, cuando los usuarios dan la respuesta incorrecta, el “campo Respuesta” se vuelve rojo, cuando la respuesta es correcta, se vuelve verde.

¿Y qué pasa con otros elementos, como las preguntas en sí, las imágenes, y los números de las secciones? Las editas en tu archivo JSON.

Por cierto, este módulo ya está conectado con el archivo JSON. No necesitas cambiar nada. Trabajaremos solamente con el archivo JSON.

Paso 2. Trabajar en las preguntas/Editar un archivo JSON

Sí, necesitas un archivo JSON para crear tu Fuente de Datos: el cuestionario.

Este archivo tomará la información/preguntas de tus servidores a los emails.

El archivo JSON utiliza el código de muestra que se muestra a continuación (el que usamos para nuestra campaña):

{
  "items": [
    {
      "id": 1,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
      "question": "How to pronounce our service’s name?",
      "text": "Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "wrongtext": "Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|). Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "c": "1",
      "answers": [
        {
          "ida": 1,
          "answer": "|strɪpe-oh| ( |straɪp-oʊ| )"
        },
        {
          "ida": 2,
          "answer": "|strɪp-oh| ( |strɪp-oʊ| )"
        }
      ]
    },
    {
      "id": 2,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
      "question": "What is the most popular email client in the world?",
      "text": "According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies here.",
      "wrongtext": "Oops. The correct answer is “Gmail”. According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study here.",
      "c": "2",
      "answers": [
        {
          "ida": 1,
          "answer": "Outlook"
        },
        {
          "ida": 2,
          "answer": "Gmail"
        },
        {
          "ida": 3,
          "answer": "Apple iPhone"
        },
        {
          "ida": 4,
          "answer": "Apple Mail"
        }
      ]
    },
    {
      "id": 3,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
      "question": "How to update a header or a footer in a hundred emails with Stripo at once?",
      "text": "Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S. You can always email our support team. We’re there for you ;)",
      "wrongtext": "Oops. The correct answer is “Use synchronized modules”. Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S.: You can always email our support team. We’re there for you ;)",
      "c": "3",
      "answers": [
        {
          "ida": 1,
          "answer": "Email our support team, they’ll do it for you"
        },
        {
          "ida": 2,
          "answer": "Use smart elements"
        },
        {
          "ida": 3,
          "answer": "Use synchronized modules"
        },
        {
          "ida": 4,
          "answer": "Hire a team of 100 people"
        }
      ]
    }
  ]
}

Donde “id” es la sección con preguntas:

  • “id1”: es la sección con la pregunta 1. Todos los elementos de “id1” a “id2” pertenecen a la pregunta 1:

  • “img”: enlace a la imagen que usarás en tu cuestionario;

  • “question”: es la pregunta en sí;

  • ”wrongtext”: es el texto que los usuarios verán si dan la respuesta incorrecta;

  • “ida1-4”: son las respuestas dadas a los usuarios.

Editar esta información manualmente:

  • “img": “enlace a tu imagen”,

  • "question": “¿La pregunta?”,

  • "text": “texto que aparece una vez que el usuario da una respuesta”,

  • "wrongtext": “esto es lo que los usuarios ven cuando dan la respuesta incorrecta”,

  •  “ida": 1,
    "answer": "opción de respuesta 1"

  •   “ida": 2,
    "answer": "opción de respuesta 2"

Haz lo mismo para cada sección.

Nuestro código contiene tres secciones de pregunta. Si solo quieres dos, quita el texto resaltado en tu archivo JSON.

Si quieres que todas las preguntas tengan 4 opciones de respuesta, entonces quita la sección 1 y duplica la sección 2 en el archivo JSON. Removing-Sections-from-JSON

Paso 3. Conectar emails a una fuente de datos

Este paso es necesario para poner datos del archivo JSON a los cuestionarios, y para mostrar a los usuarios si sus respuestas eran correctas o incorrectas (los usuarios envían las respuestas, y nuestra Fuente de Datos muestra si la respuesta era correcta, y le da la respuesta al usuario)

  • abre la pestaña “Datos”;

  • ve a la sección “Fuente de Datos”;

  • crea una nueva fuente de datos;

  • ingresa el nombre de esta campaña (puede ser cualquier cosa);

  • en una nueva sección debajo, pega tu archivo JSON;

  • copia la dirección URL.

Paso 4. Trabajar con el almacenamiento de datos/Elegir a dónde enviar las respuestas de los usuarios

Necesitamos crear un servicio de datos: un lugar donde almacenar las respuestas de los usuarios.

Si deseas guardar los datos en los servidores de Stripo, activa el botón “almacenamiento en Stripo”.

Si planeas almacenar los datos en Google Drive (Hoja de Datos), sigue los pasos en nuestra publicación en el blog “Servicio de Datos Stripo”.

Paso 5. Insertar extremos en los emails

Ahora, para conectar nuestro cuestionario con nuestros servidores y almacenamiento de datos, para activar el cuestionario AMP en nuestros emails debemos insertar los extremos que hemos creado:

  • haz clic en el ícono⚡ “Estructura” HTML;

  • abre el editor de código;

Editing-Colors-for-the-Module

  • reemplaza el enlace que va después de la sección “action-xhr” en la línea <form id...> con la dirección URL generada en el Paso 4;

  • reemplaza el enlace que va después de la línea <amp-list...> con la dirección URL generada en el Paso 3;

Inserting-URL-Links

  • eso es todo.

Paso 6. Crear una versión de respaldo/HMTL de un cuestionario

Necesitamos crear una versión de respaldo/HTML del cuestionario para los clientes de email que aún no soporten AMP.

Recientemente creamos una publicación donde mostramos 10 emails de invitación a un cuestionario. Esperamos que encuentres inspiración allí.

Normalmente, en estos emails, los marketers incluyen enlaces a Google Forms o cuestionarios en sitios, donde los usuarios pueden hacer el cuestionario...

Email-Invitation-to-Participate-in-Survey

(Invitación a cuestionario de Litmus)

Para agregar este enlace a tus emails, por favor:

  • arrastra la estructura de 1-contenedor justo debajo o encima de la estructura que contiene el cuestionario AMP HTML;

  • complétala con el contenido necesario;

  • arrastra el bloque básico “Botón” a esta estructura;

  • diséñalo a gusto;

  • pega tu URL;

  • incluye esta estructura en tu versión HTML de este email.

Estructura HTML es

Importante:

Todos los demás elementos de este email, como el logo, información de contacto, serán incluidos en ambas versiones de esta campaña.

Si quieres que tus usuarios vean la Encuesta que hemos creado en el Paso 5 podrías incluir el enlace a la versión web de nuestro email AMP en lugar de hacerlo a Google Forms.

Para obtener este enlace, por favor:
  • ingresa al modo Vista Previa;

  • haz clic en «AMP HTML» en la esquina superior derecha;

  • haz clic en el ícono “Copiar”.

Palabras finales

Hemos creado un email de cuestionario. Funciona en Gmail y Mail.ru, como todo elemento AMP. Otros usuarios verán la versión de respaldo.

Si te gustó nuestro cuestionario AMP, diseña uno similar por tu cuenta.

Andre Luiz Daleffi hace 1 año

Hey! Nice post, thanks for sharing the content. Took the steps, everything went well in the construction. The preview function shows everything correct too. But, the test function sends a blank email. Exporting to gmail or embedding the amphtml code also generates a blank email. What could it be? Thanks!

Andre Luiz Daleffi comentado en Andre Luiz Daleffi hace 1 año

Ps.: tried with Gmail

Hanna Kuznietsova comentado en Andre Luiz Daleffi hace 1 año

Andre, Thank you so much for your comment. We are sorry it did not work well for you. If your email was not blank and worked well in the preview mode, it means that you have not been whitelisted with Google as a sender. To test your AMP emails, please add our info@stripo-test.email email address as a trusted sender as shown in the screenshot https://prnt.sc/tazlyj . Find more details here https://stripo.email/blog/preview-and-send-test-email-in-stripo/#amp-html-emails To be allowed to send AMP emails to other recipients, you need to get whitelisted with Google. In this post, we share a step-by-step guide. https://stripo.email/blog/how-to-get-whitelisted-with-google-to-send-amp-emails-our-personal-experience/ Thank you for your interest in our blog and in the AMP functionality.

Te podría interesar

anterior siguiente
banner9
06 junio · 15 min. leídos
Los 10 mejores creadores de plantillas de correo electrónico para 2022

¿Todos los creadores de plantillas de correo electrónico parecen iguales? Ahora estás confundido sobre cuál elegir para tus campañas de correo electrónico, ¿no es así? No es de extrañar, ya que hay muchos. Vamos a hacer un estudio de los constructores más populares para encontrar sus características distintivas para ayudarle a encontrar el mejor constructor de correo electrónico HTML para sus necesidades actuales. Intentaré crear una plantilla en todos estos editores con los mismos archivos multimedia para ver si los...

Diseño Marketing Plantillas
24 mayo · 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. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Plantillas
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
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
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones