Diseño Plantillas How-to AMP
~ 9 min. leídos
3 comentarios
5613 vistas
valóralo
15 junio

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

Running-Quizzes_AMP-EmailsNormalmente, 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.

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

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.

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-EmailAquí 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:

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

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

Editing-the-Answer-SectionPara 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.

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.

Removing-Sections-from-JSONSi 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. 

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.

Creating-New-Data-Source

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”.

Building-a-New-Data-Storage-by-Using-Stripo-Data-Service

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”.

Getting-Shareable-Link

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 3 meses

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 3 meses

Ps.: tried with Gmail

Hanna Kuznietsova comentado en Andre Luiz Daleffi hace 3 meses

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 →
09 octubre · 16 min. leídos
16 Mejores Prácticas para Diseño de Encabezado de Email

El encabezado del email es el elemento que usas regularmente en tus emails de boletines. Pero muy a menudo olvidamos que es más complejo que solo un logo y un menú. El encabezado de boletín completo consiste de tres partes esenciales: información sobre el remitente; la línea de asunto, y el preencabezado; el encabezado en sí. En esta publicación te mostraremos cómo hacer la línea de asunto y el preencabezado. Y te mostraremos 16 ideas de encabezado para que tus emails...

Diseño Plantillas How-to
Use-Data-from-Google_Featured Image
25 septiembre · 9 min. leídos
Cómo Extraer Datos de Google Sheets a los Emails

¿Alguna vez pensaste en extraer datos de Google Sheets a los emails para automatizar el proceso de producción/actualización de email?  Bueno, es posible. Incluso es posible hacerlo sin tu interferencia. Queremos recordarte qué es el contenido en tiempo real: El contenido en tiempo real, o contenido dinámico, te permite actualizar el contenido del email después de que haya sido enviado. Esto quiere decir que los usuarios siempre verán contenido nuevo, precios y descripciones actualizadas, no verán los anuncios de ofertas...

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