Page Summary
-
Banner ads are rectangular ads that occupy a portion of an app's layout and can be anchored or inline.
-
This guide focuses on implementing anchored adaptive banner ads, which optimize size based on device width.
-
It is crucial to use test ads during development to avoid account suspension.
-
Banner ads are displayed using the
GADBannerViewobject, which can be created programmatically or in Interface Builder. -
You can listen for banner ad lifecycle events using the
GADBannerViewDelegate.
This guide covers loading an anchored adaptive banner ad into an iOS app.
Prerequisites
Before you continue, set up Google Mobile Ads SDK.
Always test with test ads
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
The easiest way to load test ads is to use our dedicated test ad unit ID for iOS banners:
ca-app-pub-3940256099942544/2435281174
It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.
For more information about how Google Mobile Ads SDK test ads work, see Test Ads.
Create a GADBannerView
Banner ads are displayed in GADBannerView
objects, so the first step toward integrating banner ads is to include a GADBannerView
in your view hierarchy. This is typically done either programmatically or
through Interface Builder.
Programmatically
A GADBannerView can also be instantiated directly.
The following example creates a GADBannerView:
Swift
// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
To use a BannerView, create a UIViewRepresentable:
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Add your UIViewRepresentable to the view hierarchy, specifying height and
width values:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
Interface Builder
You can add a GADBannerView to a storyboard or xib file. When using this
method, be sure to only add position constraints on the banner. For example,
when displaying an adaptive banner at the bottom of the screen, set the bottom
of the banner view equal to the top of the Bottom Layout Guide, and set the
centerX
constraint equal to the centerX of the superview.
Set the ad size
The following example gets a large anchored adaptive banner size:
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
Load an ad
Once the GADBannerView is in place and its properties, such as adUnitID,
are configured, it's time to load an ad. This is done by calling loadRequest:
on a GADRequest
object:
Swift
func loadBannerAd(bannerView: BannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(Request())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GADRequest request]];
GADRequest objects represent a single ad request, and contain properties
for things like targeting information.
Refresh an ad
If you configured your ad unit to refresh, you don't need to request another ad when the ad fails to load. Google Mobile Ads SDK respects any refresh rate you specified in the AdMob UI. If you haven't enabled refresh, issue a new request. For more details on ad unit refresh, such as setting a refresh rate, see Use automatic refresh for Banner ads.
Handle orientation changes
When your app's screen orientation changes, such as from
portrait
mode to landscape, the available width for the banner often changes as well. To
make sure you display an appropriately sized ad for the new layout, request a
new banner. If your banner width is static, or if your layout constraints can
handle the resize, skip this step.
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
Ad events
Through the use of GADBannerViewDelegate, you can listen for lifecycle events,
such as when an ad is closed or the user leaves the app.
Register for banner events
To register for banner ad events, set the delegate property on
GADBannerView to an object that implements the
GADBannerViewDelegate protocol. Generally, the class that implements banner
ads also acts as the delegate class, in which case, the delegate property can
be set to self.
Swift
bannerView.delegate = self.swift