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

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

Una de las formas más sencillas de hacerlo es con banners inteligentes de aplicaciones. Estos elegantes banners pequeños aparecen sin problemas en la parte superior de tu sitio web cuando se ven en iPhones y iPads.

No son molestos como los pop-ups; en cambio, se integran de forma natural con tu sitio y dan a los visitantes un suave empujón para descargar o abrir tu aplicación. ¿El resultado? Más descargas, mejor participació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. Ya sea que prefieras un plugin o quieras agregar un código simple, te guiaremos a través de ambas opciones paso a paso.

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

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 brindan una mejor experiencia de usuario. También puedes mostrar recordatorios, contenido personalizado, ofertas, actualizaciones y más utilizando notificaciones push móviles. Todo esto significa más participación, conversiones y ventas.

Puedes animar a los usuarios de iPhone y iPad a descargar tu 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 tu 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, WordPress ocultará automáticamente el banner.

Por ejemplo, la siguiente imagen muestra el mismo sitio web en el navegador móvil Chrome.

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)
• Método 2: Usando Smart App Banner (Agregar banners a páginas y publicaciones específicas)
• Preguntas frecuentes sobre cómo agregar banners de aplicaciones inteligentes en WordPress

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

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

Teniendo esto en cuenta, WPCode es la opción perfecta si deseas promocionar una sola aplicación para iOS. Sin embargo, si deseas mostrar diferentes banners en diferentes páginas, te recomendamos usar el método 2 en su lugar.

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 incluso un pequeño error tipográfico o un descuido 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 más instrucciones, por favor 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 ve a la página de Herramientas de marketing de Apple Services. 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 tienes el ID de la aplicación, regresa al panel de WordPress. Ahora puedes agregar el siguiente fragmento al editor de código, reemplazando el ID de la aplicación con la información que obtuviste en el paso anterior:

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

Con eso hecho, desplázate hasta el cuadro ‘Inserción’. Si aún no está seleccionado, haz clic en ‘Insertar automáticamente’ y luego selecciona ‘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 probar el código del banner inteligente de la aplicación en WordPress

La mejor manera de probar el banner de aplicación inteligente es visitando tu sitio web en un dispositivo iOS usando la aplicación móvil Safari. De hecho, el banner de aplicación inteligente 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 alternativa 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 espera.

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: Usando Smart App Banner (Agregar banners a páginas y publicaciones específicas)

A veces, es posible que solo desees promocionar aplicaciones en páginas y publicaciones específicas.

En este caso, recomendamos usar el plugin Smart App Banner. Este plugin te permite mostrar diferentes banners en diferentes páginas web e incluir datos de afiliados en esos banners. Estas características lo convierten en un excelente plugin para los afiliados de marketing.

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

Tras la activación, puedes añadir un banner de aplicación a páginas o publicaciones específicas, a la página de inicio de WordPress o a todo tu sitio web.

Para empezar, veamos la configuración de la aplicación. Aquí, puedes añadir un banner a cada página y publicación o añadir un banner de aplicación inteligente solo a páginas de destino de alta conversión.

Para empezar, ve a Ajustes » Smart App Banner y escribe el valor de la aplicación en el campo 'ID de la aplicación'.

Puedes obtener esta información siguiendo el mismo proceso descrito en el Método 1.

Si estás utilizando marketing de afiliados para generar ingresos en línea blogueando, entonces puedes escribir tu token de afiliado en el campo 'Datos de afiliado'. La información variará, por lo que es posible que necesites iniciar sesión en tu portal de afiliados o hablar con tus socios para obtener el token correcto.

Después de eso, puedes marcar la casilla 'Mostrar en todas las páginas' o dejarla desmarcada. Si dejas la casilla desmarcada, entonces el banner de la aplicación solo aparecerá en tu página de inicio.

Cuando estés satisfecho con la configuración del banner, simplemente haz clic en el botón 'Guardar cambios' para que se publique.

¿Quieres agregar un banner de aplicación inteligente a páginas y publicaciones específicas en su lugar? Esto te permite controlar exactamente dónde aparece el banner en tu sitio web.

Por ejemplo, si eres un profesional del marketing de afiliación, podrías promocionar diferentes aplicaciones en diferentes páginas y luego usar Google Analytics para ver qué banners obtienen la mayor cantidad de conversiones.

Para hacer esto, simplemente abre la página o publicación donde deseas agregar el banner. Ahora, busca la nueva sección 'Smart App Banner' en el editor de contenido de WordPress.

Aquí, simplemente agrega el ID de la aplicación e información opcional de afiliado siguiendo el mismo proceso descrito anteriormente.

Cuando estés satisfecho con la información que has ingresado, simplemente haz clic en 'Actualizar' o 'Publicar' para que tus cambios se hagan efectivos.

Luego, puedes simplemente repetir estos pasos para agregar un banner de aplicación inteligente a tus otras páginas de destino.

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.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar banners inteligentes de aplicaciones en WordPress. También puedes consultar nuestra guía sobre las mejores prácticas para llamadas a la acción (CTA) para garantizar conversiones en páginas de destino o nuestras selecciones expertas para 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.