在 App Inventor 裡插入 Google AdMob 廣告

前幾天分享了可以直接在 App Inventor 裡，插入 Google AdMob 廣告的擴充元件「Admob Extension」，實際測試後，此元件的 TestMode 是可以顯示的，不過實際連接 Google AdMob 之後，因為我的專案目前還在準備中，所以不會跑出廣告。

那麼就開始今天的教學吧！請往下開始實作

---

1. 進到下方連結網站，將擴充元件下載下來。

P.S. 擴充元件不是只有一個，有一個最主要的元件，剩下的就是各種不同格式的廣告，都各有一個元件。
例如：妳要在手機插入橫幅廣告，妳就要匯入最主要的元件和橫幅廣告的元件。

點我前往原文教學網站

---

接著再將網頁往下滑，下載其它廣告格式的擴充元件。

---

其它還有插頁式廣告、插頁式獎勵廣告、獎勵廣告…… 等等，請依序下載。

點我下載所有擴充元件

---

2. 完成以上動作後，我們還需要將 Google AdMob 的 ID 加入「androidmanifest.xml」檔案，然後再把這個檔案，跟著上面的擴充元件一起上傳到 App Inventor。

不知道這是什麼！？
沒關係，請跟著以下實作就好。

點擊下方連結到 Niotron IDE 網站

點我前往

點選右下角的「Sign Up」按鈕註冊一個新帳號

P.S. 第一次註冊我用 Continue With Google，結果註冊失敗。

若註冊失敗請參考下篇教學文章

Niotron IDE 帳號註冊教學

註冊好後網站會跳到它的後台

點左方列表的「Extension IDE」進到 Niotron IDE 的頁面
或於網址列輸入以下網址：

https://ide.niotron.com/

P.S. 如果沒有登入帳號，直接輸入這個網址，會直接跳到剛剛那個白色的登入頁面喔~~

點選網頁右邊列表的第一項「Create a New Project」

Project Name 和 Package Name 隨意填寫，填完後按 Continue。

於編輯頁面加入以下程式碼：

import com.google.appinventor.components.annotations.androidmanifest.*;

在 @UsesPermissions 後面加入以下這行：

@UsesApplicationMetadata(metaDataElements={@MetaDataElement(name="com.google.android.gms.ads.APPLICATION_ID", value="your-app-id")})

剛剛那行最後的 value 的值「your-app-id」，改成妳 Google AdMob 的廣告 ID。
如果沒有的話，可以先用我的，如下：

ca-app-pub-6647239379750500~7673108361

有興趣再另外開個教學文章吧！

以上動作都完成後，接下來請點選網頁右上方的「Compile Extension」。

然後就會開始編譯，完成後檔案會自動下載。

至此，前置作業就準備完成了！
要開始用 App Inventor 囉～～

3. 開啟 App Inventor 並新增一個專案「Admob」

所需元件如下：

五個按鈕、一個配置區域(顯示橫幅廣告用)、七個剛剛下載的擴充元件。

P.S. 擴充元件要一個一個匯入，才有辦法拉到工作面板哦~
全都是不可視元件

除了 AdmobSdks 和 AdmobAdId，其餘五個擴充元件的屬性，要將 TestMode 打勾。

這樣在測試的時候，才會顯示廣告。

老師，請問 TestMode 上面的 AdUnitId 是什麼？

Ans：在 Google AdMob 新增應用程式後，可以在這個應用程式增加廣告格式，在廣告格式裡的 ID 就可以填入到此。

設定好後，切換至程式設計

新增兩個程式方塊如下：

解析：在讓廣告顯示之前，要先呼叫 AdmobSdks.InitializeSdk 方法，當初始化成功後會觸發 AdmobSdks.SdkInitialized 事件，然後就可以開始準備顯示廣告了。

P.S. 進度對話框加不加都無所謂，我只是測試用的。

接著要來依序 Load 廣告，先從橫幅廣告開始。
新增兩個程式方塊如下：

解析：在顯示廣告之前要先 LoadBanner，好了之後會觸發 AdLoaded 事件，然後我們再將廣告 Show 出來。

剩下的都差不多！先 Load 再 Show
這裡就不再一一細講了

好了之後請打包成 apk 檔案，再用模擬器或手機做測試。
用 AI Companion 連線會出錯

這樣就完成啦！
那麼這次的教學就到這邊，如有不清楚的地方歡迎留言。

---

專案完整程式方塊

---

專案 aia 檔案下載

點我下載

---

範例專案執行影片

---

---

如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