横幅广告会占据应用布局中的一处位置,要么是设备屏幕的顶部,要么是底部。用户与应用互动时,这类广告会停留在屏幕上,并且可在一段时间后自动刷新。如果您是刚开始接触移动广告的新手,横幅广告是您的绝佳选择。 案例研究。
本指南介绍了如何将AdMob 横幅广告植入到 iOS 应用中。除了代码段和说明之外,本指南还介绍了如何将横幅广告调整至合适的尺寸,且还提供了其他资源的链接。
前提条件
- 通读入门指南。
务必用测试广告进行测试
在构建和测试应用时,请确保使用的是测试广告,而不是实际投放的广告。否则,可能会导致您的帐号被暂停。
对于 iOS 横幅广告,加载测试广告最简便的方法就是使用下面的测试专用广告单元 ID:
ca-app-pub-3940256099942544/2934735716
该测试广告单元 ID 已经过专门配置,可为每个请求返回测试广告,您可以在自己应用的编码、测试和调试过程中随意使用该测试广告单元 ID。只需确保您会在发布应用前用自己的广告单元 ID 替换该测试广告单元 ID 即可。
如需详细了解移动广告 SDK 的测试广告如何运作,请参阅测试广告。
创建 GADBannerView
横幅广告显示在 GADBannerView
对象中,因此植入横幅广告的第一步是将 GADBannerView
添加到视图层次结构中。这通常使用 Interface Builder 或以编程方式完成。
界面构建器
像所有典型视图一样,您可以将 GADBannerView
添加到故事板或 xib 文件中。使用此方法时,请务必添加宽度和高度限制,以匹配您想要展示的广告尺寸。例如,在展示横幅广告 (320x50) 时,请使用 320 点的宽度限制和 50 点的高度限制。
以编程方式
您也可以直接将 GADBannerView
实例化。
以下示例演示了如何创建 GADBannerView
,使之贴靠至屏幕安全区域底部的中央位置,并使用 320x50 的横幅广告尺寸:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GADBannerView(adSize: GADAdSizeBanner) 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) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [self.view addConstraints:@[ [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
请注意,在本例中,我们没有给出宽度或高度限制,因为提供的广告尺寸会为横幅广告提供固有内容尺寸,用于调整视图大小。
如果您不想使用由常量定义的标准尺寸,可使用 GADAdSizeFromCGSize
设置自定义尺寸。有关详情,请参阅“横幅广告尺寸”部分。
配置 GADBannerView 属性
为了加载和展示广告,需要设置 GADBannerView
的以下属性。
rootViewController
- 此视图控制器用于在用户点击广告后呈现重叠式广告。通常应将其设置为包含GADBannerView
的视图控制器。adUnitID
- 广告单元 ID,GADBannerView
应通过该 ID 加载广告。
以下代码示例展示了如何在 UIViewController 的 viewDidLoad
方法中设置这两个必需的属性:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }
加载广告
GADBannerView
创建好并配置其属性后,就可以加载广告了。通过对 GADRequest
对象调用 loadRequest:
可实现此目的:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
GADRequest 对象代表单个广告请求,并包含定位信息等内容的属性。
如果您的广告加载失败,只要已将广告单元配置为刷新,就无需明确请求再次加载;Google 移动广告 SDK 会按照您在AdMob 界面中指定的频率进行刷新。如果您尚未启用刷新,则需要发出新的请求。
广告事件
通过使用 GADBannerViewDelegate
,您可以监听各种广告生命周期事件,例如广告何时关闭、用户何时离开应用等。
注册横幅广告事件
要注册横幅广告事件,请将 GADBannerView
上的 delegate
属性设置为实现 GADBannerViewDelegate
协议的对象。一般情况下,实现横幅广告的类也充当代理类,在这种情况下,可将 delegate
属性设为 self
。
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
实现横幅广告事件
GADBannerViewDelegate
中的每个方法均被标记为可选,因此您只需实现所需的方法即可。下例就实现了每个方法,并在控制台中记录了一条消息:
Swift
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") }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { NSLog(@"bannerViewDidReceiveAd"); } - (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error { NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]); } - (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView { NSLog(@"bannerViewDidRecordImpression"); } - (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillPresentScreen"); } - (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillDismissScreen"); } - (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewDidDismissScreen"); }
有关 iOS API Demo 应用中横幅广告委托方法的实现方式,请参阅广告委托示例。
用例
以下是这些广告事件方法的一些实际应用示例。
在收到广告后,将横幅广告添加到视图层次结构中
在接收到广告之前,您可能不希望将 GADBannerView
添加到视图层次结构中。为此,您可以监听 bannerViewDidReceiveAd:
事件:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
为横幅广告添加动画效果
在返回横幅广告后,您还可以使用 bannerViewDidReceiveAd:
事件以动画方式显示该广告,如以下示例所示:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { bannerView.alpha = 0 UIView.animate(withDuration: 1, animations: { bannerView.alpha = 1 }) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
暂停和恢复应用
GADBannerViewDelegate
协议包含一些事件通知方法,如点击导致呈现或关闭叠加层等。如果您想跟踪这些事件是否由广告引起,请注册这些 GADBannerViewDelegate
方法。
如果您要获取所有类型(而不仅仅是由于广告点击而发生)的重叠式广告展示或外部浏览器调用,您的应用最好监听 UIViewController
或 UIApplication
上具有同样功能的方法。下表显示了与 GADBannerViewDelegate
方法同时调用的等效 iOS 方法:
GADBannerViewDelegate 方法 | iOS 方法 |
---|---|
bannerViewWillPresentScreen: |
UIViewController 的 viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController 的 viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController 的 viewDidAppear: |
横幅尺寸
下表列出了标准的横幅广告尺寸。
尺寸(宽 x 高,以点为单位) | 说明 | 可用性 | AdSize 常量 |
---|---|---|---|
320x50 | 横幅 | 手机和平板电脑 | GADAdSizeBanner |
320x100 | 大型横幅广告 | 手机和平板电脑 | GADAdSizeLargeBanner |
300x250 | IAB 中矩形 | 手机和平板电脑 | GADAdSizeMediumRectangle |
468x60 | IAB 全尺寸横幅 | 平板电脑 | GADAdSizeFullBanner |
728x90 | IAB 页首横幅广告 | 平板电脑 | GADAdSizeLeaderboard |
提供的宽度 x 自适应高度 | 自适应横幅广告 | 手机和平板电脑 | 不适用 |
自定义广告尺寸
若要定义自定义横幅广告尺寸,请使用 GADAdSizeFromCGSize
设置所需的尺寸,如下所示:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
其他资源
GitHub 上的示例
横幅广告示例: Swift | Objective-C
高级功能演示: Swift | Objective-C
GitHub 上的横幅 UITableView 示例: Swift | Objective-C
“Mobile Ads Garage”视频教程
成功案例
后续步骤
详细了解用户隐私。