Implementar un banner de aplicación inteligente en tu sitio web con (o sin) jQuery

Implementar un banner de aplicación inteligente en tu sitio web con (o sin) jQuery

Un banner inteligente es un elemento útil que debe mostrarse en todo sitio web que tenga una aplicación móvil para motivar y fomentar la descarga (y el uso) de la aplicación en lugar de utilizar el sitio web. Aunque este banner debería fomentar el uso de la aplicación, esto no significa que usted, como desarrollador, vaya a descuidar o abandonar la capacidad de respuesta y la compatibilidad de su sitio web con los dispositivos móviles. El uso de un banner es solo para promocionar su aplicación y no debería ser en absoluto un mensaje para el usuario como "Descargue nuestra aplicación, nuestro sitio web no funciona bien en dispositivos móviles" .

En este artículo, aprenderá cómo implementar esta función en su sitio web en caso de que tenga una aplicación para su sitio web, usando complementos o incluso implementando un banner usted mismo usando marcado, algo de CSS y VanillaJS (o jQuery).

1. Uso del banner de SmartApp

En nuestra opinión, el plugin más útil, fácil de usar e implementar para crear un banner para promocionar su aplicación móvil en su sitio web. El banner de SmartApp es un banner de aplicación inteligente ligero sin requisitos de jQuery (o cualquier otro marco). Es fácil de implementar y tiene un diseño muy aceptable (fácil de personalizar).

El complemento verificará automáticamente si es un dispositivo móvil o no y mostrará el banner si corresponde.

Puede obtener el complemento descargando un archivo .zip del repositorio oficial de github aquí o simplemente instale el paquete desde npm usando npm install --save smart-app-banner.

 El siguiente código contiene todas las opciones disponibles para el complemento y la forma de inicialización. Agregue el archivo css y js en tu documento:

<!-- Style -->
<link rel="stylesheet" href="smart-app-banner.css" type="text/css" media="screen">
<!-- Smart Banner Plugin -->
<script src="smart-app-banner.js"></script>

Tenga en cuenta que las URL son generadas por el complemento (que, por supuesto, puede cambiar si lee el código fuente en caso de que algo no funcione correctamente como la generación de la URL), por lo tanto, debe proporcionar la identificación de la aplicación dentro de un meta etiqueta en el documento respectivamente para cada plataforma:

<!-- App store -->
<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">

Y la inicialización:

// Inicializar banner
new SmartBanner({
    daysHidden: 15, // días para ocultar el banner después de hacer clic en el botón de cierre (el valor predeterminado es 15)
    daysReminder: 90, //días para ocultar el banner después de hacer clic en el botón "VER" (el valor predeterminado es 90)
    appStoreLanguage: 'us', // código de idioma para la App Store (predeterminado en el idioma del navegador del usuario)
    title: 'Our Code Editor',
    author: 'Our Code World',
    button: 'Download',
    store: {
        ios: 'On the App Store',
        android: 'In Google Play',
        windows: 'In Windows store'
    },
    price: {
        ios: 'FREE',
        android: 'FREE',
        windows: 'FREE'
    },
    force:'ios',
    // Agregar un icono (in this example the icon of Our Code Editor)
    icon: "https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw",
    
    //theme: '', // ponga el tipo de plataforma ('ios', 'android', etc.) aquí para forzar un solo tema en todos los dispositivos
    //icon: '', // ruta completa a la imagen del icono si no se usa la imagen del icono del sitio web
    //force: 'windows' // Descomenta la emulación de plataforma
});

El banner en cada plataforma debería verse así:

SmartApp Banner jQuery plugin

2. Usando jquery.smartbanner

Los banners inteligentes se utilizan para promocionar aplicaciones en todas las tiendas de aplicaciones de un sitio web. Este complemento de jQuery lleva esta función a iOS, dispositivos Android y aplicaciones de la Tienda Windows.

Nota: jQuery Smart Banner actualmente no se mantiene activamente, sin embargo, es funcional y puede usarlo y modificarlo usted mismo en caso de que lo necesite.

<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">
<!--Agregar jQuery -->
<script src="http://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<!-- Agregue los scripts requeridos -->
<link rel="stylesheet" href="/resources/jquery.smartbanner.css" type="text/css" media="screen">
<script src="/resources/jquery.smartbanner.js"></script>
<!-- Iniciar smartbanner -->
<script type="text/javascript">
$(function () {
    $.smartbanner({
        title: "Our Code Editor Free", // Cuál debe ser el título de la aplicación en el banner (el valor predeterminado es <title>)
        author: null, // Cuál debe ser el autor de la aplicación en el banner (el valor predeterminado es <meta name = "author"> o nombre de host)
        price: 'FREE', // Precio de la aplicación
        appStoreLanguage: 'us', // Código de idioma para App Store
        inAppStore: 'On the App Store', // Texto del precio para iOS
        inGooglePlay: 'In Google Play', // Texto del precio para Android
        inAmazonAppStore: 'In the Amazon Appstore',
        inWindowsStore: 'In the Windows Store', // Texto del precio para Windows
        GooglePlayParams: null, // Parámetros adicionales para el mercado
        icon: null, // La URL del icono (el valor predeterminado es <meta name = "apple-touch-icon">)
        iconGloss: null, // Fuerza el efecto de brillo para iOS incluso para precompuestos
        url: null, // La URL del botón. Mantenga el valor nulo si desea que el botón se vincule a la tienda de aplicaciones.
        button: 'VIEW', // Texto para el botón de instalación
        scale: 'auto', // Escala según el tamaño de la ventana gráfica (establece en 1 para deshabilitar)
        speedIn: 300, // Muestra la velocidad de animación del banner.
        speedOut: 400, // Velocidad de animación cercana del banner
        daysHidden: 15, // Duración para ocultar el banner después de ser cerrado (0 = mostrar siempre el banner)
        daysReminder: 90, // Duración para ocultar el banner después de hacer clic en "VER" * independiente de cuando se hace clic en el botón de cierre * (0 = mostrar siempre el banner)
        force: null, // Elija 'ios', 'android' o 'windows'. No revise el navegador, solo muestre siempre este banner
        hideOnInstall: true, // Oculte el banner después de hacer clic en "VER".
        layer: false, // Mostrar como capa superpuesta o deslizarse hacia abajo en la página
        iOSUniversalApp: true, // Si la aplicación iOS es una aplicación universal para iPad y iPhone, muestre Smart Banner a los usuarios de iPad también.
        appendToSelector: 'body', // Agregar el banner a un selector específico
        onInstall: function () {
            // alert('Haga clic en instalar');
        },
        onClose: function () {
            // alert('Haga clic en cerrar');
        }
    });
});
</script>

De la misma manera que lo hace el primer complemento, debe agregar las metaetiquetas con el ID de la aplicación en cada tienda. Los estilos son similares (casi iguales) a los banners del primer complemento (ya que el primer complemento se basa en esto):

SmartApp Banner jQuery plugin

3. Banner auto implementado con CSS y jQuery

Incluso puede crear su propio banner sin necesidad de depender de ningún complemento. Para lograr un banner de promoción como este:

App promotion banner

Puede ver una implementación impresionante usando algunas marcas, CSS y jQuery en su proyecto. Tenga en cuenta que el siguiente ejemplo se basa en el código de este repositorio.

El marcado será el siguiente:

<div class="smartbanner" id="smartabanner">
    <div class="smartbanner-container">
        <a href="#" id="smb-close" class="smartbanner-close">&times;</a>
        <span class="smartbanner-icon"></span>
        <div class="smartbanner-info">
            <div class="smartbanner-title">Our Code Editor</div>
            <div>Our Code World</div>
            <span>Free &ndash; Google Play</span>
        </div>
        <a href="https://play.google.com/store/apps/details?id=com.ourcodeworld.ourcodeeditorfree" target="_blank" class="smartbanner-button">
            <span class="smartbanner-button-text">Get it</span>
        </a>
    </div>
</div>

Y el CSS será (recuerde cambiar la fuente del icono):

.smartbanner {
    left:0;top:0;
    width:100%;
    height:78px;
    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
    background:#fff;
    overflow:hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
}
.smartbanner-container {
    margin:0 auto;
}
.smartbanner-close {
    position:absolute;
    left:7px;top:7px;
    display:block;
    font-family:'ArialRoundedMTBold',Arial;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    border-radius:14px;
    -webkit-font-smoothing:subpixel-antialiased;
    border:0;
    width:17px;
    height:17px;
    line-height:17px;
    color:#b1b1b3;
    background:#efefef;
}
.smartbanner-close:active,.smartbanner-close:hover {
    color:#333;
}
.smartbanner-icon{
    position:absolute;
    left:30px;
    top:10px;
    display:block;
    width:57px;
    height:57px;
    background-color: #fff;
    background-size:cover;
    background-image: url("https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw");
}
.smartbanner-info{
    position:absolute;
    left:98px;
    top:15px;
    width:44%;
    font-size:12px;
    line-height:1.2em;
    font-weight:bold;
    color:#999;
}
.smartbanner-title {
    font-size:15px;
    line-height:17px;
    color:#000;
    font-weight:bold;
}
.smartbanner-button{
    position:absolute;
    right:20px;
    top:24px;
    border-bottom:3px solid #b3c833;
    padding:0 10px;
    min-width:12%;
    height:24px;
    font-size:14px;
    line-height:24px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    background-color:#b3c833;
    text-decoration:none;
    border-radius:5px;
}
.smartbanner-button:hover {
    background-color: #c1d739;
    border-bottom:3px solid #8c9c29;
}
.smartbanner-button-text {
    text-align:center;
    display:block;
    padding:0 5px;
}

Puede agregar algo de JS para manejar acciones simples como el evento de cierre de banner:

$(function(){
    // Hide banner
    $('#smb-close').click(function(){
        $('#smartabanner').slideUp();
        /// Or 
        //$('#smartabanner').fadeOut(500);
    });
});

Depende de ti filtrar con javascript cuándo mostrar el banner o no según la plataforma, etc.

Como cada tarea en el desarrollo web, necesita personalizar todo para que se ajuste a sus necesidades y está listo para comenzar, que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable