Ionic - Cordova AdMob

Il plug-in Cordova AdMob viene utilizzato per integrare gli annunci in modo nativo. Useremo il fileadmobpro plugin in questo capitolo, poiché l'admob è deprecato.

Utilizzo di AdMob

Per poter utilizzare gli annunci nella tua app, devi registrarti ad admob e creare un banner. Quando lo fai, otterrai un fileAd Publisher ID.Poiché questi passaggi non fanno parte del framework Ionic, non lo spiegheremo qui. Puoi seguire i passaggi del team di assistenza di Google qui .

Dovrai anche avere installato la piattaforma Android o iOS, poiché i plugin di cordova funzionano solo su piattaforme native. Abbiamo già discusso come farlo nel nostro capitolo sulla configurazione dell'ambiente.

Il plug-in AdMob può essere installato nella finestra del prompt dei comandi.

C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro

Ora che abbiamo installato il plugin, dobbiamo controllare se il dispositivo è pronto prima di poterlo utilizzare. Questo è il motivo per cui dobbiamo aggiungere il seguente codice nel file$ionicPlatform.ready funzione all'interno di app.js.

if( ionic.Platform.isAndroid() )  { 
   admobid = { // for Android
      banner: 'ca-app-pub-xxx/xxx' // Change this to your Ad Unit Id for banner...
   };

   if(AdMob) 
      AdMob.createBanner( {
         adId:admobid.banner, 
         position:AdMob.AD_POSITION.BOTTOM_CENTER, 
         autoShow:true
      } );
}

L'output apparirà come mostrato nello screenshot seguente.

Lo stesso codice può essere applicato per iOS o Windows Phone. Utilizzerai solo un ID diverso per queste piattaforme. Invece di un banner, puoi utilizzare annunci interstitial che copriranno l'intero schermo.

Metodi AdMob

La tabella seguente mostra i metodi che possono essere utilizzati con admob.

Metodo Parametri Dettagli
createBanner (parametro1, parametro2, parametro3) adId / opzioni, successo, fallimento Utilizzato per creare il banner.
removeBanner () / Utilizzato per rimuovere il banner.
showBanner (parametro1) posizione Utilizzato per mostrare il banner.
showBannerAtXY (parametro1, parametro2) x, y Utilizzato per mostrare il banner in una posizione specificata.
hideBanner (); / Utilizzato per nascondere il banner.
prepareInterstitial (parametro1, parametro2, parametro3) adId / opzioni, successo, fallimento Utilizzato per preparare interstitial.
showInterstitial (); / Utilizzato per mostrare interstitial.
setOptions (parametro1, parametro2, parametro3) opzioni, successo, fallimento Utilizzato per impostare il valore predefinito per altri metodi.

Eventi AdMob

La tabella seguente mostra gli eventi che possono essere utilizzati con admob.

Evento Dettagli
onAdLoaded Chiamato quando viene caricato l'annuncio.
onAdFailLoad Chiamato quando l'annuncio non viene caricato.
onAdPresent Chiamato quando l'annuncio verrà mostrato sullo schermo.
onAdDismiss Chiamato quando l'annuncio viene ignorato.
onAdLeaveApp Chiamato quando l'utente lascia l'app facendo clic sull'annuncio.

Puoi gestire questi eventi seguendo l'esempio di seguito.

document.addEventListener('onAdLoaded', function(e){
   // Handle the event...
});