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

Servicio de Datos Stripo, o Cómo Crear Formularios AMP Más Rápido

Stripo / Blog / Servicio de Datos Stripo, o Cómo Crear Formularios AMP Más Rápido

Hoy Stripo lanzó su Servicio de Datos. Ahora mostraremos para qué es, cómo usarlo para llevar tu email marketing a otro nivel.

Introducción o para qué usar emails AMP

Muy a menudo le pedimos a los usuarios que nos puntúen, que nos dejen comentarios, les pedimos que compartan su información de contacto, edad, género, etc. Los formularios y cuestionarios son una parte integral del email marketing.

¿Por qué AMP en primer lugar? Nuestras pruebas mostraron que la conversión de emails AMP era 5 veces mayor que la de los emails HTML tradicionales.

Compartiremos estos resultados con ustedes.

Leaving-Feedback-in-Email

Servicio de Datos Stripo: Para qué es y cómo se usa

Utilizando los revolucionarios formularios AMP, podrás tomar las direcciones de email, números de teléfono, usar casillas, e incluso medir tu NPS en los emails. Todo esto en el email.

Checkboxes-in-EmailsAsí es... Pero para poder medir y procesar estos resultados, tienes que establecer un CORS de tu lado, crear endpoints en tus servidores y conectar tus emails al servicio de datos. Esto lleva mucho tiempo, requiere de habilidades de programación o ayuda de los programadores.

Nosotros en Stripo lo hacemos por ti: te dejamos crear servicios de datos con solo unos clics (sin saber programación), donde almacenes las respuestas de los usuarios. ¡Tienes acceso en todo momento!

Ahora, vamos a crear un Servicio de Datos y usarlo en nuestro email con formulario AMP.

¿Listo para probarlo? Vamos a hacerlo juntos...

Paso 1. Crear un nuevo servicio

Ten en cuenta que puedes usar nuestro Servicio de Datos, o usar cualquier endpoint externo, incluso los que creas con Zapier. 

Opción 1. Elegir Almacenamiento de Datos Stripo

Si deseas almacenar las respuestas de los usuarios en nuestro lugar, ya que es mucho más fácil que crear un nuevo servidor por cada campaña de email, entonces debes usar nuestro Servicio de Datos. Tendrás acceso a este servicio de datos en todo momento. 

Entonces, para crear un nuevo Servicio con Stripo, tienes que:

  • en tu cuenta Stripo, hacer clic en la pestaña “datos” que se encuentra en el lateral izquierdo de la pantalla;

  • en una nueva ventana, elegir la pestaña “Servicios”;

datas servicios es

  • hacer clic en el botón “+ Crear servicio”.

  • aparecerá la ventana “Configuración de Servicio” Aquí deberás darle un nombre a tu Servicio de Datos e ingresar una pequeña descripción, el nombre es obligatorio, la descripción no.

  • todos los demás campos son completados automáticamente;

  • copiar la dirección URL para la futura campaña.

configurazion del servicio es

Nota importante:

Recomendamos que nombres este servicio con el nombre de tu campaña de email. Creemos que esto hará que sea más fácil encontrar y analizar los datos necesarios en tu cuenta Stripo después de terminar la campaña de email.

  • en la sección debajo, activar el botón “Almacenamiento Stripo”.

lugar dealmacenamiento es

Opción 2. Elegir Zapier como Almacenamiento de Datos

Para usar Zapier como Almacenamiento de Datos, necesitas hacer todos los pasos descritos anteriormente, pero en lugar de elegir Stripo como almacenamiento de datos, tendrás que:

  • elegir "Recursos de almacenamiento externo";

  • pegar el enlace a tu Zapier Webhook: crearemos uno ahora.

webhook zapier es

Creando Zapier Webhook

Zapier ofrece una gran gama de zaps (conexiones). 

Como yo quiero almacenar las respuestas de todos los usuarios en Hojas de Cálculo de Google, necesito conectar Stripo a Zapier, y Zapier a mi Google Drive.

Vamos a hacerlo...

  • en tu cuenta Zapier, en la esquina superior izquierda, haz clic en el botón “Make a Zap”;

The-Make-a-Zap-Button

  • dale un nombre;

  • en la sección “1. When this happens” elige “Webhooks by Zapier";

Creating-Webhooks-by-Zapiet

  • como disparador, elige “Catch hook”;

Choosing-Webhooks-as-a-Trigger

  • haz clic en continuar;

  • en la nueva ventana, haz clic en le URL Webhook que Zapier ha generado;

Webhook-URL

  • y regresas a Stripo e insertas este enlace en el campo correspondiente;

Pasting-Zapier-Webhook-URL

  • ahora, copia nuestra dirección URL de Servicio de Datos;

  • pégala en el Formulario, tendrás que reemplazar el enlace existente con la URL de Servicio de Datos;

Replacing-default-end-point-with-Necessary-One

  • ahora vamos a volver a Zapier;

  • aquí “Salteamos” las pruebas y hacemos clic en ”Continue”, ya que no hay nada para probar; 

Skipping-Zapier-Test

  • ahora, en la sección “2. Do this”, elegimos “Google Sheets”, para encontrarla, debes ingresar Google o Sheets en el campo de búsqueda;

