Cómo agregar fácilmente banners inteligentes de aplicaciones en WordPress

Muchos desarrolladores de aplicaciones nos han preguntado: ¿hay alguna forma de promocionar aplicaciones móviles directamente desde su sitio de WordPress? La respuesta es sí, y es más fácil de lo que piensa.

Una de las formas más sencillas de hacerlo es con banners de aplicaciones inteligentes. Estos banners aparecen en la parte superior de su sitio web cuando se ven en iPhones y iPads, animando a los visitantes a descargar o abrir su aplicación. Incluso puede mostrar banners a usuarios de Android usando el plugin adecuado.

Los banners de aplicaciones inteligentes no son molestos como las ventanas emergentes. En cambio, se integran de forma natural en su sitio y dan a los visitantes un suave empujón para descargar o abrir su aplicación. ¿El resultado? Más descargas, mejor interacción del usuario y una experiencia móvil más profesional.

Hemos probado varios métodos para agregar estos banners a WordPress y encontramos dos enfoques que funcionan perfectamente para cualquier nivel de habilidad.

El primero utiliza un fragmento de código simple para agregar el banner nativo de iOS de Apple, mientras que el segundo utiliza un plugin que admite dispositivos iOS y Android con personalización completa del diseño. Le guiaremos a través de ambas opciones paso a paso.

Resumen rápido TLDR: Los banners de aplicaciones inteligentes son banners nativos de iOS que aparecen en Safari, animando a los visitantes a descargar o abrir su aplicación. La forma más fácil de agregarlos en WordPress es con un plugin gratuito llamado WPCode.

Si también desea mostrar banners a usuarios de Android, puede usar el plugin Mobile Smart App Banner, que admite ambas plataformas y le permite personalizar completamente el diseño del banner.

¿Por qué agregar banners inteligentes de aplicaciones en WordPress?

Usar un banner de aplicación inteligente en su sitio web de WordPress puede ayudarlo a obtener más descargas y compras de su aplicación móvil.

Muchos propietarios de sitios web crean una aplicación móvil complementaria donde los visitantes pueden navegar por su contenido de una manera optimizada para dispositivos móviles.

Dado que estas aplicaciones están diseñadas para dispositivos móviles, a menudo ofrecen una mejor experiencia de usuario. También puedes mostrar recordatorios, contenido personalizado, ofertas, actualizaciones y más usando notificaciones push móviles. Todo esto significa mayor participación, conversiones y ventas.

Puede animar a los usuarios de iPhone y iPad a descargar su aplicación móvil utilizando un banner de aplicación inteligente.

Este es un banner que aparece en la parte superior de la pantalla cuando un usuario de iOS visita su sitio usando el navegador Safari.

Los visitantes pueden hacer clic en el banner para descargar tu aplicación desde la App Store. Si el visitante ya tiene tu aplicación, el banner les pedirá que abran la aplicación en su lugar. De esta manera, puedes obtener más descargas y participación en la aplicación.

Si el visitante está usando un dispositivo que no es de Apple o un navegador web diferente, el banner de aplicación inteligente nativo de Apple no aparecerá.

Sin embargo, como le mostraremos en el Método 2, puede usar un plugin para mostrar banners de descarga de aplicaciones a usuarios de Android y visitantes que usan otros navegadores también.

Dicho esto, veamos cómo puedes agregar banners de aplicaciones inteligentes en WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

Método 1: Usando WPCode (Mostrar un banner de aplicación inteligente en todo WordPress)

La forma más fácil de agregar banners inteligentes de aplicaciones a tu sitio web de WordPress es usando WPCode. Este plugin gratuito te permite mostrar el mismo banner en cada página y publicación usando una línea de código.

Al agregar código personalizado a WordPress, algunas guías te pedirán que edites el archivo functions.php de tu sitio. No recomendamos esto, ya que un pequeño error tipográfico o un error podría causar errores comunes de WordPress o incluso hacer que tu sitio sea inaccesible.

Al usar WPCode, puedes agregar código personalizado a los archivos de tu tema de WordPress sin ningún riesgo. También puedes habilitar y deshabilitar fragmentos de código con solo hacer clic en un botón.

