您 無 權 存 取 與 您 AdMob 帳戶 連結 的 Google Ads 帳戶App 加 廣告AdMob 客服Google Play 廣告AdMob 中介服務Admob support teamapp廣告收入admob收入計算第15 章- 使用Google AdMob 來播放橫幅廣告
文章推薦指數： 80 %
你便可以透過使用者的瀏覽或點擊廣告來獲利。
想要在App 中使用AdMob，你只需要使用Google 的行動廣告SDK（Google Mobile Ads SDK），這個整合的工作並 ...
AppCoda出版
聯絡我們
分享此書
序言
第1章-打造自適應使用者介面
第2章-使用Diffable數據源為TableView加入區塊與索引列表
第3章-讓表格視圖Cell動起來
第4章-JSON與SwiftCodable的介紹
第5章-如何整合Twitter與FacebookSDK實作分享功能
第6章-如何在App中整合Email與附加檔案
第7章-使用MessageUI框架進行簡訊（SMS）與媒體簡訊（MMS）傳送
第8章-要如何在地圖上取得方位與繪畫路徑
第9章-使用在地搜尋API搜尋附近興趣點
第10章-音訊錄製與播放
第11章-使用AVFoundation框架進行QRCode掃描
第12章-URLScheme的運用
第13章-打造一個以手勢控制的全螢幕相機
第14章-使用AVKit實做錄影與播放
第15章-使用GoogleAdMob來播放橫幅廣告
第16章-使用客製化字型與動態型態
第17章-AirDrop、UIActivityViewController與統一格式識別器的運用
第18章-使用集合視圖建立網格佈局
第19章-與集合視圖互動
第20章-使用構圖佈局與UITraitCollection來設計自適應集合視圖
第21章-使用WidgetKit開發一個天氣小工具（Widget）
第22章-側邊選單製作與Objective-C函式庫的運用
第23章-視圖控制器轉場以及動畫
第24章-建立一個下滑選單
第25章-Cell尺寸自適應與動態型態
第26章-XML解析、RSS與表格視圖Cell的展開
第27章-使用UIVisualEffect來產生模糊背景
第28章-使用TouchID與FaceID驗證
第29章-建構一個似轉盤的使用者介面
第30章-用Parse幫App加上行動後端服務
第31章-如何使用CoreData來解析CSV與預載一個SQLite資料庫
第32章-手勢辨識、以折線與路徑來串連多個標註
第33章-在Swift專案中使用CocoaPods
第34章-打造一個簡單的貼圖App
第35章-使用訊息框架打造一個iMessageApp
第36章-使用IBDesignable與IBInspectable來自訂UI元件
第37章-使用Firebase實作使用者登入驗證
第38章-使用Firebase來進行Google與Facebook驗證
第39章-使用FirebaseDatabase與Storage來建立一個Instagram類型的App
第40章-CoreML的運用
第41章-使用ARKit與SpriteKit打造ARApp
第42章-擴增實境3D物件的運用-使用ARKit與SceneKit
第43章-利用CreateML訓練你的機器學習模型來進行圖片辨識
第44章-使用CreateML建構一個情緒反應分類器來分類使用者評論
第45章-如何使用ARKit建立圖像追踪功能
本書使用GitBook釋出
iOS15App程式設計進階攻略（試閱版）
第15章使用GoogleAdMob來播放橫幅廣告
就跟許多開發者一樣，你或許想要找到從App盈利的方式，最簡單的方式，就是將你的App放進AppStore，以$0.99美元或以上的售價來銷售，這個付費模式對某些App來說非常適合，不過，這並非唯一的獲利模式。
本章，我們將介紹如何使用GoogleAdMob來盈利。
有點不懂，為何要使用GoogleAdMob呢？我們開發的是iOSApp，為何我們不使用Apple的iAd呢？
在2016年初，Apple宣布要停止iAdApp網路服務。
因此，你將不再使用iAd作為iOSApp的廣告方案。
你必須重新尋找其他放置橫幅廣告的替代的方式。
在所有行動網路廣告中，Google的AdMob無庸置疑是最受歡迎的。
跟iAd類似，Google提供了SDK讓開發者能夠在自己的iOSApp中嵌入廣告。
Google販售它們的廣告空間（譬如橫幅廣告（banner））給許多的廣告主。
你便可以透過使用者的瀏覽或點擊廣告來獲利。
想要在App中使用AdMob，你只需要使用Google的行動廣告SDK（GoogleMobileAdsSDK），這個整合的工作並不困難，只需要幾行程式就可以播放一個簡單的橫幅廣告，馬上就可以開始賺錢了。
沒有比直些試做如何整合AdMob更好的方式。
如以往一樣，我們會從一個簡單的專案來開始，然後加入一個橫幅廣告，你可以從http://www.appcoda.com/resources/swift55/GoogleAdDemoStarter.zip.來下載Xcode專案模板。
除了AdMob的整合之外，你也會學習如何以Swift來執行延遲載入（lazyloading）。
申請GoogleAdMob帳號
在以GoogleAdMob整合你的App之前，你需要先申請AdMob服務。
現在使用Safari或你偏好的瀏覽器來打開以下這個連結：
https://www.google.com/admob/
因為AdMob已經成為Google的一部分，你只要以自己的Google帳號登入即可，或者你也可以註冊一個新帳號。
AdMob需要你提供一個有效的AdSense以及AdWords帳戶。
倘若沒有的話，請跟著以下的登入步驟來連接你的Google帳號。
圖15.1.GoogleAdMob帳號的申請
註冊完成之後，你會被導引至AdMob儀表板（Dashboard），在左側的導覽列表，選取Apps選項。
圖15.2.AdMob儀表板
在這裡，選取AddYourFirstApp選項。
然後，您需要選擇應用平台，即iOS。
AdMob將會詢問你的App是否已經在AppStore上架了，選取「No」選項。
我們將手動填入這些表單資訊來註冊App。
在未來，倘若你的App已經在AppStore上架，你便可以讓AdMob來取得你的App資訊。
圖15.3.你的AdMobAppID
將App名稱設定為GoogleAdMobLiveDemo並點擊AddApp來繼續下一個步驟。
你應該會看到一條確認訊息，提示已成功建立App。
然後，你可以點擊Done按鈕返回到AppOverview。
接著，我必須至少要建立一個廣告單元（Adunit）。
點選AddAdUnit來繼續。
針對這個範例，我們使用橫幅（banner）的廣告格式，所以選取「Banner」並接受預設的選項。
而廣告單元名稱（Adunitname）設定為BannerAd。
圖15.4.建立一個橫幅廣告
點擊CreateAdUnit來產生單元ID。
這完成了你的新App的設置。
你將會在實作的過程介紹中找到AppID與廣告單元ID（AdunitID）。
請儲存這些資訊，當我們整合AdMob到Xcode專案時，我們會用到它們。
安裝Google行動廣告框架
在使用AdMob之前，你必須在Xcode項目中安裝GoogleMobileAdsSDK。
其中一個安裝SDK的方法就是使用CocoaPods。
此書有一整章解釋了什麼是CocoaPods以及如何使用它。
如果你還沒有讀過第33章，請先參考它。
假設你的Xcode項目保存在Desktop文件夾中，打開終端並鍵入以下命令以更改文件夾：
cd~/Desktop/GoogleAdDemo
然後通過輸入podinit建立Podfile。
打開項目的Podfile並將這一行添加到target中：
pod'Google-Mobile-Ads-SDK'
最後，儲存更改並鍵入以下命令以安裝SDK：
podinstall
採用Google行動廣告框架
現在你已經在AdMob完成了設置，我們開始進行實作。
打開Xcode並開啟起始專案的GoogleAdDemo.xcworkspace。
請注意是開啟GoogleAdDemo.xcworkspace，而不是GoogleAdDemo.xcodeproj。
如果你仔細查看項目導航器，你會發現兩個項目：GoogleAdDemo和Pods。
前者是原始項目，而Pods是捆綁GoogleMobileAdsSDK的項目。
圖15.5.現在運行App會顯示錯誤
如果你嘗試編譯並運行這個項目，會在Console發現一個問題。
這是正常的，因為我們沒有為SDK提供應用AppID。
稍後，我們將進行一些更改並對其進行調整以顯示廣告。
要在你的程式中，使用GoogleMobileAdsSDK的話，你需要匯入框架，並註冊你的AppID。
我們將AppDelegate.swift檔中做初始化。
插入這個import敘述至檔案的最前面：
importGoogleMobileAds
接下來，插入以下的程式至application(_:didFinishLaunchingWithOptions:)方法中：
funcapplication(_application:UIApplication,didFinishLaunchingWithOptionslaunchOptions:[UIApplication.LaunchOptionsKey:Any]?)->Bool{
GADMobileAds.sharedInstance().start(completionHandler:nil)
returntrue
}
在App啟動時初始化GoogleMobileAdsSDK，可以讓SDK儘早執行配置。
接下來，打開Info.plist並添加一個名為GADApplicationIdentifier的新行。
回想一下，AdMob為你的App建立了一個獨一無二的AppID，你必須在此條目中設置那個ID。
對我來說，會將其設置為：
ca-app-pub-6371581406920912~3037490636
請確保將AppID設定為你自己的ID。
另外，請為SKAdNetworkItems添加另一個條目。
要添加這兩個key，可以在項目導航器中右鍵單擊Info，然後選擇OpenAs>SourceCode。
這使你可以在程式碼編輯器中編輯Info.plist文件。
圖15.6.設定Info.plist
在Info.plist插入以下內容並將其放在之前：
好了！我們終於完成所有設定。
在表格視圖標題顯示橫幅廣告
我們開始以最簡單的方式在你的App中呈現橫幅廣告。
我們將會從Google請求一個橫幅廣告，並將這幅廣告顯示在表格標題（header）。
要在該位置呈現一個橫幅廣告，你所需要做的便是建立一個GADBannerView物件，設定它的委派，以及根視圖控制器（rootviewcontroller）。
然後你以取得一個橫幅廣告的廣告請求來呼叫它的load方法。
當廣告準備要顯示時，他會呼叫GADBannerViewDelegate協定的adViewDidReceiveAd(bannerView:)方法。
所以你只需要實作這個方法就可以在表格視圖標題來顯示橫幅廣告。
好的，我們來進行實作的部分。
現在開啟NewsTableViewController.swift。
首先，匯入GoogleMobileAds框架：
importGoogleMobileAds
接下來，宣告一個GADBannerView型態的變數。
這是用來存放橫幅視圖（bannerview）的變數：
lazyvaradBannerView:GADBannerView={
letadBannerView=GADBannerView(adSize:GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(300))
adBannerView.adUnitID="ca-app-pub-8501671653071605/1166331146"
adBannerView.delegate=self
adBannerView.rootViewController=self
returnadBannerView
}()
以上的程式中，我們使用一個閉包（closure）來初始化adBannerView變數，也就是產生一個GADBannerView的實例（instance）。
在初始化過程中，我們告訴這個SDK我們想要取得一個自適應橫幅廣告（adaptivebanner）（GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth）。
如同名稱的意涵，自適應橫幅廣告可以很聰明的偵測螢幕寬度並根據寬度來調整螢幕大小。
同時我們也設定廣告單元ID，委派（delegate）與根視圖控制器（rootviewcontroller）。
同樣的，請將ID換成你自己的。
我們使用延遲初始化（lazyinitialization，有時候稱作延遲實例化（lazyinstantiation）或延遲載入（lazyloading））來初始化adBannerView變數。
在Swift，你使用lazy關鍵字來指示某個變數可以稍後才初始化，更精確地說法是，這個變數只有在使用時才會被實例化。
這個技術對於延遲物件的建立，尤其是對需要花點時間來載入物件或者是你所參照的物件還沒準備好物件的建立時特別有用。
在初始化期間，我們設定delegate與rootViewController屬性為self。
不過NewsTableViewController在這時候還沒準備好。
我們使用lazy來延遲adBannerView的初始化。
一定要使用延遲初始化來建立橫幅廣告視圖嗎？不，我是想要利用這個機會來介紹延遲初始化，並示範如何使用閉包來做變數的初始化。
你也可以像這樣，不使用延遲初始化：
varadBannerView:GADBannerView?
overridefuncviewDidLoad(){
super.viewDidLoad()
adBannerView=GADBannerView(adSize:kGADAdSizeSmartBannerPortrait)
adBannerView?.adUnitID="ca-app-pub-8501671653071605/1166331146"
adBannerView?.delegate=self
adBannerView?.rootViewController=self
}
不過，如你所見，前面一種初始化方式可以讓我們將所有的初始化程式放在閉包中，程式的可讀性更高，也更易於管理。
現在我們已經建立了adBannerView變數，下一步就是廣告的請求。
你只需要加入以下這一行程式至viewDidLoad方法中就可以辦到：
GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers=[GADSimulatorID]
adBannerView.load(GADRequest())
要在測試環境中加載生產廣告，Google會要求你設置測試設備。
這是第一行程式碼的目的。
你可能想知道為何你需要定義這個測試裝置。
如果省略這行程式會如何呢？你的App一樣能夠運作並顯示廣告。
不過這是Google的政策，你必須要去跟隨。
當你在AdMobUI註冊一個App並且建立之後可以在你的App中使用的單元ID後，在開發時，你需要將你的裝置明確地設定為測試裝置。
這是非常重要的。
以真實的廣告來測試將違反AdMob政策，也因而會讓你的帳號被暫停。
-AdMob整合指南
最後，我們需要採用GADBannerViewDelegate協定。
如下所示，我們將會建立一個擴展來採用這個協定並實作兩個可選方法：
extensionNewsTableViewController:GADBannerViewDelegate{
funcbannerViewDidReceiveAd(_bannerView:GADBannerView){
print("Bannerloadedsuccessfully")
tableView.tableHeaderView?.frame=bannerView.frame
tableView.tableHeaderView=bannerView
}
funcbannerView(_bannerView:GADBannerView,didFailToReceiveAdWithErrorerror:Error){
print("Failtoreceiveads")
print(error)
}
}
當廣告成功載入後，bannerViewDidReceiveAd方法會被呼叫。
在這個方法中，我們只是指定這個橫幅視圖至表格視圖的標題視圖（headerview）。
這可以讓App在表格標題顯示橫幅廣告。
倘若廣告載入失敗，我們只要印出錯誤訊息至主控台即可。
試著執行範例App並測試一下。
當App啟動時，你會見到在表格視圖的最前面出現了一個橫幅廣告。
圖15.7.在表格視圖標題的橫幅廣告
注意：如果你的App未能取得廣告，請嘗試將adUnitId的值更改為ca-app-pub-3940256099942544/2934735716，即Google提供的示範廣告。
另外，有時Google需要一些時間來啟用你的廣告單元，不想等待的話，可以先使用這個示範廣告ID進行測試。
添加動畫效果
有時候在橫幅廣告加入點精緻的動畫像是廣告如何轉場至畫面中，使用者的體驗會更棒。
在這一節，我會告訴你如何讓橫幅廣告動起來。
當廣告轉場至畫面時，我們將加入一個滑下動畫（slide-downanimation）。
這個技巧是應用UIView動畫至橫幅廣告。
當廣告第一次載入時，我們重新調整橫幅廣告的位置讓它離開畫面。
然後我們使用滑下動畫。
如同之前所述，bannerViewDidReceiveAd方法在廣告準備好時被呼叫。
要讓廣告動起來，我們需要修改方法如下：
funcbannerViewDidReceiveAd(_bannerView:GADBannerView){
print("Bannerloadedsuccessfully")
//重新調整橫幅廣告位置來建立滑下特效
lettranslateTransform=CGAffineTransform(translationX:0,y:-bannerView.bounds.size.height)
bannerView.transform=translateTransform
UIView.animate(withDuration:0.5){
self.tableView.tableHeaderView?.frame=bannerView.frame
bannerView.transform=CGAffineTransform.identity
self.tableView.tableHeaderView=bannerView
}
}
我們先建立一個translateTransform來移動橫幅廣告視圖離開畫面，然後呼叫UIView.animate來將廣告滑下至畫面中。
執行這個專案並測試App，這個廣告將會以動畫效果來呈現。
圖15.8.橫幅廣告動起來
緊貼的橫幅廣告
當你滾動表格視圖時，廣告便消失了。
它並沒有緊貼表格視圖標題。
你可能想知道，要如何顯示一個隨時緊貼的橫幅廣告。
這也是本節所要探索的內容。
這個橫幅廣告現在已經插入表格標頭視圖。
倘若你想要能夠將廣告貼緊不放，你可以將其加在區塊（section）的標題視圖而不是表格的標題視圖。
讓我們來看如何實作。
在NewsTableViewController類別插入以下的方法：
overridefunctableView(_tableView:UITableView,viewForHeaderInSectionsection:Int)->UIView?{
returnadBannerView
}
overridefunctableView(_tableView:UITableView,heightForHeaderInSectionsection:Int)->CGFloat{
returnadBannerView.frame.height
}
我們以自己的方法來覆寫（override）預設的tableView(_:viewForHeaderInSection:)方法，並回傳橫幅廣告視圖。
預設標題的高度對橫幅廣告來說太小。
所以我們同時覆寫了tableView(_:heightForHeaderInSection:)方法，並回傳橫幅廣告視圖框（frame）的高度。
最後，修改bannerViewDidReceiveAd方法如下：
funcbannerViewDidReceiveAd(_bannerView:GADBannerView){
print("Bannerloadedsuccessfully")
//重新調整橫幅廣告位置來建立滑下特效
lettranslateTransform=CGAffineTransform(translationX:0,y:-bannerView.bounds.size.height)
bannerView.transform=translateTransform
UIView.animate(withDuration:0.5){
bannerView.transform=CGAffineTransform.identity
}
}
我們只是移除了跟表格視圖標題有關的程式，因為已經用不到了。
如此，現在可以再次準備測試這個App。
橫幅廣告已經在固定位置顯示了。
播放插播廣告
除了在App中使用橫幅廣告之外，GoogleMobileAdsSDK也可以讓你很容易地播放插播廣告（interstitialads，也就是全螢幕的廣告）。
一般來說，你可以透過插播廣告來賺取更多廣告費，因為它完全蓋住了App的內容，並獲得了使用者的注意。
這種廣告的缺點就是有點惱人，因為它強迫使用者來檢視廣告除非他們點擊取消。
不過這還是依照所設計的頻率以及在什麼情況下你要播放全螢幕廣告而定。
我用過一些App，每幾分鐘持續出現插播廣告。
透過謹慎規劃的廣告編排，可以讓你的App不那麼擾人。
舉例來說，你可以只出現一次廣告，倘若你正在開發遊戲的話，你可以設計在遊戲關卡之間播放。
無論如何，我的重點是告訴你如何在iOSApp中播放插播廣告。
我的規劃是在使用者打開這個範例App時播放這個廣告。
首先，你必須先回到AdMob的儀表板（(https://apps.admob.com），來幫範例App建立一個插播廣告。
在側邊選單選取Apps，並選取GoogleAdMobDemo，在下一個畫面，點選AddAdUnit來建立一個新的廣告單元並選擇Interstitial。
圖15.9.選擇加入一個插播式廣告單元
這一次，我們建立一個插播廣告。
賦予這個廣告單元一個名稱並點擊CreateAdUnit來建立這個單元。
AdMob應該會為你產生另一個廣告單元ID。
現在回到Xcode專案。
插播廣告的實作跟橫幅廣告非常相似。
這邊我們使用GADInterstitial類別來取代GADBannerView類別。
所以先在NewsTableViewController類別宣告一個變數來儲存GADInterstitial物件：
varinterstitial:GADInterstitial?
不過，GADBannerView與GADInterstitial的差異在於，GADInterstitial是只使用一次的物件。
這表示此插播廣告出現過後，就無法再載入其他廣告。
由於這個因素，我們建立了一個輔助方法，稱作createAndLoadInterstitial()來建立廣告。
在NewsTableViewController類別插入這個廣告：
privatefuncloadInterstitialAd(){
letrequest=GADRequest()
GADInterstitialAd.load(withAdUnitID:"ca-app-pub-8501671653071605/5691915429",request:request){ad,errorin
iferror!=nil{return}
self.interstitial=ad
self.interstitial?.fullScreenContentDelegate=self
self.interstitial?.present(fromRootViewController:self)
}
}
我們首先初始化一個GADRequest物件，然後我們建立一個GADInterstitialAd物件，使用我們的廣告單元ID和廣告請求來呼叫load方法。
加載廣告後，我們在完成處理程序塊中顯示廣告。
插頁式廣告允許你設置委託以進行進一步處理。
在這裡，我們將委託設置為self。
當視圖載入時，我們會建立這個廣告。
所以插入以下的程式碼至viewDidLoad()方法中：
loadInterstitialAd()
跟GADBannerView類似，為了檢查廣告的狀態，我們需要採用一個協定。
建立一個擴展來實作GADFullScreenContentDelegate協定：
extensionNewsTableViewController:GADFullScreenContentDelegate{
funcadWillPresentFullScreenContent(_ad:GADFullScreenPresentingAd){
print("Interstitialadloadedsuccessfully")
}
funcad(_ad:GADFullScreenPresentingAd,didFailToPresentFullScreenContentWithErrorerror:Error){
print("Failedtoreceiveinterstitialads")
}
}
現在你已經準備好測試這個App。
在啟動App之後，你應該會見到一個全螢幕的測試廣告。
圖15.11.測試的插播廣告
本文摘自《iOS15App程式設計進階攻略》一書。
如果你想繼續閱讀和下載完整程式碼，你可以從AppCoda網站購買完整電子版，全書範例檔皆可下載。
resultsmatching""
Noresultsmatching""
延伸文章資訊
- 1開始使用Google AdMob : Google - Skillshop
掌握AdMob 重要概念，進而使用這項工具建立及管理廣告空間，並產生相關報表。瞭解提高收益及控管廣告品質的最佳做法。 完成這個基礎的Google AdMob 學習路徑後， ...
- 2AdMob 的運作方式
什麼是AdMob？ AdMob 是一個免費平台，可讓您在應用程式內容旁顯示目標明確的廣告，藉此賺取收益。您可以向應用程式使用者顯示相關且吸引人的廣告，甚至配合您的應用程式自 ...
- 3Android - Admob 使用串接
請注意，要使用Google AdMob 進行廣告串接的話，請務必確認您的專案中包含以下三個檔案：. Google Mobile Ad s SDK; Vpon SDK; Vpon AdMob Ad...
- 4第15 章- 使用Google AdMob 來播放橫幅廣告
你便可以透過使用者的瀏覽或點擊廣告來獲利。 想要在App 中使用AdMob，你只需要使用Google 的行動廣告SDK（Google Mobile Ads SDK），這個整合的工作並 ...
- 5AdMob
Monetize and promote your app with AdMob.
