Cómo agregar llamadas a la acción deslizantes a las publicaciones de su blog [Tutorial]

¿Qué Tal? el tema que tocamos hoy es Cómo agregar llamadas a la acción deslizantes a las publicaciones de su blog [Tutorial]

METROtodos los blogs, incluido este, finalizan cada publicación con una llamada a la acción que conduce a una página de destino.

Pero la pregunta es… ¿Los lectores notan las llamadas a la acción de tu blog?

El problema con los CTA estáticos en la parte inferior de cada publicación de blog es que, después de un tiempo, los visitantes aprenden a ignorarlos. Esto no es solo un problema con sus visitantes habituales, ya que muchos blogs implementan esta táctica, incluso sus nuevos visitantes pueden ignorar su «contenido adicional» o «próximos pasos recomendados».

Para combatir esto, algunos blogs han comenzado a implementar algo llamado CTA deslizable. Idealmente, este CTA ingresará a la pantalla debajo del contenido de la barra lateral para que no lo cubra. Si no tiene una barra lateral, simplemente se deslizará en el lado derecho una vez que se active.

Bastante genial, ¿verdad? Si está interesado en probar este tipo de CTA en su blog, lo guiaremos a través de las instrucciones a continuación. Pero primero, exploremos algunos números…

¿Funcionan realmente estos CTA deslizables?

Cuando implementamos CTA deslizables por primera vez en nuestro blog, decidimos realizar algunas pruebas para averiguar si realmente funcionaban.

En el transcurso de un mes, realizamos una prueba en la que agregamos estos CTA deslizables a diez de las publicaciones de blog con mayor tráfico de HubSpot. Comparamos la CTA deslizable con la CTA estática en la parte inferior de cada publicación y observamos tres puntos de datos:

  • Tasa de clics (CTR) – ¿Qué porcentaje de visitantes de publicaciones de blog hicieron clic en cada CTA?
  • Tasa de conversión (CVR) – ¿Qué porcentaje de las personas que hicieron clic finalmente se convirtieron en el formulario de la página de destino?
  • Presentaciones – ¿Cuántos clientes potenciales generó finalmente cada CTA?

En esta prueba, el deslizar-en CTA tuvo un CTR 192% más alto y generado 27% más envíos. La cantidad de envíos en realidad no fue mayor, porque el CVR en las CTA deslizables fue menor que en las CTA estáticas. Pero el volumen de clics fue tan grande que valió la pena comprometerse con CVR.

Tenga en cuenta que la tasa de éxito de cualquier CTA tendrá mucho que ver con su audiencia específica, por lo que le recomendamos que realice algunas pruebas por su cuenta para determinar si los CTA deslizables son los adecuados para su blog.

Cómo instalar llamadas a la acción deslizables en tu blog usando HubSpot Marketing Free

Para instalar estas llamadas a la acción deslizables en tu blog, necesitarás:

  1. Acceso a su cuenta de WordPress o la capacidad de agregar una línea de JavaScript al sitio web de su empresa.
  2. Una cuenta gratuita de HubSpot (regístrate aquí).

Si no tienes acceso al n.º 1, envía este artículo por correo electrónico a tu webmaster para que pueda configurar las herramientas de marketing gratuitas de HubSpot por ti. Puedes hacer el resto.

Si esto parece abrumador, tenga en cuenta que solo necesitará hacer el paso uno una vez. Una vez que se agrega el complemento de JavaScript o WordPress a su sitio, simplemente puede crear nuevos CTA deslizables directamente desde su cuenta de HubSpot.

1) Instala las herramientas de marketing gratuitas de HubSpot en tu sitio web.

Primero, crea tu cuenta.

Se le pedirá que instale una pieza de JavaScript antes de la etiqueta en el HTML de su sitio web. aquí hay una guía sobre cómo hacerlo para la mayoría de los sistemas de administración de contenido, incluidos Joomla, Drupal, Weebly y más.

código-de-seguimiento-independiente.png

Si usa HubSpot para alojar su sitio webpuedes añadir Flujo de clientes potencialess (formularios emergentes) como un complemento en Productos y Complementos siguiendo estas instrucciones.

Productos y Complementos-1.png

2) Cree un Flujo de clientes potenciales y elija «cuadro deslizable» como tipo.

Una vez que haya configurado las herramientas de marketing gratuitas de HubSpot (o los flujos de clientes potenciales en su portal existente de HubSpot), querrá comenzar creando un flujo de clientes potenciales: una ventana emergente de conversión todo en uno que le permite orientar su audiencia con contenido específico.

Para acceder al editor de flujos de prospectos, haga clic en «Flujos de prospectos» en la barra de navegación superior y luego en «Crear flujo de prospectos».

Una vez allí, tendrás varias opciones de personalización. Primero, deberá elegir su tipo de flujo de prospectos. Para lograr el efecto CTA deslizable, querrás seleccione «cuadro deslizable». (Nota: puede elegir entre un deslizamiento que aparece a la derecha o a la izquierda, depende de usted).

Screen_Shot_2016-07-20_a las_1.26.18_PM.png

Después de eso, es hora de crear su «llamada» real o CTA. Su CTA brinda la oportunidad de captar la atención de su visitante con una breve descripción de lo que está ofreciendo a través de un título, descripción, imagen y color del tema.

Captura de pantalla 2016-11-17 a las 4.25.59 PM.png

En el paso de llamada del editor, puede:

  1. Subir una imagen (también incluido en el paso de forma).
  2. Establezca su texto destacado (el encabezado principal).
  3. Ajusta el texto del botón (también incluido en el paso del formulario).
  4. Establezca el color del tema que se incluirá en todo el Lead Flow.

Verá una actualización en vivo de los cambios que realice en el lado derecho del editor. Aquí hay una mirada más cercana a cómo podría verse:

Zero_Budget_Guide_Slidein_CTA.png

¿Sigues con nosotros? Bien. Es hora de construir tu formulario.

Dentro del paso del formulario, puede agregar campos adicionales al formulario, cambiar el idioma de los campos y agregar un cuerpo para elaborar el valor que está proporcionando con su Flujo de clientes potenciales.

Captura de pantalla 2016-11-17 a las 4.25.59 PM.png

Captura_de_pantalla_2016-07-21_a_las_1.08.56_PM.png

Idioma te permite cambiar el idioma de las partes no editables de la CTA, incluidas las etiquetas de los campos de formulario. Actualmente, es posible traducir estas partes del formulario al francés, español, japonés, alemán y portugués de Brasil.

Por último, cree un mensaje de agradecimiento que su visitante verá después de enviar su formulario.

Captura de pantalla 2016-11-17 a las 4.29.06 PM.png

En este paso, también puede agregar un enlace a recursos/descargas adicionales e incluir texto con formato ligero, como este:

Captura de pantalla 2016-11-17 a las 4.30.09 PM.png

3) Ajuste sus opciones.

Dentro de la sección «Opciones de flujo», puede ajustar la ubicación de su flujo, los activadores que harán que aparezca para su usuario y más.

opciones-nombre.png

Primero, puede ajustar el nombre interno de su Lead Flow o anular su publicación si es necesario. Al nombrar su CTA, tenga en cuenta que este es el nombre ese aparecerá en su línea de tiempo de contacto y en las notificaciones internas por correo electrónico.

A continuación, configure en qué páginas desea que aparezca su flujo. Notarás que la opción ‘URL de coincidencia exacta’ en HubSpot Marketing Free admite una opción comodín. Como referencia, un comodín es un carácter como un asterisco que sirve como marcador de posición para un carácter o grupo de caracteres, por ejemplo: «http://www.website.com/blog/*».

Entonces, si desea que su CTA aparezca en todas las páginas de su blog, asegúrese de agregar ese «*» al final.

opciones-ubicación.png

Después de la ubicación, puede elegir la acción que hará desencadenar el flujo de prospectos. Sus opciones de activación variar dependiendo de Tipo de flujo de clientes potenciales que está utilizando, pero las siguientes opciones están disponibles para los complementos:

  • Desplazamiento de página. Esto se activará en el momento en que su visitante se desplace un 50% hacia abajo en su página.
  • Tiempo transcurrido. Esto se activará en el momento en que hayan pasado X segundos (mínimo de siete segundos).

opciones-disparador.png

¿No desea que este flujo de clientes potenciales aparezca en dispositivos móviles? Puede desactivarlo usando la siguiente opción. (Nota: los flujos de clientes potenciales están totalmente optimizados para dispositivos móviles, por lo que en la mayoría de los casos se recomienda incluir sus flujos de clientes potenciales en dispositivos móviles).

opciones-móvil-tamaño.png

Por último, puede habilitar o deshabilitar las notificaciones internas por correo electrónico para nuevos envíos en este flujo de clientes potenciales. Con las notificaciones habilitadas, recibirá un correo electrónico cada vez que se capture un contacto.

opciones-email-notificaciones.png

También puede conectar sus herramientas gratuitas a un proveedor de correo electrónico (más sobre eso aquí). Si tienes las herramientas de marketing gratuitas de HubSpot conectadas a un proveedor, puedes seleccionar a qué listas se enviarán los nuevos contactos que envíen este flujo de oportunidades de venta.

opciones-esp.png

(Usuarios de HubSpot: El Lead Flow se trata como un formulario. Cuando alguien lo completa, ingresa a la base de datos como un envío de formulario. Desde allí, puedes configurar flujos de trabajo o correos electrónicos automatizados dentro de HubSpot en función de esos envíos de formularios).

4) Obtenga una vista previa y publique su CTA.

El editor de Lead Flows proporciona una vista previa interactiva donde puede probar cada etapa de su Lead Flow y verlo en acción. Esta vista previa ofrece la posibilidad de verla en computadoras de escritorio, tabletas y dispositivos móviles.

vista previa-pequeño.png

Cuando esté listo para publicar su Lead Flow, simplemente seleccione el botón azul «Publicar» en la parte superior derecha.

publicar.png

¿Necesitas anular su publicación por algún motivo? Dirígete a la pestaña «Opciones» y encontrarás la opción «Anular publicación» en la parte superior. También puede anular la publicación directamente desde el Panel de flujos de clientes potenciales.

despublicar.png

Una vez que tenga su Flujo de clientes potenciales en funcionamiento, puede realizar un seguimiento de las vistas y las conversiones directamente desde su panel de control. Aquí hay una pequeña vista previa de cómo se verá:

Captura de pantalla 2016-11-17 a las 4.33.01 PM.png

Uf, finalmente hemos terminado. ¡Lo hiciste! Excelente trabajo. Ahora háganos saber cómo va.

¿Has experimentado con CTA deslizables? Comparte tus consejos y trucos en los comentarios a continuación.

Nota del editor: esta publicación se publicó originalmente en abril 2014 y ha sido actualizado para su frescura, precisión y exhaustividad.


No olvides enviarme invitación a Linkdin

sobre el autor

Estuardo Monroy

Te gustaría saber más sobre el autor, te invito que veas la sección de Nosotros en Consultor SEO, donde se extiende hablando sobre su experiencia, conocimientos y un poco de información personal.