[Cordova] 使用 AdMob Plus 外掛在 App 中顯示廣告

[Cordova] 使用 AdMob Plus 外掛在 App 中顯示廣告

之前在 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

(本頁面已被瀏覽過 683 次)

3 thoughts on “[Cordova] 使用 AdMob Plus 外掛在 App 中顯示廣告

  1. 你好,请问admob.NativeAd(), 可以被销毁或移除吗?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料