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”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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:
1 2 3 4 5 6 7 8 9 10 11 |
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:
1 2 3 4 5 6 7 |
'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:
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:
1 2 3 |
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:
1 2 3 4 5 6 |
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