之前在 Cordova 上用的 AdMob 外掛 cordova-plugin-admob-free，

原作者目前已經沒有維護了，改成專心在 AdMob Plus 這個專案上面。

因此，今天就來把 cordova-plugin-admob-free 外掛換掉吧～

 

1. 安裝 AdMob Plus 外掛

首先，移除舊的 cordova-plugin-admob-free 和相依的外掛：

cordova plugin rm cordova-admob-sdk-updated
cordova plugin rm cordova-admob-sdk
cordova plugin rm cordova-plugin-admob-free

 

接著，要裝上新的 AdMob Plus (admob-plus-cordova) 外掛。

安裝時要帶入 AdMob 的應用程式 ID (Application ID)，

這個值可以在 AdMob 官網 上取得，通常是像 ca-app-pub-xxxx~yyyy 這種格式的：

 

下面是我安裝 admob-plus-cordova 時使用的指令：

AD_APP_ID="ca-app-pub-1971976XXXXXXXXX~44YYYYYYYY"
cordova plugin add admob-plus-cordova --save --variable "APP_ID_ANDROID=${AD_APP_ID}" --variable "APP_ID_IOS=${AD_APP_ID}"

 

2. 修改 config.xml

要在 Cordova 的 config.xml，加入下列的值。

其中關於 deployment-target 和 SwiftVersion 我是直接抄範例程式的，

需要的人可以再自己修改：

<widget>
    <platform name="android">
        <preference name="AndroidXEnabled" value="true" />
    </platform>
    <platform name="ios">
        <preference name="deployment-target" value="12.0" />
        <preference name="SwiftVersion" value="5.3" />
    </platform>
</widget>

 

3. 使用 AdMob Plus 顯示廣告

原本呼叫 cordova-plugin-admob-free 外掛的程式碼，

也因為 admob-plus-cordova 提供的程式介面不同，而需要修改。

 

下面的程式，是用 admob-plus-cordova 顯示一個置底的廣告橫幅：

var bannerId = "ca-app-pub-1971976XXXXXXXXX/2808YYYYYY";

if (typeof admob !== "undefined")
{
    if (!sessionStorage.adCreated) {
        // We have no way to check whether ad is created before,
        //   so we store it into sessionStorage.
        sessionStorage.adCreated = true;

        admob.start();

        banner = new admob.BannerAd({
            adUnitId: bannerId,
        });

        banner.show();
    }
}
else
{
    console.log("AdMob is not ready, type=" + (typeof admob));
}

 

這段程式裡，要注意的是要放的是廣告單元 ID (AD unit ID)，

而不是安裝外掛時使用的應用程式 ID (Application ID)。

廣告單元 ID 一樣可以從 AdMob 官網 上取得，

通常是像 ca-app-pub-xxxx/yyyy 這種格式的：

 

如果不小心放入了應用程式 ID，那麼廣告會顯示不出來。

相反的，如果在安裝外掛時，放入了廣告單元 ID 的話，

那麼在 Android app 執行時，程式可能會像我遇到的一樣掛掉：

 

然後在 logcat 裡可以觀察到，AdMob 在抱怨無效的 Application ID：

D/AndroidRuntime( 3803): Shutting down VM
E/AndroidRuntime( 3803): FATAL EXCEPTION: main
E/AndroidRuntime( 3803): Process: idv.ephrain.multilibrarylogin, PID: 3803
E/AndroidRuntime( 3803): java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider: java.lang.IllegalStateException:
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803): ******************************************************************************
E/AndroidRuntime( 3803): * Invalid application ID. Follow instructions here:                          *
E/AndroidRuntime( 3803): * https://googlemobileadssdk.page.link/admob-android-update-manifest         *
E/AndroidRuntime( 3803): * to find your app ID.                                                       *
E/AndroidRuntime( 3803): ******************************************************************************
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.installProvider(ActivityThread.java:5002)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.installContentProviders(ActivityThread.java:4594)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4534)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.access$1500(ActivityThread.java:151)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364)
E/AndroidRuntime( 3803): 	at android.os.Handler.dispatchMessage(Handler.java:102)
E/AndroidRuntime( 3803): 	at android.os.Looper.loop(Looper.java:135)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.main(ActivityThread.java:5254)
E/AndroidRuntime( 3803): 	at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime( 3803): 	at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime( 3803): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
E/AndroidRuntime( 3803): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
E/AndroidRuntime( 3803): Caused by: java.lang.IllegalStateException:
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803): ******************************************************************************
E/AndroidRuntime( 3803): * Invalid application ID. Follow instructions here:                          *
E/AndroidRuntime( 3803): * https://googlemobileadssdk.page.link/admob-android-update-manifest         *
E/AndroidRuntime( 3803): * to find your app ID.                                                       *
E/AndroidRuntime( 3803): ******************************************************************************
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803):
E/AndroidRuntime( 3803): 	at com.google.android.gms.internal.ads.zzbhw.attachInfo(com.google.android.gms:play-services-ads-lite@@20.3.0:22)
E/AndroidRuntime( 3803): 	at com.google.android.gms.ads.MobileAdsInitProvider.attachInfo(com.google.android.gms:play-services-ads-lite@@20.3.0:1)
E/AndroidRuntime( 3803): 	at android.app.ActivityThread.installProvider(ActivityThread.java:4999)
E/AndroidRuntime( 3803): 	... 11 more
I/Icing   ( 2505): IndexChimeraService.getServiceInterface callingPackage=com.google.android.gms componentName=null serviceId=30
W/ActivityManager( 1530):   Force finishing activity 1 idv.ephrain.multilibrarylogin/.MainActivity

 

所以要很小心，不要將廣告的應用程式 ID 和廣告單元 ID 搞混了～

 

另一個要注意的點，

就是我找不到要如何偵測 AdMob Plus 是否已經有建立廣告元件了…

因為 Cordova 裡面用的都是 WebView，

只要一換頁或重新整理，所有的 JavaScript 物件都會重建，

就連 Cordova 的 deviceready 事件都會重發。

但是先前已經產生的  admob.BannerAd() 物件，

雖然在程式裡已經摸不到它，但廣告橫幅元件依然會存在…

 

為了解決這個問題，我是用  sessionStorage 來儲存廣告是否已經存在。

一旦建立了 admob.BannerAd() 物件，

我就在 sessionStorage 放一個值，代表廣告已經建立。

這樣一旦換頁或重新整理，我依然可以知道現在是不是需要建立廣告元件～

 

上面幾點都完成後，

廣告就可以成功顯示出來囉：

 

參考資料：

Get Started  |  iOS  |  Google Developers

kotlin – Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider