Google AdMob Android iOS

行動裝置投放廣告Google AdMob

王祥宇 2020/07/23 09:33:22
45

一、前言

1.     介紹Google AdMob

  

為google提供開發者一個平台投放廣告並從中得到收益

 

使用Google AdMob的好處有前面提到的廣告收益、由於其原生性帶給使用者更好的體驗、

 

快速的廣告擴散速度及有提供相關的報告來檢視廣告成效

 

整個系統就靠Google Mobile Ads SDK這個關鍵的東西來運行

 

 

2.     Ads種類

 

有四個,以它們功能性及排版來區分

①橫幅廣告                                 ②插頁式廣告

                  

 

 

③獎勵廣告                                   ④原生進階

                     

 

 

 

二、申請服務流程

      首先,要先創一個廣告投放商的帳號

 

      網址:https://apps.admob.com/signup/create-account

 

      登入隨便一個帳號後他就會要你填一些東西,然後就可以開始匯入廣告

 

      在你創造第一個廣告前他會需要一個名字一個平台(Android或iOS)

 

      點完大概會長這樣

      

      

 

      下一步會讓你選要投放哪種廣告(上方Ads種類那四種)

 

      一些基本資料輸入後要記得應用程式ID及廣告ID

 

      下一步導入SDK會用到

 

 

三、導入SDK

1. 導入元件

(Android)使用AdMob必要條件

 

Android Studio 3.2 以上的版本

minSdkVersion 1 6 以上的版本

compileSdkVersion 28 以上的版本

 

第一步:在build.gradle(project)檔的allprojects加入repositories>>google()

allprojects {
    repositories
{
        google
()
   
}
}

 

第二步:在build.gradle(app)檔的dependencies implementation library

 

dependencies {
   
implementation 'com.google.android.gms:play-services-ads:19.2.0'
}

 

第三步:在AndroidManifest.xml的<application>tag裡面加入一筆meta-data 並附上應用程式ID

 

<manifest>
   
<application>
       
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
       
<meta-data
           
android:name="com.google.android.gms.ads.APPLICATION_ID"
           
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

   
</application>
</manifest>

 

 

(iOS)使用AdMob必要條件

 

Xcode 11 以上的版本

②搭載iOS 8.0以上的裝置

 

第一步:用CocoaPods安裝SDK

 

pod 'Google-Mobile-Ads-SDK'

 

 

pod install --repo-update

 

第二步:在Info.plist檔加一個 GADApplicationIdentifier 的key

 

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

ps上面這串ca-app的是可供測試應用程式ID

 

 

2. 注意事項

 

Android在導入library的時候可能會遇到插件不相容的情況,新的AndroidX跟舊的Android Support會打起來

 

可以用Migrate to AndroidX...這個功能,在Refactor裡,然後他會幫你看有多少程式是需要把support換成X

 

確認沒問題下方按Do Refector

 

 

四、實作

1. 初始化

(Android)初始化SDK

 

        MobileAds.initialize(this, new OnInitializationCompleteListener() {
           
@Override
           
public void onInitializationComplete(InitializationStatus initializationStatus) {
           
}
       
});

ps  MobileAds.initialize()  只要下一次,建議放在程式進入點

 

而如果要preload Ads,在這之前就做好準備工作

 

 

(iOS)初始化SDK

 

import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  func application
(_ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions
: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

   
GADMobileAds.sharedInstance().start(completionHandler: nil)

   
return true
 
}

}

ps  GADMobileAds.sharedInstance() 只要下一次,建議放在程式進入點

 

而如果要preload Ads,在這之前就做好準備工作

 

 

2. 介面設計

 

(以橫幅廣告為例)

 

