#85 Google Admob 系列-1：在 iOS 上整合 Google Admob 橫幅廣告
跟著 Google Admob 的教學把橫幅測試廣告放到 iOS App上
執行畫面截圖
成功看到測試廣告了。
教學與文件：
官方文件： https://developers.google.com/admob/ios/quick-start?hl=zh-tw
youtube: Integrating the Google Mobile Ads SDK for iOS apps
youbube:Fullscreen Admob Interstitial Ad in iOS — Xcode 12 — Swift 5 2021 (Under 10 Mins!! )
步驟大概如下：
1. Import the Mobile Ads SDK
2. 修改 info.plist 檔
3. 修改 AppDelegate.swift 初始化 SDK
0. 建立專案
建立一個新的 ios 專案 “admobdemo”
開啟 Terminal ，移動到專案目錄
1. Import the Mobile Ads SDK
pod init
pod init這會生成一個 Podfile 檔案，打開 Podfile 檔，加入：
pod 'Google-Mobile-Ads-SDK'
然後執行：
pod install --repo-update從顯示的資訊可以看到目前安裝的版本
Google-Mobile-Ads-SDK (11.6.0)
GoogleUserMessagingPlatform (2.5.0)
在原本的目錄會多出這些檔案。
完成後，請關閉當前的 Xcode，並使用 admobdemo.xcworkspace 開啟專案。
2. 修改 info.plist 檔
在 info.plist 上按右鍵，點擊 Open As > Source Code ，
pd: 要載入測試廣告，最簡單的方法就是使用 iOS 橫幅廣告專用的測試廣告單元 ID： ca-app-pub-3940256099942544/2435281174
其他測試廣告單元 ID 參考：
//https://developers.google.com/admob/ios/test-ads
//測試時永遠使用測試廣告
Ad format Demo ad unit ID
App Open ca-app-pub-3940256099942544/5575463023
//
Adaptive Banner ca-app-pub-3940256099942544/2435281174
//
Fixed Size Banner ca-app-pub-3940256099942544/2934735716
//
Interstitial ca-app-pub-3940256099942544/4411468910
Interstitial Video ca-app-pub-3940256099942544/5135589807
Rewarded ca-app-pub-3940256099942544/1712485313
Rewarded Interstitial ca-app-pub-3940256099942544/6978759866
Native Advanced ca-app-pub-3940256099942544/3986624511
Native Advanced Video ca-app-pub-3940256099942544/2521693316這裡也可以先用他範例的 demo 測試單元
In a real app, replace the sample app ID with your actual AdMob app ID. You can use the sample ID if you’re just experimenting with the SDK in a Hello World app.
3. 修改 AppDelegate.swift
加入 import GoogleMobileAds 並初始化 SDK。 GADMobileAds.sharedInstance().start(completionHandler: nil)
// AppDelegate.swift
import UIKit
import GoogleMobileAds
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
GADMobileAds.sharedInstance().start(completionHandler: nil)
return true
}
注意：如果您使用中介，請等到調用完成處理程序後再載入廣告，以確保所有中介適配器都已初始化。
4. 加載廣告
選擇想要放的廣告形態
Banner
建立 GADBannerView
import UIKit
import GoogleMobileAds
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}載入廣告
override func viewDidLoad() {
super.viewDidLoad()
...
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}廣告事件
使用 GADBannerViewDelegate 時，您可以監聽生命週期事件，例如廣告關閉或使用者離開應用程式。
註冊橫幅廣告事件
如要註冊橫幅廣告事件，請將 GADBannerView 上的 delegate 屬性設為導入 GADBannerViewDelegate 通訊協定的物件。一般來說，導入橫幅廣告的類別也為委派類別，在這種情況下，delegate 屬性可設為 self。
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
...
bannerView.delegate = self
}
//Each of the methods in GADBannerViewDelegate
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
}5. 避免 Sandbox error
更新你的 Xcode 專案建置選項 ENABLE_USER_SCRIPT_SANDBOXING 為 No。
參考：
Sandbox: bash(87896) deny(1) file-write-create /Users/jasonhung/Documents/
admobdemo/Pods/resources-to-copy-admobdemo.txt執行畫面
再重新執行，成功看到測試廣告了。ya!!
廣告設定在下方
It means that the attribute bottom of the bannerView has to be equal to the bottom attribute of the view.safeAreaLayoutGuide.
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),如果要把廣告放在上面。
[NSLayoutConstraint(item: bannerView,
attribute: .top,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .top,
multiplier: 1,
constant: 0),參考
ios get started
https://developers.google.com/admob/ios/banner
參考
但實際上，Google官方其實有幫你預備超級完整的教學XD
->https://developers.google.com/admob/android/quick-start?hl=zh_cn
以及今天介紹的橫幅廣告
->https://developers.google.com/admob/android/banner?hl=zh_cn
我當時自己也是靠著這兩篇就完成了，完全沒有看其他的參考文件
youbube:(2024)How to display Banner Ads & Interstitial Ads using Google ads services admob in native iOS app
youbube:Fullscreen Admob Interstitial Ad in iOS — Xcode 12 — Swift 5 2021 (Under 10 Mins!! )
youtube: android: AdMob Banner Ads — Mobile Ads Garage #2
youbube: AdMob Ads Tutorial for iOS (2020)
