在 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,結果註冊失敗。
若註冊失敗請參考下篇教學文章
註冊好後網站會跳到它的後台
點左方列表的「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 連線會出錯
這樣就完成啦!
那麼這次的教學就到這邊,如有不清楚的地方歡迎留言。
5 則留言
王朝詮
不好意思想請問一下,我在註冊Niotron這步一直卡關,完全沒辦法註冊,請問該怎麼解決呢?
JamesBang
你好!我剛剛註冊新帳號也一直失敗,Sign Up 怎麼點都沒反應!!
不過後來被我亂試成功了,這個方法我反覆測試了兩三次確定是可行的。
只要先 Log In 再 Sign Up 就行了!
1. 你先到 Niotron 的登入頁,輸入你要註冊的 Email 和 Password 後,點擊 Sing In。
接著會跳出 Error Occurred 的頁面
2. 然後點網頁中的 Retry 回到登入頁
3. 接著點擊 Continue With Google 底下的 Sign Up。
頁面不會跳走,你原本的表單上方會多出一格 Name。
4. 輸入完 Name 之後,再點擊 Sign Up 按鈕。
它就會寄出一封確認信到你的信箱了
你先試試看!我晚點有時間再錄製教學影片 PO 上來
王朝詮
太感謝你了,已成功註冊!!
你的方法一試就成功了,大感謝~~
JamesBang
👍
JamesBang
https://youtu.be/ACpMygzWSMY