Incluir publicidad en una aplicación Ionic

Así es majos, este post es para enseñaros a empezar a monetiza tu nueva aplicación. Si has leído artículos viejos míos quizá ya sabrás a hacer una app con Ionic, habrás aprendido a meter un vídeo de Youtube en tu aplicación y tal vez hayas visto mis casos de éxito como este o este. Pues el siguiente paso es darse de alta en una red de anuncios, incluir publicidad en una aplicación y empezar a ganar pasta bitches.

Haciendo negocios con Admob

Lo primero que tenemos que hacer de todo es registrarnos en Admob. Admob es una empresa de «Mobile Advertising» por lo que si queremos ganar dinerico tenemos que enseñar anuncios en nuestra aplicación y esta empresa tiene muchos anuncios para enseñar, ah y es de Google jeje.

Nos venimos a esta url y realizamos el proceso de inscripción. Una vez que hayas terminado verás el panel de control en el que gestionarás tus bloques de anuncios y campañas.

Panel de control de Admob con el que podremos incluir publicidad en una aplicación

Para poder incluir publicidad en una aplicación tendremos que conseguir un Ad unit ID, que es el código que identifica nuestra aplicación contra el sistema de anuncios. Para ello hay que hacer click en el botón:

Botón para añadir una nueva aplicación

Si tu aplicación no esta publicada ya en las tiendas oficiales te tocará hacerlo manualmente. Para ello hay que rellenar un formulario en el que se nos pide el nombre de la aplicación y la plataforma objetivo.

Registrando mi nueva app

Una vez pases por las diferentes opciones para configurar el bloque de anuncios y ver la configuración opcional de analítica llega la parte de la implementación en el código de tu aplicación. Pero antes no te olvides de apuntar el código ca-pub, es el que se utilizará en la aplicación y aparece durante el proceso de creación del bloque de anuncios. Tiene una pinta tal que así:

Código con el que ganaremos dinerico

Configuración necesaria para incluir publicidad en una aplicación

Si quieres incluir publicidad en una aplicación vas a tener que ensuciarte, meterte en código así que voy a ir picadito.

• Abres la terminal (o consola) y te vas a la raíz de tu proyecto.
• Te instalas el plugin cordova-plugin-admob escribiendo el siguiente comando y dejas que termine el proceso

cordova plugin add com.rjfun.cordova.plugin.admob

• Si te quedas mas tranquilo puedes revisar los plugins instalados con el siguiente comando.

cordova plugin list

• Añade el siguiente código a la función .run en el fichero app.js que lo encontrarás dentro del directorio www. También tienes una versión separada del script.

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {  
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    if (window.device && typeof AdMob !== "undefined") {
          var admob_key = ca_app_pub_code = "AQUI_TU_CODIGO_CA_PUB";

          AdMob.createBanner( {
            adId: admob_key,
            position: AdMob.AD_POSITION.BOTTOM_CENTER,
            isTesting: false,
            adSize: 'SMART_BANNER',
            success: function(){
            },
            error: function(){
              console.log('failed to create banner');
            }
          });
      }
  });
})

Obviamente tienes que cambiar el valor de la variable admob_key, donde pone «AQUI_TU_CODIGO_CA_PUB» tienes que sustituirlo por tu código, el que has generado un poco mas arriba al registrar la aplicación en Admob.

Y eso es todo chicos. bueno, no del todo. Mientras estes haciendo pruebas en tu entorno puedes activar la variable isTesting, es un booleano así que sus valores son true o false. Esto sirve para enseñar un anuncio de prueba antes de ser enviado a las tiendas oficiales. No te olvides de dejarlo como false cuando compiles y vuelvas a enviar la app o sino no verás gallinicas 😛

Si tenéis alguna duda sobre cómo incluir publicidad en una aplicación o sobre cualquier otra cosa podéis dejarla en los comentarios o usar el banner de Twitter para preguntarme directamente. Venga gandules que es gratis.

[xyz-ips snippet=»FAQS-GORKAMU-TW-YELLOW»]

 

Hala a mamarla!