Banner ads are rectangular ads that occupy a portion of an app's layout. They stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen or inline with content as the user scrolls. Banner ads can refresh automatically after a certain period of time. See Overview of banner ads for more information.
This guide shows you how to get started with anchored adaptive banner ads , which maximizes performance by optimizing the ad size for each device using an ad width you specify.
Anchored adaptive banner
Anchored adaptive banner ads are fixed aspect ratio ads rather than the regular fixed size ads. The aspect ratio is similar to 320x50 industry standard. Once you specify the full width available, it returns an ad with optimal height for that width. The optimal height doesn't change across requests from the same device, and the surrounding views don't need to move when the ad refreshes.
Prerequisites
- Complete the Get started guide .
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:
/21775744923/example/adaptive-banner
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 the Mobile Ads SDK's test ads work, see Test Ads .
Create a GAMBannerView
Banner ads are displayed in GAMBannerView
objects, so the first step toward integrating banner ads is to include a GAMBannerView
in your view hierarchy. This is typically done either programmatically or
through Interface Builder.
Programmatically
A GAMBannerView
can also be instantiated directly.
The following example creates a GAMBannerView
:
Swift
// Initialize the BannerView.
bannerView
=
BannerView
()
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 AdManagerBannerView
, 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
=
currentOrientationAnchoredAdaptiveBanner
(
width
:
375
)
BannerViewContainer
(
adSize
)
.
frame
(
width
:
adSize
.
size
.
width
,
height
:
adSize
.
size
.
height
)
}
Objective-C
// Initialize the GADBannerView.
self
.
bannerView
=
[[
GADBannerView
alloc
]
init
];
self
.
bannerView
.
translatesAutoresizingMaskIntoConstraints
=
NO
;
[
self
.
view
addSubview
:
self
.
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
[
self
.
bannerView
.
bottomAnchor
constraintEqualToAnchor
:
self
.
view
.
safeAreaLayoutGuide
.
bottomAnchor
],
// Center the banner horizontally in the view
[
self
.
bannerView
.
centerXAnchor
constraintEqualToAnchor
:
self
.
view
.
centerXAnchor
],
]
];
Interface Builder
You can add a GAMBannerView
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
Set the GADSize
struct
to an anchored adaptive banner type with a specified width:
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView
.
adSize
=
currentOrientationAnchoredAdaptiveBanner
(
width
:
375
)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self
.
bannerView
.
adSize
=
GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth
(
375
);
Load an ad
Once the GAMBannerView
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 GAMRequest
object:
Swift
bannerView
.
load
(
AdManagerRequest
())
SwiftUI
banner
.
adUnitID
=
"ca-app-pub-3940256099942544/2435281174"
banner
.
load
(
Request
())
Objective-C
[
self
.
bannerView
loadRequest
:
[
GAMRequest
request
]];
GAMRequest
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 Ad Manager 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 Refresh rate for ads in mobile apps .
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 GAMBannerView
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