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...
});