Search

㊗ 新的一年，祝福讀者們 2020 新年新希望！！ ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室！ ◎ Android Studio 基礎教學籌備中，敬請期待！ ☏ 對網站有任何問題或建議，都非常歡迎使用留言板或至 Facebook 粉絲團發訊息，讓我們知道您的想法 (੭ु´ ᐜ `)੭ु

2015年12月31日 星期四

[ AdMob ] [ Eclipse ] 如何在 Android App 加入 AdMob 測試廣告橫幅 ( with Mac OS X )

標籤： , , , , , , ,

如果你想要透過 App 盈利，通常有兩種方式，一種就是將你的 App 設定為付費模式，使用者要下載你的 App 要先付費（例如小遊戲通常定價為 30 元或 60 元），而另外一種方式就是主打免費，然後放置聯播網廣告賺錢。

除了國內有名的聯播網平台之外，最廣為開發者歡迎的行動廣告平台，應該還是莫過於 Google 旗下的 AdMob 行動廣告聯播服務！



此篇文章將詳細描述如何將 AdMob 提供的測試廣告橫幅加入在 Eclipse IDE 開發的 Android App 。

而事實上， Google 官方也有為此做了一系列的說明文件，圖文並茂，對開發者實在幫助很大，詳情可至以下網頁瀏覽：




不過萊德在按照文件說明操作的時候，碰到了一些小問題，想到有人可能也曾碰過類似的問題，因此才把完整的加入過程分享出來，幫助遇到同樣問題的網友~


以下是我嘗試加入 AdMob 測試廣告橫幅的開發環境資訊：

Operation System: Mac OS X 10.11.2

Eclipse IDE Version: Mars.1




Eclipse IDE 都已經安裝好 Android SDK 以及相關套件，也沒調整其他特殊的設定。

關於已安裝的套件資訊可以參照以下兩張截圖：





都準備就緒之後，就可以開新專案囉~

如果對開新專案有任何問題，可以點擊以下連結回顧之前的文章，這邊就不再贅言囉~

[ Eclipse ] [ Android ] 在 Eclipse 執行你的第一個 Android App ( with Mac OS X )





比較需要注意的是，下圖 Minimum Required SDK ， Target SDK ， 以及 Compile With 的 API 設定， Theme 的部分選擇 " None " 即可。



接下來的設置皆為預設值~







以下直接開始修改程式碼，首先是 AndroidManifest.xml ，在 <application 前加入以下程式碼：

<!-- Include required permissions for Google Mobile Ads to run-->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>


然後在 <application 內，第一個 <activity 前加入以下程式碼：

<!--This meta-data tag is required to use Google Play Services.-->
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />


最後在 </application> 前加入以下程式碼：

<!--Include the AdActivity configChanges and theme. -->
<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />




到這邊 AndroidManifest.xml 就全部修改完成，儲存後如果發生錯誤訊息先暫時不用理會它，繼續以下的步驟。



在 Package Explorer 視窗找到 values 資料夾，點開裡面有個 strings.xml ，在 strings.xml 當中加入以下程式碼：

<string name="banner_ad_unit_id">ca-app-pub-3940256099942544/6300978111</string>


再來到 layout > activity_main.xml ，在 <RelativeLayout> 裡面加入以下程式碼：

xmlns:ads="http://schemas.android.com/apk/res-auto"



之後加入測試廣告橫幅的主體程式碼：

<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="@string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>





儲存後有錯誤訊息一樣不必理會，繼續以下步驟。



在 Package Explorer 找到 src 資料夾，裡面有一開始你命名的 Package ，點開後就會找到 MainActivity.java 。

在 MainActivity.java 當中 import 另外兩個函式庫：

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;


然後在 protected void onCreate() 函式裡面加入以下程式碼：

AdView mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);


P.S. 這段程式碼的功能就是啟動測試廣告橫幅。



到這邊為止，程式碼修改的工作就告一個段落，接著就是要把錯誤訊息全部處理掉，才能正確執行 App 。



請再新增一個 Project （不需重新開啟 Eclipse，直接新增），選擇 Android Project from Existing Code 。



" Browse "




這邊要找到你在 Android SDK Manager 下載的 Google Play services 套件，由這篇文章前面的截圖可以知道， Google Play services 是被下載到 Extra 資料夾裡面，所以按照以下截圖的步驟應該馬上就能找到該套件。

P.S. 這邊 Finder 的預設搜尋路徑可能會跳掉，不是在你的 Android SDK 資料夾，此時要看你當初下載的 Adroid SDK 放在何處，像萊德一直是放在 Downloads 資料夾裡面。





找到後直接按下 " Open " 。

P.S. 啟動 AdMob 廣告只需要 libproject 裡面的 google-play-services_lib 套件，所以不用整個 google_play_services 都含括進專案。



勾選 " Copy projects into workspace " 後，直接按下 " Finish " 新增專案。

P.S. " Copy projects into workspace " 的用意是複製一份 google-play-services_lib 到 workspace 以便作修改，如果沒有勾選，我們在 google-play-services_lib 專案裡面所做的任何變更都會影響到原本的 Android SDK 。（也就是會影響到你在 Android SDK Manager 下載的 google-play-services 套件內容）




加入後會發現 google-play-services_lib 專案本身有錯誤訊息，就我目前所知，這些錯誤訊息會跟你目前 IDE 有的套件有密切關連，例如我的 IDE 裡面就完全沒有 API 21 ，也就是 Android 5.0 以上的套件，所以 values-v21 資料夾就會出現錯誤訊息，此時只要把它刪除即可。




<--- 以下是 Google 官方說明文件沒有提到的重要概念 --->

google-play-services_lib 這個專案，會視每個開發人員的需求而有不同的應用。

 此篇教學是將 google-play-services_lib 當作 AdMob_Test 專案的「函式庫」，所以 google-play-services_lib 並不需要 layout 版面配置，必須將所有 layout 相關的資料夾刪除。

P.S. 如果不把 google-play-services_lib 所有 layout 相關的資料夾刪除，可能會導致與 AdMob_Test 專案的 layout 版面配置衝突，所以這邊建議全部刪除會比較好。






此時你會發現 AdMob_Test 專案的錯誤訊息還沒有消失，那是因為還差最後一個步驟。

在原本的 AdMob_Test 專案上按滑鼠右鍵，點選 Properties 。



右側選單選擇 Android ，然後點選 " Add " 按鈕。



會發現有一個 google-play-services_lib 的函式庫可以新增，直接按下 " OK " 加入。



" OK "



加入 google-play-services_lib 之後，就像變魔法一樣，之前的所有的錯誤訊息都消失不見了！

這個時候你就可以在你的測試機執行 AdMob_Test 專案，欣賞你所建置的 AdMob 測試廣告橫幅囉~

P.S. 測試機必須能連上網路，也可以使用 AVD 執行專案。



以下是使用 ASUS ZenFone C 執行 AdMob_Test App 直式和橫式的畫面。





假如你在執行 App ，發現行動廣告出不來（尤其是直式畫面的時候），請將 activity_main.xml 裡面 <RelativeLayout 括弧內部分有關 android:padding 的程式碼刪除掉，如下面兩張圖所示：





如此一來，應該就能順利跑出 AdMob 測試廣告橫幅囉~





藉由廣告來盈利絕對是正當的獲利途徑，但代價就是應用程式可能會變得較為肥大。

若你有去觀察 AdMob_Test 這個 App 安裝到測試機後的程式大小，你就會很驚訝，才一個 Hello world! 字串再加上廣告橫幅，這樣一個簡單的 App 竟然就要佔用 8.5MB 左右的手機空間！可見 google-play-services_lib 是個相當龐大的函式庫。



另外，此篇文章的廣告橫幅的 banner_ad_unit_id 是 Google 官方提供的測試用 ID ，如果你要為你的 App 進行廣告橫幅測試，請務必使用此測試 ID 進行測試。

假如你在開發過程中，故意使用你申請的 AdMob ID 去做測試，會被視為違反 AdMob 政策，可能會導致你的帳戶停權，所以萊德在這邊要提醒讀者們，千萬不要以身試法喔！



如何在 Android App 加入測試廣告橫幅的教學就到這邊~

我們下次見~


Post by： 於