Choosing-Google-Sheets

  • ahora tenemos que elegir el evento de Acción correcto, para nuestro propósito, necesitamos la opción “Create Spreadsheet Row”;

Choosing-the-Create-Spreadsheet-as-Action

  • haz clic en “Continue”;

  • ingresa tus credenciales de tu cuenta de Google;

  • otorga a Zapier acceso a tu Google Drive;

Giving-Zapier-Access-to-Your-Google-Drive.

  • Zapier añade automáticamente tu cuenta de Google Drive a la lista. Ni siquiera tienes que elegir nada;

Zapier-Chooses-Goole-Drive-as-Your-Account

  • previamente creamos una Hoja de Cálculo de Google con todas las columnas necesarias. Mi meta es recoger puntuaciones y comentarios. Por supuesto, también necesito saber qué lector nos puntuó. Así que, mi hoja de cálculo luce así:

My-Spreadsheet

  • Personaliza tu hoja de cálculo: Necesitas seleccionar “Drive”, “Spreadsheet”, que es la Hoja de Cálculo de Google que has creado, y worksheet. Yo elegí “Sheet 1”, porque quiero almacenar todos los datos en una sola página.

Customizing-Spreadsheet

  • Zapier toma los nombres de los campos de tu hoja de cálculo;

  • Zapier toma los datos de tu Formulario AMP (como dijimos, tomará las direcciones de email, puntuaciones y comentarios);

  • necesitamos elegir los “valores” necesarios para los respectivos campos;

  • haz clic en “Continue”;

Customizing-Google-Sheets-in-Zapier

  • haz esta prueba, comprueba que la conexión se hizo correctamente;

  • si tu prueba tuvo éxito, haz clic en “Done Editing” y Activa tu Zapp.

Successful-Test

Importante:

Mostramos cómo almacenar datos en nuestro Servicio y como almacenar datos en un servicio externo (Zapier). Pero puedes elegir ambos si deseas. Solo activa las dos opciones.

65413

Paso 2. Trabajar con tus formularios AMP

Ahora que tenemos nuestro endpoint, vamos a crear los formularios AMP.

Nota importante:

El formulario funcionará solo para los lectores con clientes de email que soporten AMP, Gmail y Mail.ru, tanto en versiones de escritorio como móvil. Otros usuarios verán la versión de respaldo que crearemos después.

Actualmente, hay tres formas de crear formularios AMP con Stripo:

Forma 1. Insertar componentes amp de Google Amp dev

Google nos proporciona componentes AMP insertados. Sigues las instrucciones en la página correspondiente, e insertas tu formulario en nuestra plantilla.

Pero es algo complicado para mí, así que prefiero no usar esta forma.

Forma 2. Usar módulos Stripo

Bueno, esto es mucho más fácil.

Una vez que termines tu plantilla, deberías:

  • ir a la sección Módulos;

  • ingresar “Formulario” en la consola de búsqueda;

  • soltar el módulo elegido en tu plantilla;

  • rediseñarlo si deseas;

Cuidado: no hagas cambios a la parte ⚡HTML de este módulo, ya que afecta el desempeño de tu formulario AMP.

  • haz clic en la parte ⚡HTML de este módulo para abrir su código;

Editing-AMP-Modules-in-Stripo

  • pega la dirección URL que copiaste al crear el Servicio de Datos en el Paso 1;

  • insértalo como se muestra en el siguiente GIF;

Inserting-URL-Address-Into-AMP-Form

  • ahora, este formulario tomará las puntuaciones y comentarios. Pero necesitamos saber quién lo hace. Así que para recibir las direcciones de email, debemos insertar este código en nuestro formulario:

<input type="hidden" name="email" hidden value="%EMAIL|%">

Pasting-Embed-Code-into-TemplateVa después de </label> antes de <input type>.

Este campo está oculto y se completa automáticamente. Los usuarios no necesitan ingresar sus direcciones de email manualmente.

Importante:

Contacta a tu ESP para la etiqueta merge para mostrar las direcciones de email. Usamos eSputnik, así que en nuestro caso la etiqueta es %EMAIL|%. Por favor, no hagas cambios al resto del código. 

  • tu email está listo para recoger los comentarios y puntuaciones de tus usuarios :)

Importante:

Puedes probar estos formularios en el modo Vista Previa. Si está bien hecho, tu hoja de Google completará la siguiente información:

Merge-Tages-in-Google-SheetsMuestra la etiqueta merge porque que probamos el email en el modo vista previa.

Cuando recolectamos comentarios reales de usuarios reales (los colegas podrán probar este formulario si quieres) se mostrarán direcciones reales.

Testing-AMP-Forms_Google-Sheets

Forma 3. Usar nuestras plantillas prediseñadas 

Creo que esta es la manera más fácil de usar formularios AMP en emails. ¡Hoy! En un futuro cercano, lanzaremos nuestro bloque Drag-n-Drop de formulario AMP, te contaremos más después.

Así que, para usar nuestras plantillas, tienes que:

Stripo-Template-with-Embedded-AMP-Forms

Nota importante:

Antes dijimos que tendrías que usar una versión HTML/de respaldo de este cuestionario. Bueno, no necesitas hacerlo para esta plantilla porque ya contiene la invitación al cuestionario HTML.

  • en la plantilla, hacer clic en el formulario ⚡HTML;

  • abrir el editor de código;

  • reemplazar la URL existente con la dirección URL que has copiado en Servicio de Datos.

Pasting-End-Point-in-Email

  • si deseas recoger las direcciones de email también, por favor pega el código como se muestra en la sección “Forma 2”. Pero en este caso, irá después de </label>y antes de <button type>.

Pasting-Embed-Code-into-Template

Paso 3. Crear una Alternativa

Publicamos una larga lectura donde mostramos los 10 mejores emails invitacionales a cuestionarios y cómo crearlos con Stripo.

Aquí mostraremos, en mi opinión, las tres mejores alternativas. Son todas completamente seguras para la web.

Alternativa 1: Recoger puntuaciones

Como ya dijimos, los usuarios pueden puntuar nuestro servicio directamente en los emails:

  • arrastra una estructura de 4 contenedores en tu plantilla dinámica, si quieres ser puntuado del 1 al 5;

  • incluye esta estructura solo en la versión HTML.

  • Añade un contenedor más a esta estructura;

  • Equilibra los contenedores;

Adding-Structures-with-5-Containers

  • sube imágenes con dígitos: “1”, “2”, “3”, “4", “5” en cada contenedor;

  •  agrega una estructura más con el número respectivo de contenedores e ingresa las “puntuaciones” para cada imagen, si quieres;

Fallback-Rating

  • aplica las URL respectivas a cada imagen.

Tu ESP te proporcionará el número total de clics en cada “puntuación”.

Alternativa 2. Calificación del servicio

Puedes preguntar a tus usuarios si están satisfechos con tus productos eligiendo “Malo”, “Regular” y “Excelente”.

Rating-Products_Fallback-with-Three-OptionLo haces del mismo modo que la Alternativa 1, con una sola diferencia: insertas una estructura de 3 contenedores. Eso es todo.

Alternativa 3. Dar un enlace a una fuente externa

Si vas a hacer algunas preguntas a los usuarios, como alternativa podrías pedirles tomar una encuesta multiple choice.

Creas un formulario en tu sitio web o usando Google Forms.

Una vez hecho y que tengas en enlace:

  • agregas una estructura de 1 contenedor a tu plantilla;

  • suelta un bloque básico “Botón”;

  • diseña tu botón;

  • añade tu URL a este botón;

  • añade un texto CTA sobre este botón;

  • incluye esta Estructura solo en el email HTML.

Fallback-Forms

Nota importante:

Ambas versiones de tu email, AMP y HTML, tendrán todas las partes de tu plantilla, como encabezado, banner, pie de página, e información de contacto.

Y solo aparecerán los formularios AMP HTML y la alternativa HTML en las versiones respectivas de tus emails.

Paso 4. Previsualizar tus emails

Antes de enviar emails con formularios AMP a los usuarios, por favor, previsualízalos para asegurarte de que no tengan errores y envía emails de prueba a tus colegas para ver cómo funcionan los formularios AMP.

Para ver pruebas con AMP en Gmail, por favor, añade nuestra dirección de email, info@stripo-test.email, como remitente de confianza.

Adding-Stripo-As-Trusted-Sender.Para más detalles sobre cómo previsualizar los emails con Stripo, mira nuestra publicación en el blog “Previsualizar y Probar Emails con Stripo”.

Paso 5. Comprobar los resultados

Para ver los resultados de esta campaña, debes ingresar nuevamente a la sección “Datos”.

Encuentra el servicio que has creado.

List-of-Services

Como puedes ver, muestra cuántas solicitudes ha tenido el servicio, y cuándo fue realizada la última solicitud.

Haz clic en el botón “Descargar Archivo CSV”.

Downloading-CSV-FilesEso es todo.

Próximamente

Mostramos cómo recoger comentarios usando formularios AMP.

1. Recoger información de contacto de los usuarios

También puedes usar formularios AMP para recordatorios, para enriquecer la base de contacto con los números telefónicos de los usuarios, preguntar la edad o ubicación a tus usuarios para otorgarles ofertas relevantes, etc.

¿Cómo lo haces?

  • solo tienes que arrastrar a tu email nuestro bloque básico “Formulario”, que lanzaremos pronto;

AMP-Form-Block

  • selecciona “Entrada de texto” correspondiente;

Text-Input

  • y toma la información de los usuarios que estén listos para compartir.

Incluso podrás diseñar estos formularios.

2. Usar casillas

Los sueños se vuelven realidad :)

¿Añadir casillas y puntuaciones sin saber programación? ¡Muy pronto podrás hacerlo!

Forms-with-Checkboxes

Mantente al tanto ;)

Palabras finales

El Servicio de Datos ayuda a sacar lo mejor de los emails AMP, te ayuda a conectar fácilmente tus campañas de email a servicios de datos sin servidores externos, sin tener que establecer CORS y con acceso instantáneo a los resultados de campaña.

Prueba Stripo

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