Top
Cómo crear un formulario de suscripción opt-in para las páginas AMP

Cómo crear un formulario de suscripción opt-in para las páginas AMP

Lo primero que voy a decirte es que las páginas de tu blog deben cargar muy rápido. ¿Por qué? Pues, muy sencillo si atendemos a todas las estadísticas relacionadas con el uso de dispositivos móviles.

 

Por ejemplo, Google dice que, actualmente, se están realizando más búsquedas desde teléfonos móviles que desde ordenadores.

 

Y, también según el todopoderoso Google, es cinco veces más probable que un usuario abandone un sitio web si este no está optimizado para móviles.

 

Hay más datos:

 

  • Casi el 50% de los visitantes abandona un sitio web para móviles si las páginas no se cargan en tres segundos.

 

  • 9 de cada 10 personas utilizan varios dispositivos a la hora de realizar tareas como reservar un vuelo o gestionar sus finanzas.

 

Eso me lleva a preguntarte: ¿cómo es de rápido tu blog?

 

¡Si es lento, tienes que ir pensando en optimizarlo, ya!

 

Optimizar el rendimiento de un blog de WordPress no es muy difícil… siempre y cuando emplees las herramientas adecuadas.

 

Yo he conseguido sentar las bases para que mi blog cargue en menos de tres segundos, simplemente con tres hacks, principalmente.

 

  • Contratar un buen hosting.
  • Usar un sistema de almacenamiento en caché más un CDN.
  • Dirigir a los usuarios de dispositivos móviles hacia las páginas AMP.

 

Pero ¿qué son las páginas AMP y cómo implementarlas en tu blog de WordPress? Veámoslo a continuación.

 

Cómo crear un formulario de suscripción opt-in para las páginas AMP

 

Cómo hacer que tu blog vaya más rápido en móviles con páginas AMP

 

AMP (Accelerated Mobile Pages) es un proyecto de Google que consiste en proporcionar la tecnología para simplificar la estructura de los sitios Web, de manera que las páginas Web de contenido carguen mucho más rápido y su usabilidad, de cara a los dispositivos móviles, sea óptima.

 

¿Te ha picado la curiosidad? Te sugiero que pruebes a implantar las páginas AMP en tu blog de WordPress.

 

Sin embargo, uno de los «problemas» de AMP es que no se pueden ejecutar JavaScripts, por lo que, además de un diseño muy básico y simple, se carece en principio de recursos para mostrar formularios, ventanas emergentes, etc. Por ejemplo, el sistema de comentarios nativo de WordPress desaparece, aunque se podría sustituir por un simple botón que mostrase esa parte de la página en su versión no AMP.

 

Eso podría valer si mi blog no posee otro propósito que el personal. Pero ¿y si quiero monetizar?

 

¿No puedo entonces añadir CTAs y formularios opt-in a mi blog?

 

Afortunadamente, existe una solución y eso es lo que precisamente quiero contarte en este artículo.

 

¡Uf, era necesaria esa larga introducción pero vayamos, sin más preámbulos al meollo de la cuestión!

 

qué son las páginas AMP y cómo implementarlas en tu blog de WordPress

 

Cómo tener páginas AMP y poder añadir CTAs y formularios opt-in, además de personalizar el diseño

 

Bien, hemos visto que una de las piezas para optimizar el rendimiento de tu blog en dispositivos móviles es la implementación de las páginas AMP.

 

En un blog de WordPress, puedes instalar el plugin oficial de AMP. Pero ese plugin no posee ninguna posibilidad de configuración ni personalización. Para lo único que sirve es para crear una versión AMP, añadiendo el sufijo «/amp» a cada URL de tu blog.

 

Con las páginas AMP no solo va a cargar más rápido tu blog sino que optimizarás también la usabilidad. Lo que Google llama la «experiencia de usuario».

 

Para Google, las ventanas emergentes, los pop-ups que se suelen mostrar para mostrar un formulario opt-in y capturar emails, no son precisamente lo mejor para que la experiencia de usuario sea óptima.

 

La solución es instalar el plugin «AMP for WP». La configuración de este plugin permite realizar una personalización no solo del diseño, sino de todas aquellas cosas que se echan de menos cuando se instala la extensión oficial «AMP».

 

«AMP for WP» solo funciona si se tiene instalado el plugin oficial «AMP» y te enseño a configurarlo en el artículo de Blogpocket que te indiqué anteriormente.

 

Ahora, estarás conmigo en un cosa: los formularios opt-in juegan un papel vital en el marketing online.

 

Si tu objetivo es monetizar tu blog, capturar direcciones de correo es uno de los métodos.

 

Con los suscriptores de tu blog, puedes hacer un montón de cosas, desde compartir tus posts más recientes, hasta realizar campañas de promoción de tus productos o servicios.

 

La mala noticia era que solo con el plugin oficial de AMP  no podíamos crear formularios opt-in. La buena es que los desarrolladores del plugin «AMP for WP» están creando extensiones (nuevos plugins) de pago que se adosan a aquél y que nos permitirán llevar a cabo todo aquello que se echa de menos en las páginas AMP.

 

Las dos primeras extensiones que se han lanzado son para crear CTAs y para añadir formularios opt-in.

 

Veremos a continuación, un pequeño tutorial sobre cómo crear un formulario opt-in en AMP con el fin de capturar suscriptores para una lista de correo de MailChimp (se pueden usar otros servicios de email marketing, por supuesto).

 

 

Cómo crear un formulario opt-in en AMP

 

Como hemos visto, lo primero sería instalar y activar el plugin oficial AMP; después instalar y activar el plugin «AMP for WP» y, finalmente, instalar y activar el plugin «AMP Opt-in Forms».

 

Este último puedes encontrarlo en la página del proyecto «AMP for WP».

 

Una vez instalado y activado el plugin «AMP Opt-in Forms», se verá en el escritorio de WordPress una nueva sección denominada «AMP Optin» (ver imagen siguiente).

 

Cómo crear un formulario de suscripción páginas AMP

 

En primer lugar, haz clic en «Add New Optin», como se muestra a continuación.

 

Nuevo optin con el plugin AMP Optin

 

Para crear un nuevo formulario opt-in, sigue los siguientes pasos:

 

formulario de suscripción páginas AMP

 

  1. Escribe el nombre del formulario opt-in.
  2. Selecciona del desplegable el servicio de email marketing que uses (por ejemplo, MailChimp).
  3. «API URL» es un valor que varía de un servicio de email marketing a otro. En el siguiente apartado te explico cuál es el que debes poner para MailChimp.
  4. Escribe el título del formulario.
  5. Escribe una descripción para el formulario.
  6. Escribe el texto para el campo «Dirección de email».
  7. Escribe el texto para el campo «Nombre». Si lo dejas vacio, no se mostrará.
  8. Escribe el texto para el campo «Apellido». Si lo dejas vacio, no se mostrará.
  9. El botón para enviar se puede renombrar.
  10. El shortcode para mostrar el formulario en cualquier página de tu blog. Simplemente, copia y pega.
  11. Haz clic en «Publish» para crear el formulario y empezar a usarlo.

 

La imagen siguiente es un ejemplo de formulario opt-in.

 

Ejemplo de formulario de suscripción del plugin AMP Optin

 

 

Cómo trabajar con MailChimp

 

Para que un formulario de este plugin trabaje con MailChimp, solo debemos escribir la URL API dentro del campo correspondiente, cuando estamos creándo uno nuevo.

 

¿Dónde encontrar la «URL API»?

 

La «URL API» es necesario buscarla dentro de MailChimp. Para ello, localiza la lista a la que quieres añadir los suscriptores captados con el formulario de AMP. Entonces, haz clic en la flechita que aparece a la derecha de «Stats» y elige la opción «Signup Forms».

 

Luego, haz clic en «Select» dentro de la sección «Embedded Forms» y copia el código asociado al formulario.

 

Después, pega dicho código en un editor de texto y busca el parámetro «Form», dentro de la etiqueta «Action«». El valor de ese parámetro es la «URL API» que debes escribir en la configuración del nuevo Opt-In con la extensión «AMP Opt-In».

 

 

Cómo cambiar el estilo y la posición de un formulario

 

Para cambiar los colores de un Opt-in, haz lo siguiente:

 

Acude a «AMP settings > AMP Optin > Style».

 

Cambiar el estilo del plugin AMP Optin

 

Una vez en la página de «Style», se pueden cambiar los colores de todos los elementos del formulario.

 

Para la posición, dirígete a  «AMP settings > AMP Optin > Position»

 

Cambiar la posición del plugin AMP Optin

 

 

  1. Si quieres mostrar el formulario en el contenido, pon a «ON» el switch.
  2. Elige un Optin para mostrar, desde el desplegable.
  3. Coloca en «ON» el switch «Above Content» si quieres que el Optin aparezca antes del contenido.
  4. Sitúa en «ON» el switch «Between the 50% Content» si deseas que el formulario se muestre en la mitad del contenido.
  5. Pon en «ON» el switch «Below Content» para que el Optin se visualice al final del contenido.

 

 

Cómo insertar el formulario creado con la extensión «AMP Opt-in» en una página AMP

 

Es hora de recapitular un poco.

 

Sabemos cómo crear una versión AMP de nuestro blog: instalamos los plugins «AMP» y «AMP for WP». Este último nos permite personalizar diseño y añadir funciones como menús, el código de Analytics, etc.

 

Sabemos presentar a los usuarios de dispositivos móviles esa versión AMP: solamente hay que activar un switch en la configuración de «AMP for WP». Esto mejora la experiencia de usuario y la velocidad de carga.

 

