AdMob con Ionic Framework - JosmanTek Blog

Si quieres generar algún beneficio con tu aplicación híbrida sobre Ionic Framework, una buena forma de hacerlo es usar Google AdMob, ademas implementarlo en Ionic Framework es algo realmente fácil de hacer.

Lo primero es añadir el plugin “admob” a nuestro proyecto, desde la raíz del proyecto ejecutamos:

cordova plugin add cordova-plugin-admobpro

1	cordova plugin add cordova-plugin-admobpro

Para mantener las cosas fáciles vamos a hacer que el anuncio se muestre en todas las pantallas en la parte inferior de la aplicación, añadimos el siguiente código a app.js, dentro de la función “ionicPlatform.ready”:

var admobApp = angular.module('myapp', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.device && typeof AdMob !== "undefined") {
var admob_key = device.platform == "Android" ? "ANDROID_PUBLISHER_KEY" : "IOS_PUBLISHER_KEY";
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');
}
});
}
});
});

var admobApp = angular.module('myapp', ['ionic'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if (window.device && typeof AdMob !== "undefined") {

var admob_key = device.platform == "Android" ? "ANDROID_PUBLISHER_KEY" : "IOS_PUBLISHER_KEY";

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');

}

});

}

});

Tan solo tienes que sustituir “ANDROID_PUBLISHER_KEY” y/o “IOS_PUBLISHER_KEY” por vuestro ID de anuncio en AdMob que tiene un formato como este “ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN“.

Las distintas opciones para la posición del anuncio (parámetro “position“) son:

AdMob.AD_POSITION.NO_CHANGE,
AdMob.AD_POSITION.TOP_LEFT,
AdMob.AD_POSITION.TOP_CENTER,
AdMob.AD_POSITION.TOP_RIGHT,
AdMob.AD_POSITION.LEFT,
AdMob.AD_POSITION.CENTER,
AdMob.AD_POSITION.RIGHT,
AdMob.AD_POSITION.BOTTOM_LEFT,
AdMob.AD_POSITION.BOTTOM_CENTER,
AdMob.AD_POSITION.BOTTOM_RIGHT,
AdMob.AD_POSITION.POS_XY //posición personalizada con los parametros extra "x" e "y"

AdMob.AD_POSITION.NO_CHANGE,

AdMob.AD_POSITION.TOP_LEFT,

AdMob.AD_POSITION.TOP_CENTER,

AdMob.AD_POSITION.TOP_RIGHT,

AdMob.AD_POSITION.LEFT,

AdMob.AD_POSITION.CENTER,

AdMob.AD_POSITION.RIGHT,

AdMob.AD_POSITION.BOTTOM_LEFT,

AdMob.AD_POSITION.BOTTOM_CENTER,

AdMob.AD_POSITION.BOTTOM_RIGHT,

AdMob.AD_POSITION.POS_XY //posición personalizada con los parametros extra "x" e "y"

Las distintas opciones para el tamaño del anuncio (parámetro “adSize“) son:

'SMART_BANNER', //recomendado, se ajusta al tamaño de la pantalla
'BANNER', 
'MEDIUM_RECTANGLE', 
'FULL_BANNER', 
'LEADERBOARD', 
'SKYSCRAPER', 
'CUSTOM' //tamaño personalizado con los parametros extra "width" y "height"

'SMART_BANNER', //recomendado, se ajusta al tamaño de la pantalla

'BANNER',

'MEDIUM_RECTANGLE',

'FULL_BANNER',

'LEADERBOARD',

'SKYSCRAPER',

'CUSTOM' //tamaño personalizado con los parametros extra "width" y "height"

Un ultimo apunte es que hacer pruebas de desarrollo con un anuncio real va contra la política de uso de Admob, en entornos de pruebas podéis usar este ID de anuncio que corresponde a anuncios de pruebas facilitados por Google:

ca-app-pub-3940256099942544/6300978111

1	ca-app-pub-3940256099942544/6300978111

También se puede usar el parámetro “isTesting” con valor positivo (valor por defecto).

Eliminar Anuncio (Banner)

Eliminar completamente un anuncio de la pantalla es muy fácil, tan solo hay que usar este código en cualquier parte de la aplicación:

if (window.device &amp;&amp; typeof AdMob !== "undefined") {
AdMob.removeBanner();
}

if (window.device && typeof AdMob !== "undefined") {

AdMob.removeBanner();

}

Aumentar ingresos con AdMob

Opcionalmente se pueden añadir redes de mediación extras, lo que nos permitirá usar proveedores de anuncios extra, mostrando así una variedad de anuncios mucho mayor. Para añadir estos proveedores extra ejecutamos uno o varios de los siguientes comandos sobre nuestro proyecto:

cordova plugin add cordova-plugin-admob-facebook
cordova plugin add cordova-plugin-admob-flurry
cordova plugin add cordova-plugin-admob-iad
cordova plugin add cordova-plugin-admob-inmobi
cordova plugin add cordova-plugin-admob-mmedia
cordova plugin add cordova-plugin-admob-mobfox

cordova plugin add cordova-plugin-admob-facebook

cordova plugin add cordova-plugin-admob-flurry

cordova plugin add cordova-plugin-admob-iad

cordova plugin add cordova-plugin-admob-inmobi

cordova plugin add cordova-plugin-admob-mmedia

cordova plugin add cordova-plugin-admob-mobfox

Pulsa aquí para obtener más información sobre las redes de mediación.

Más Información: https://github.com/floatinghotpot/cordova-admob-pro