Primero, necesitas instalar y activar el plugin gratuito WPCode. Para obtener más instrucciones, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a Fragmentos de código » Agregar fragmento. Luego, haz clic en el botón ‘+ Agregar fragmento personalizado’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.

A continuación, necesitas seleccionar ‘Fragmento HTML’ como el tipo de código de la lista de opciones que aparecen en la pantalla.

Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes escribir un nombre para el fragmento de código.

Esto es solo para tu referencia, así que puedes usar lo que quieras.

Para el siguiente paso, necesitarás conocer el ID de tu aplicación.

Para obtener esta información, abre una nueva pestaña del navegador y dirígete a la página de Herramientas de marketing de servicios de Apple. Aquí, escribe el nombre de la aplicación que deseas promocionar y haz clic en el ícono de 'Buscar'.

Para ver todas las aplicaciones de iOS que coinciden con tu término de búsqueda, simplemente desplázate hasta la sección ‘Apps’.

Aquí, busca la aplicación que deseas promocionar y haz clic en ella.

En la parte inferior de la pantalla, verás un ‘Enlace de contenido’.

El ID de la aplicación es el valor entre id y ?. Necesitarás esta información en el siguiente paso, así que deja esta pestaña abierta o anota el ID de la aplicación.

Ahora que tiene el ID de la aplicación, vuelva al panel de WordPress.

Ahora puede agregar el siguiente fragmento al editor de código, reemplazando el ID de la aplicación con la información que obtuvo en el paso anterior:

<meta name="apple-itunes-app" content="app-id=12345678">

Con eso hecho, desplácese hasta el cuadro 'Inserción'.

Si aún no está seleccionado, haga clic en 'Inserción automática' y luego seleccione 'Encabezado de todo el sitio' en el menú desplegable.

Cuando estés listo, desplázate hasta la parte superior de la página y cambia el interruptor ‘Inactivo’ a ‘Activo’.

Finalmente, simplemente haz clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.

Ahora, el banner inteligente de la aplicación aparecerá en tu sitio web de WordPress.

Cómo mostrar diferentes banners en páginas y publicaciones específicas

Como ha visto, es fácil agregar un banner inteligente a WordPress usando WPCode.

Pero, ¿qué pasa si desea promocionar diferentes aplicaciones en diferentes páginas?

Por ejemplo, tal vez tenga un blog de estilo de vida y una aplicación de recetas que desea promocionar en sus publicaciones relacionadas con la comida. Al mismo tiempo, podría tener una aplicación de fitness que desea promocionar en sus páginas de entrenamiento.

En ese caso, recomendamos actualizar a WPCode Premium (a partir de $49/año). Este plugin tiene lógica condicional inteligente que te permite controlar exactamente dónde se ejecutan los fragmentos de código. Esto significa que puedes crear múltiples banners de aplicaciones inteligentes y luego mostrarlos en cualquier página o publicación. 

Primero, dirígete al sitio web de WPCode y compra una suscripción. Luego, puedes proceder a instalarlo, como cualquier otro plugin de WordPress.

Después de eso, ve a WPCode » Configuración en tu panel de WordPress e ingresa tu clave de licencia.

Puedes encontrar esta información iniciando sesión en tu cuenta en el sitio web de WPCode, o revisando el correo electrónico de confirmación de compra que recibiste al comprar WPCode. 

Con eso hecho, ve a Fragmentos de código » Agregar fragmento en tu panel de WordPress. Aquí, pasa el cursor sobre la sección 'Agregar tu código personalizado'.

Cuando aparezca, selecciona 'Agregar fragmento personalizado'.

En el panel posterior, haz clic en 'Fragmento de HTML'.

A continuación, dale a tu fragmento un nombre descriptivo para que puedas identificar fácilmente qué aplicación promociona.

Por ejemplo, podrías nombrarlo 'Banner de aplicación inteligente – Aplicación de recetas'.

En el Editor de código, agrega la etiqueta meta para tu primera aplicación.

Asegúrate de reemplazar el ID de la aplicación con el correcto para tu aplicación:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Luego, desplázate hasta la sección 'Inserción' y selecciona 'Insertar automáticamente', si aún no está seleccionada.

Después de eso, abre el menú desplegable 'Ubicación' y selecciona 'Encabezado de todo el sitio'.

A continuación, desplázate un poco más hacia abajo hasta la sección 'Lógica condicional inteligente'. 

Aquí, haz clic para activar la configuración 'Habilitar lógica'.

Ahora es el momento de crear tu regla de lógica condicional inteligente.

Para empezar, abre el menú desplegable 'Condiciones' y selecciona 'Mostrar'. Luego, haz clic en 'Agregar nuevo grupo'.

Después de eso, haz clic en el primer menú desplegable (que muestra 'Iniciado sesión' por defecto).

Esto agrega una sección completamente nueva.

En el menú de la izquierda, selecciona 'Dónde'.

Luego, elige 'Publicación/Página'.

Con eso hecho, haz clic en el segundo menú desplegable y elige 'Es uno de', si aún no está seleccionado.

Finalmente, haz clic en el tercer campo y busca la página o publicación específica donde deseas mostrar este banner de aplicación.

¿Quieres mostrar este banner en varias páginas o publicaciones? Entonces simplemente haz clic en 'Agregar nuevo grupo'.

Ahora puedes repetir estos pasos para seleccionar publicaciones o páginas adicionales.

Cuando estés satisfecho con la configuración de este fragmento, desplázate hasta la parte superior de la página y cambia el interruptor 'Inactivo' a 'Activo'. Finalmente, haz clic en el botón 'Guardar fragmento' para almacenar tus cambios.

Ahora, repite este proceso para cada aplicación adicional que desees promocionar. 

WPCode ahora mostrará el banner de aplicación inteligente correcto según la página o publicación que el visitante esté viendo actualmente.

Cómo probar el código del banner inteligente de la aplicación en WordPress

La mejor manera de probar el banner inteligente de la aplicación es visitando tu sitio web en un dispositivo iOS usando la aplicación móvil Safari. De hecho, el banner inteligente de la aplicación ni siquiera aparecerá si intentas ver la versión móvil de tu sitio de WordPress desde el escritorio.

Si necesitas verificar rápidamente si el fragmento de código está funcionando, una solución es usar la herramienta Inspeccionar de tu navegador. Te permite ver si el código <meta name> se ha insertado en la sección <head> de tu sitio, lo que sugiere que está funcionando como se esperaba.

Para hacer esto, ve a cualquier página o publicación en tu blog de WordPress. Luego, haz clic derecho en cualquier lugar de la página y selecciona 'Inspeccionar'.

Se abrirá un nuevo panel que mostrará todo el código del sitio.

Simplemente busca la sección <head> y haz clic en su flecha para expandirla.

Ahora, busca el código <meta name="apple-itunes-app"> que agregaste en el paso anterior.

Si ves este código, entonces el banner de aplicación inteligente debería aparecer en los dispositivos iOS.

Método 2: Usar Mobile Smart App Banner (Agregar banners para iOS y Android)

Si deseas un plugin que admita usuarios de iOS y Android, te recomendamos usar el plugin Mobile Smart App Banner.

Es un plugin gratuito que detecta automáticamente el dispositivo del visitante y muestra el enlace de la tienda de aplicaciones apropiado. 

El banner incluye un botón de 'Cerrar' incorporado para que los visitantes puedan descartarlo, y utiliza cookies para recordar esta decisión.

Ten en cuenta que el banner no aparecerá durante 7 días después de ser descartado.

Primero, necesitarás instalar y activar el plugin Mobile Smart App Banner. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Ajustes » Mobile Smart App Banner en tu panel de WordPress.

Aquí, marca la casilla junto a la opción 'Habilitar banner de app' para activar el banner en tu sitio. 

Hecho esto, haz clic en el botón 'Subir'.

Luego, selecciona la imagen que deseas usar como icono de tu app (recomendamos usar una imagen de 512x512px).

También puedes elegir dónde aparece el banner en la pantalla abriendo el menú desplegable 'Posición del banner' y eligiendo una opción de la lista.

