Search in This Site

㊕ 天氣逐漸轉涼,早晚需注意保暖以免著涼:D ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ 本站的留言系統全面採用 Google+ ,歡迎多多與我們互動! ☏ 對網站有任何問題或建議,都非常歡迎使用"Guestbook"留言板,讓我們知道您的想法喔 (。◕∀◕。)

2015年12月31日 星期四

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

標籤: , , , , , , ,

大家好~ 這裡是 Laird ~ 可以叫我萊德就好囉~

如果你想要透過 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 SDKTarget 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 加入測試廣告橫幅的教學就到這邊~

我們下次見~


TOP