(Android) 測試用廣告ID:ca-app-pub-3940256099942544/6300978111(測試時請用這組

 

(1)可以在layout那邊直接加一個

<com.google.android.gms.ads.AdView

...

</com.google.android.gms.ads.AdView>

要注意的兩個屬性是

ads:adSize - 廣告尺寸

ads:adUnitId - 廣告ID(見申請服務流程)

 

(2)也可以在程式碼中new一個AdView

 

AdView adView = new AdView(this);
adView
.setAdSize(AdSize.BANNER);
adView
.setAdUnitId("ca-app-pub-3940256099942544/6300978111");
// TODO: Add adView to your view hierarchy.

 

最後配合loadAd()方法載入廣告以及前面初始化,實際上大概長這樣

 


       
MobileAds.initialize(this, new OnInitializationCompleteListener() {
           
@Override
           
public void onInitializationComplete(InitializationStatus initializationStatus) {
           
}
       
});
        mAdView
= findViewById(R.id.adView);
       
AdRequest adRequest = new AdRequest.Builder().build();
        mAdView
.loadAd(adRequest);
   
}

}

 

 

(iOS)測試用廣告ID:ca-app-pub-3940256099942544/2934735716(測試時請用這組

 

(1)可以直接將GADBannerView 加到 storyboard 或 xib 文件中

 

(2)或用程式碼加入

 

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

 
var bannerView: GADBannerView!

 
override func viewDidLoad() {
   
super.viewDidLoad()
   

   
// In this case, we instantiate the banner with desired ad size.
    bannerView
= GADBannerView(adSize: kGADAdSizeBanner)

    addBannerViewToView
(bannerView)
 
}

  func addBannerViewToView
(_ bannerView: GADBannerView) {
    bannerView
.translatesAutoresizingMaskIntoConstraints = false
bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
bannerView.rootViewController = self
    view.addSubview(bannerView)
    view
.addConstraints(
     
[NSLayoutConstraint(item: bannerView,
                          attribute
: .bottom,
                          relatedBy
: .equal,
                          toItem
: bottomLayoutGuide,
                          attribute
: .top,
                          multiplier
: 1,
                          constant
: 0),
       
NSLayoutConstraint(item: bannerView,
                          attribute
: .centerX,
                          relatedBy
: .equal,
                          toItem
: view,
                          attribute
: .centerX,
                          multiplier
: 1,
                          constant
: 0)
     
])
   
}
   

}

 

其中bannerView.adUnitID就是廣告ID而bannerView.rootViewController是畫面控制器

 

最後記得一樣要加一個bannerView.load(GADRequest())去load整個廣告

 

3. 監聽事件

(Android)

 

mAdView.setAdListener(new AdListener() {...});

其中有一些method

        (1) onAdLoaded():廣告載入完成會進來

 

        (2) onAdFailedToLoad():載入失敗會進來,有errorCode可以看原因

 

        (3) onAdOpened():點擊廣告後會進來

 

        (4) onAdLeftApplication():承上,onAdOpened()結束後(例如user點廣告跳到外部連結

 

        (5) onAdClosed():關閉廣告後進來

 

 

 

(iOS)

 

/// 廣告載入完成會進來
func adViewDidReceiveAd
(_ bannerView: GADBannerView) {
 
print("adViewDidReceiveAd")
}

/// 載入失敗會進來
func adView
(_ bannerView: GADBannerView,
    didFailToReceiveAdWithError error
: GADRequestError) {
 
print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

///點擊廣告後會進來
func adViewWillPresentScreen
(_ bannerView: GADBannerView) {
 
print("adViewWillPresentScreen")
}

/// 廣告關閉前會進來
func adViewWillDismissScreen
(_ bannerView: GADBannerView) {
 
print("adViewWillDismissScreen")
}

/// 廣告關閉後會進來
func adViewDidDismissScreen
(_ bannerView: GADBannerView) {
 
print("adViewDidDismissScreen")
}

/// user點廣告跳到外部連結之類的操作
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
 
print("adViewWillLeaveApplication")
}

 

五、後續

 

一開始不會收費,直到收益100美金以上才會收

 

測試的時候要確保使用的廣告ID是測試用的

 

不然帳號會被凍結!!!

 

 

以下為官方提供的git source code

 

(Android) https://github.com/googleads/googleads-mobile-android-examples

 

(iOS) https://github.com/googleads/googleads-mobile-ios-examples

 

 

 

 

 

 

王祥宇