Hemos descubierto que colocar el banner en la parte inferior de la pantalla es menos intrusivo y a menudo puede generar una mayor participación.

Después de eso, puedes escribir el nombre de tu app en el campo 'Nombre de la app' e introducir una breve descripción en el cuadro 'Subtítulo de la app'. 

A continuación, añade tu enlace de App Store y tu enlace de Play Store en los campos correspondientes.

Si deseas cambiar el aspecto del banner, simplemente desplázate hasta la sección 'Ajustes de color'. 

Aquí, puedes cambiar el color de fondo, el color del botón, el color del texto del botón y más, utilizando las diversas configuraciones.

También hay una vista previa en tiempo real, por lo que puedes probar fácilmente muchas configuraciones para ver cuál se ve mejor. 

Alternativamente, puedes usar el banner nativo de smart app de Apple en Safari, desmarcando la casilla junto a 'Habilitar banner de iOS Smart App'.

Luego necesitarás introducir tu ID de App Store, que puedes encontrar usando el mismo proceso descrito en el Método 1. 

Cuando esto esté habilitado, los usuarios de Safari verán el banner nativo de Apple, mientras que los usuarios de Chrome, Firefox y otros navegadores de iOS verán tu banner personalizado en su lugar.

Hecho esto, desplázate hasta la parte inferior de la pantalla y haz clic en 'Guardar cambios' para que tu banner esté activo.

Preguntas frecuentes sobre cómo agregar banners de aplicaciones inteligentes en WordPress

Si aún tienes preguntas, aquí están nuestras principales preguntas frecuentes sobre cómo agregar banners inteligentes a tu sitio web de WordPress.

¿Qué es un banner de aplicación inteligente?

Los banners inteligentes de aplicaciones aparecen en la parte superior del navegador web Safari y ofrecen a los usuarios de la aplicación la opción de abrir una aplicación o descargarla de la App Store de Apple.

Dado que fueron creados por Apple, los banners inteligentes de aplicaciones tienen un diseño consistente que muchos usuarios de iOS reconocen. Solo aparecen en personas que usan iPhones y iPads con iOS 6 o superior.

¿Por qué no puedo ver mi banner inteligente de aplicaciones en el escritorio?

El banner inteligente de aplicaciones no aparecerá en computadoras de escritorio, incluso si ves la versión móvil de tu sitio.

Para ver el banner en acción, deberás visitar tu sitio en un iPhone o iPad usando la aplicación móvil Safari.

¿Por qué no puedo ver el banner inteligente de aplicaciones en mi iPhone o iPad?

Los banners inteligentes de aplicaciones solo aparecen en dispositivos con iOS 6 o superior cuando usas la aplicación móvil Safari. Si no ves el banner inteligente de aplicaciones, deberías empezar por verificar que tienes las últimas versiones tanto de iOS como de la aplicación móvil Safari.

El banner inteligente de aplicaciones también detecta si el dispositivo puede admitir la aplicación y si la aplicación está disponible en tu ubicación. Si no ves el banner inteligente de aplicaciones, es posible que tu dispositivo no haya pasado una de estas verificaciones.

¿Por qué ha desaparecido el banner inteligente de aplicaciones en Safari?

Si descartas el banner haciendo clic en el botón 'x', no volverá a aparecer por defecto.

Dependiendo de tu dispositivo móvil, es posible que necesites abrir una pestaña de navegador privada, borrar tu caché o cookies, o realizar alguna otra acción para restablecer tu configuración.

¿Funcionan los banners de smart app en dispositivos Android?

No, los banners nativos de smart app de Apple son exclusivos para dispositivos iOS que usan el navegador Safari. Android no tiene un equivalente incorporado.

Sin embargo, puedes usar un plugin de WordPress como Mobile Smart App Banner para mostrar banners personalizados de descarga de apps a los visitantes de Android.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar banners de aplicaciones inteligentes en WordPress. También te puede interesar nuestra guía sobre las mejores prácticas para llamadas a la acción o nuestras selecciones expertas de las mejores herramientas de lead magnet de WordPress para disparar las conversiones.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.