Las páginas AMP se identifican porque su URL finaliza en «/amp». En los resultados de las búsquedas en móviles se puede mostrar la versión AMP si ésta existe (y van identificadas con el símbolo del rayo).

 

Sabemos también crear formulario opt-in para capturar nuevos suscriptores de nuestra lista de correo, en las páginas AMP: lo hacemos instalando la extensión de pago «AMP Opt-In». Estos formularios se pueden asociar a MailChimp. Si trabajases con otro servicio de email marketing, que no figurase en la lista de admitidos por «AMP Opt-In», habría que usar la exportación e importación, mediante un archivo CSV.

 

Lo único que queda es detallar la forma en la que incluiremos el formulario en la versión AMP de una determinada página. Por ejemplo, la landing page de suscripción a la newsletter.

 

Para ello, el plugin «AMP for WP» incluye una fabulosa herramienta que consiste en añadir al editor de WordPress una nueva caja de edición, denominada «Custom AMP editor» solo para la versión AMP del post o página en cuestión.

 

Activa la opción «Use this content as AMP content» y escribe la versión AMP del post o página en cuestión. En el caso de la página de suscripción a la newsletter, añade el shortcode correspondiente (vimos que se obtiene al crear el Opt-In) donde quieras que se muestre. Dicho shortcode sustituirá al código HTML normal del formulario que tengas en la página no-AMP.

 

Asegúrate que está a «OFF» el switch para mostrar automáticamente el Opt-In dentro del contenido, porque en caso contrario, se mostrará en todas las páginas de tu blog.

 

Conclusiones

 

¿No te atrevías a instalar las páginas AMP porque creías que no ibas a poder personalizarlas a tu gusto? ¿Pensabas que no podrías usar CTAs y formularios Opt-In?

 

En este artículo he querido explicarte que es más fácil de lo que parece tener una versión AMP de tu blog.

 

Mejorarás la experiencia de usuario, muy valorada por Google, y optimizarás el rendimiento para dispositivos móviles.

 

Nota 1: las imágenes de este artículo han sido obtenidas de los tutoriales oficiales de la extensión «AMP Opt-In».

 

Nota 2: gracias  a las chicas de Oink My God por abrirme las puertas de su casa virtual 🙂

 

blogpocket@gmail.com

Ingeniero informático y blogger. En la Blogosfera desde el 25-1-2001. Publico contenidos (blog posts, podcasts y vídeos) sobre blogs, social media, redes sociales y marketing de contenidos. Mi misión es ayudar a los bloggers a conocer mejor los métodos y herramientas para conseguir un blog de éxito.

12 Comments
  • Wall
    Mayo 17, 2017 at 1:19 pm

    Oink oink… con el título del post, y la url, pensé que iban a hablar sobre cómo crear un form de suscripción en AMP… pero es solo para WordPress esto. Algo que debería ser explicado al principio (o en el título). Oink oink.

    AMP es muy grande, aplica a toda la web. Pensé que el “how to” era para todos, pero es exclusivo de WP.

    Snif-oink.

    Saludos!

    • OinkMyGod
      OinkMyGod
      Mayo 17, 2017 at 1:40 pm

      ¡Hola Wall!

      Sorry 🙁 el post habla sobre WordPress, que Antonio es un absoluto crack en este tema!

      un abrazo gigante!

  • Chus
    Mayo 19, 2017 at 11:33 am

    Hola Antonio y BON DIA paisanas mías de Oinkmygod,

    Tengo una pequeña duda: yo tengo Thrive Leads, con mi licencia y mis actualizaciones y todo. ¿Es AMP? Quiero decir, si los optins de Thrive Leads son “responsives” con el móvil, si cargan rápido…? En caso negativo, cómo puedo hacer para que a los usuarios de móvil no les salten mis scroll mat, popups etc de Thrive y solamente les salten los de AMP?

    Muchas gracias y felicidades!

    Chus
    Profesor y creador de http://www.guitarraenpijama.com

      • Chus
        Mayo 19, 2017 at 8:56 pm

        Entendido! Entonces, si uso AMP y Thrive Leads a la vez, a los usuarios de PC les saltará el mat y a los de móvil el AMP? O ambas? Son compatibles?
        Gracias de nuevo 😀

  • Fran
    Mayo 19, 2017 at 1:06 pm

    Gracias. un Post muy interesante. Tomo nota. Un saludo, Fran.

  • Chus
    Junio 12, 2017 at 1:01 pm

    Hola,

    El plugin AMP Optin forms es de pago. ¿Existe alguna alternativa gratuíta y fiable? Muchas gracias,

    Chus

  • Big Master
    Junio 27, 2017 at 3:40 pm

    gran post gracias

Post a Comment

Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies