Ionic - Cordova AdMob

Plugin Cordova AdMob được sử dụng để tích hợp quảng cáo nguyên bản. Chúng tôi sẽ sử dụngadmobpro plugin trong chương này, vì admob không được dùng nữa.

Sử dụng AdMob

Để có thể sử dụng quảng cáo trong ứng dụng của mình, bạn cần đăng ký admob và tạo biểu ngữ. Khi bạn làm điều này, bạn sẽ nhận được mộtAd Publisher ID.Vì các bước này không phải là một phần của Ionic framework nên chúng tôi sẽ không giải thích ở đây. Bạn có thể làm theo các bước của nhóm hỗ trợ Google tại đây .

Bạn cũng sẽ cần phải cài đặt nền tảng Android hoặc iOS, vì các plugin cordova chỉ hoạt động trên các nền tảng gốc. Chúng tôi đã thảo luận về cách thực hiện điều này trong chương thiết lập môi trường của chúng tôi.

Bạn có thể cài đặt plugin AdMob trong cửa sổ nhắc lệnh.

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

Bây giờ chúng ta đã cài đặt plugin, chúng ta cần kiểm tra xem thiết bị đã sẵn sàng chưa trước khi chúng ta có thể sử dụng nó. Đây là lý do tại sao chúng ta cần thêm mã sau vào$ionicPlatform.ready chức năng bên trong 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
      } );
}

Đầu ra sẽ giống như trong ảnh chụp màn hình sau.

Mã tương tự có thể được áp dụng cho iOS hoặc Windows Phone. Bạn sẽ chỉ sử dụng một id khác cho các nền tảng này. Thay vì biểu ngữ, bạn có thể sử dụng quảng cáo xen kẽ sẽ bao phủ toàn bộ màn hình.

Phương pháp AdMob

Bảng sau đây cho thấy các phương pháp có thể được sử dụng với admob.

phương pháp Thông số Chi tiết
createBanner (tham số1, tham số2, tham số3) adId / options, thành công, thất bại Được sử dụng để tạo biểu ngữ.
removeBanner () / Được sử dụng để loại bỏ các biểu ngữ.
showBanner (tham số1) Chức vụ Được sử dụng để hiển thị biểu ngữ.
showBannerAtXY (tham số1, tham số2) x, y Được sử dụng để hiển thị biểu ngữ tại vị trí được chỉ định.
hideBanner (); / Được sử dụng để ẩn biểu ngữ.
standardInterstitial (tham số1, tham số2, tham số3) adId / options, thành công, thất bại Được sử dụng để chuẩn bị quảng cáo xen kẽ.
showInterstitial (); / Được sử dụng để hiển thị quảng cáo xen kẽ.
setOptions (tham số1, tham số2, tham số3) lựa chọn, thành công, thất bại Được sử dụng để đặt giá trị mặc định cho các phương thức khác.

Sự kiện AdMob

Bảng sau đây cho thấy các sự kiện có thể được sử dụng với admob.

Biến cố Chi tiết
onAdLoaded Được gọi khi quảng cáo được tải.
onAdFailLoad Được gọi khi không tải được quảng cáo.
onAdPresent Được gọi khi quảng cáo sẽ được hiển thị trên màn hình.
onAdDismiss Được gọi khi quảng cáo bị loại bỏ.
onAdLeaveApp Được gọi khi người dùng rời khỏi ứng dụng bằng cách nhấp vào quảng cáo.

Bạn có thể xử lý các sự kiện này bằng cách làm theo ví dụ dưới đây.

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