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. 

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”

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.

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:

• 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":[
      {
         "questions":[
            {
               "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ʊ|).<br>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 <a href='http://emailclientmarketshare.com/' target='_blank'>here</a>.",
               "wrongtext":"Oops. The correct answer is “Gmail”.<br>According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study <a href='http://emailclientmarketshare.com/' target='_blank'>here</a>.",
               "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 <a href='https://stripo.email/blog/synchronized-modules-or-how-to-update-all-your-emails-at-once/' target='_blank'>in our article</a>.<br>P.S. You can always email our support team. We’re there for you ;)",
               "wrongtext":"Oops. The correct answer is “Use synchronized modules”.<br>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 <a href='https://stripo.email/blog/synchronized-modules-or-how-to-update-all-your-emails-at-once/' target='_blank'>in our article</a>.<br>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"
                  }
               ]
            }
         ],
         "results":[
            {
               "titleWrong":"Good job.",
               "textWrong":"Everything is 10% off with this discount code:",
               "promocodeWrong":"SALE10",
               "outlookText":"Check your answers and get a discount. Correct answers: 1a, 2b, 3с.",
               "titleRight":"Amazing!",
               "textRight":"Everything is 30% off with this discount code:",
               "promocodeRight":"MEGASALE"
            }
         ]
      }
   ]
}

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. 

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;

• 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;

• eso es todo.

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

Debemos crear una versión alternativa/HTML del cuestionario para aquellos cuyos clientes de correo electrónico aún no sean compatibles con AMP.

Anteriormente, se añadía un enlace a la versión web del correo electrónico o se codificaba una versión alternativa para que los destinatarios pudieran responder a las preguntas del cuestionario y divertirse.

Ahora hemos desarrollado un Generador de Fallbacks para ayudarte a crear fallbacks para tus cuestionarios en cuestión de segundos sin necesidad de ocuparte del código.

Importante tener en cuenta:

Actualmente, este generador funciona sólo para cuestionarios. En el futuro, cubrirá muchos más juegos.

Cómo funciona este generador:

• el enlace de la fuente de datos que generó en el paso 3 en el campo de entrada que aparece a continuación en lugar de nuestro enlace marcador de posición;
• haz clic en el botón "Generar";
• copia el código.

Copiar Código
Copiado

Para añadir este fallback a los emails de tu cuestionario, por favor:

• la estructura de 1 contenedor justo debajo/encima de la estructura que contiene su cuestionario AMP HTML;
• el bloque básico "HTML
• doble clic en este bloque para abrirlo;
• el código;
• esta estructura en la versión HTML del correo electrónico de este cuestionario.

Por favor, ten en cuenta que este fallback funcionará:

• correo electrónico interactivo en Apple Mail;
• texto con opciones de respuesta en Outlook.

Sí, en Outlook, sus destinatarios no podrán jugar al juego, pero verán las preguntas y respuestas y verán el código promocional al final del correo electrónico.

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.