Ionic - Cordova AdMob

Wtyczka Cordova AdMob służy do natywnej integracji reklam. Będziemy używaćadmobpro plugin w tym rozdziale, ponieważ admob jest przestarzały.

Korzystanie z AdMob

Aby móc korzystać z reklam w swojej aplikacji, musisz zarejestrować się w admob i utworzyć baner. Gdy to zrobisz, otrzymasz plikAd Publisher ID.Ponieważ te kroki nie są częścią struktury Ionic, nie będziemy ich tutaj wyjaśniać. Możesz postępować zgodnie z instrukcjami zespołu pomocy Google tutaj .

Będziesz także musiał mieć zainstalowaną platformę Android lub iOS, ponieważ wtyczki cordova działają tylko na platformach natywnych. Omówiliśmy już, jak to zrobić w naszym rozdziale dotyczącym konfiguracji środowiska.

Wtyczkę AdMob można zainstalować w oknie wiersza polecenia.

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

Po zainstalowaniu wtyczki musimy sprawdzić, czy urządzenie jest gotowe, zanim będziemy mogli z niego korzystać. Dlatego musimy dodać następujący kod w$ionicPlatform.ready funkcja wewnątrz 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
      } );
}

Dane wyjściowe będą wyglądać tak, jak pokazano na poniższym zrzucie ekranu.

Ten sam kod można zastosować na iOS lub Windows Phone. Będziesz używać innego identyfikatora tylko dla tych platform. Zamiast banera możesz użyć reklam pełnoekranowych, które zajmą cały ekran.

Metody AdMob

W poniższej tabeli przedstawiono metody, których można używać z admob.

metoda Parametry Detale
createBanner (parametr1, parametr2, parametr3) adId / options, success, fail Służy do tworzenia banera.
removeBanner () / Służy do usuwania banera.
showBanner (parametr1) pozycja Służy do wyświetlania banera.
showBannerAtXY (parametr1, parametr2) x, y Służy do wyświetlania banera w określonej lokalizacji.
hideBanner (); / Służy do ukrycia banera.
przygotowanieInterstitial (parametr1, parametr2, parametr3) adId / options, success, fail Służy do przygotowania reklamy pełnoekranowej.
showInterstitial (); / Służy do wyświetlania reklamy pełnoekranowej.
setOptions (parametr1, parametr2, parametr3) opcje, sukces, porażka Służy do ustawiania wartości domyślnej dla innych metod.

Wydarzenia AdMob

W poniższej tabeli przedstawiono zdarzenia, których można używać z AdMob.

Zdarzenie Detale
onAdLoaded Wywoływane po załadowaniu reklamy.
onAdFailLoad Wywoływane, gdy reklama się nie załadowała.
onAdPresent Wywoływane, gdy reklama zostanie wyświetlona na ekranie.
onAdDismiss Wywoływane po odrzuceniu reklamy.
onAdLeaveApp Wywoływane, gdy użytkownik opuszcza aplikację, klikając reklamę.

Możesz obsłużyć te zdarzenia, postępując zgodnie z poniższym przykładem.

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