Gli annunci banner sono annunci rettangolari che occupano una parte del layout di un'app. Rimangono sullo schermo durante l'interazione degli utenti con l'app, ancorati nella parte superiore o inferiore dello schermo o in linea con i contenuti mentre l'utente scorre. Gli annunci banner possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Per scoprire di più, consulta la Panoramica degli annunci banner.
Questa guida spiega come iniziare a utilizzare gli annunci banner adattivi ancorati, che massimizzano il rendimento ottimizzando le dimensioni dell'annuncio per ogni dispositivo utilizzando una larghezza dell'annuncio specificata.
Banner adattivo ancorato
Gli annunci banner adattivi ancorati sono annunci con proporzioni fisse, anziché annunci con dimensioni fisse. Le proporzioni sono simili allo standard di settore 320x50. Una volta specificata la larghezza completa disponibile, viene restituito un annuncio con l'altezza ottimale per quella larghezza. L'altezza ottimale non cambia nelle richieste dello stesso dispositivo e le visualizzazioni circostanti non devono spostarsi quando l'annuncio viene aggiornato.
Prerequisiti
- Completa la Guida introduttiva.
Esegui sempre test con annunci di prova
Quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci pubblicati in produzione. In caso contrario, il tuo account potrebbe essere sospeso.
Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova dedicato per i banner per iOS:
ca-app-pub-3940256099942544/2435281174
È stato configurato appositamente per restituire annunci di prova per ogni richiesta e puoi usarlo nelle tue app durante la programmazione, i test e il debug. Assicurati solo di sostituirlo con il tuo ID unità pubblicitaria prima di pubblicare l'app.
Per saperne di più sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta Annunci di prova.
Creare un GADBannerView
Gli annunci banner vengono visualizzati negli oggetti GADBannerView
, pertanto il primo passo per integrarli è includere un GADBannerView
nella gerarchia delle visualizzazioni. In genere, questa operazione viene eseguita tramite codice o tramite Interface Builder.
In modo programmatico
Un GADBannerView
può anche essere istanziato direttamente.
L'esempio seguente crea un GADBannerView
:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
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)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
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)
])
}
}
SwiftUI
Per utilizzare un GADBannerView
, crea un UIViewRepresentable
:
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Per gestire l'inizializzazione e il comportamento del GADBannerView
, crea un
Coordinator
:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
Per ottenere la larghezza della visualizzazione, utilizza GeometryReader
. Questa classe calcola le dimensioni appropriate dell'annuncio per l'orientamento corrente del dispositivo. frame
è impostato sull'altezza calcolata in base alle dimensioni dell'annuncio.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
Tieni presente che in questo caso non vengono applicati vincoli di larghezza o altezza, in quanto le dimensioni dell'annuncio fornite daranno al banner una dimensione intrinseca dei contenuti per adattarsi alle dimensioni della visualizzazione.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[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
Interface Builder
Puoi aggiungere un GADBannerView
a un file storyboard o xib. Quando utilizzi questo metodo, assicurati di aggiungere solo vincoli di posizione al banner. Ad esempio,
quando mostri un banner adattivo nella parte inferiore dello schermo, imposta la parte inferiore
della visualizzazione del banner uguale alla parte superiore della guida di layout in basso e imposta il vincolo
centerX
uguale a centerX
della supervista.
Le dimensioni dell'annuncio del banner sono ancora impostate tramite programmazione:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Carica un annuncio
Una volta che il GADBannerView
è stato implementato e le sue proprietà sono state configurate, è il momento di caricare un annuncio. A tale scopo, chiama loadRequest:
su un oggetto
GADRequest
:
Swift
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())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
Gli oggetti GADRequest rappresentano una singola richiesta di annuncio e contengono proprietà per elementi quali le informazioni di targeting.
Aggiornare un annuncio
Se hai configurato l'aggiornamento dell'unità pubblicitaria, non devi richiedere un altro annuncio quando non riesce a caricarsi. L'SDK Google Mobile Ads rispetta qualsiasi frequenza di aggiornamento specificata nell'interfaccia utente di AdMob. Se non hai attivato il aggiornamento, invia una nuova richiesta. Per ulteriori dettagli sull'aggiornamento delle unità pubblicitarie, ad esempio sull'impostazione di una frequenza di aggiornamento, consulta Utilizzare l'aggiornamento automatico per gli annunci banner.
Eventi dell'annuncio
Tramite GADBannerViewDelegate
, puoi ascoltare gli eventi del ciclo di vita, ad esempio quando un annuncio viene chiuso o l'utente esce dall'app.
Registrati per gli eventi dei banner
Per registrarti agli eventi degli annunci banner, imposta la proprietà delegate
su
GADBannerView
su un oggetto che implementa il protocollo
GADBannerViewDelegate
. In genere, la classe che implementa gli annunci banner funge anche da classe del delegato, nel qual caso la proprietà delegate
può essere impostata su self
.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.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;
}
Implementare gli eventi dei banner
Ogni metodo in GADBannerViewDelegate
è contrassegnato come facoltativo, quindi
devi implementare solo i metodi che ti interessano. Questo esempio implementa ogni metodo
e registra un messaggio nella console:
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");
}
Consulta l'esempio di amministratore annunci per un'implementazione dei metodi del delegato del banner nell'app Demo API per iOS.
Casi d'uso
Ecco alcuni casi d'uso di esempio per questi metodi di evento correlato agli annunci.
Aggiungere un banner alla gerarchia delle visualizzazioni una volta ricevuto un annuncio
Ti consigliamo di ritardare l'aggiunta di un GADBannerView
alla gerarchia delle visualizzazioni fino a quando non viene ricevuto un annuncio. Per farlo, ascolta
per l'evento bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Animare un annuncio banner
Puoi anche utilizzare l'evento bannerViewDidReceiveAd:
per animare un annuncio banner una volta che è stato restituito, come mostrato nell'esempio seguente:
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;
}];
}
Mettere in pausa e riprendere l'app
Il protocollo GADBannerViewDelegate
dispone di metodi per inviare notifiche di eventi, ad esempio quando un clic causa la visualizzazione o la chiusura di un overlay. Se vuoi risalire alla causa di questi eventi, registrati a questi metodiGADBannerViewDelegate
.
Per rilevare tutti i tipi di presentazioni in overlay o chiamate del browser esterno, non solo quelle provenienti dai clic sugli annunci, è meglio che la tua app ascolti i metodi equivalenti su UIViewController
o UIApplication
. Di seguito è riportata una tabella che mostra i metodi iOS equivalenti richiamati contemporaneamente ai metodi GADBannerViewDelegate
:
Metodo GADBannerViewDelegate | Metodo iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: di UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: di UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: di UIViewController |
Risorse aggiuntive
Esempi su GitHub
- Esempio di annunci banner adattivi ancorati: Swift | SwiftUI | Objective-C
- Demo delle funzionalità avanzate: Swift | Objective-C
Passaggi successivi
Banner comprimibili
Gli annunci banner comprimibili sono annunci banner inizialmente presentati come overlay più grandi, con un pulsante per comprimere l'annuncio in modo da ridurne le dimensioni. Valuta la possibilità di utilizzarla per ottimizzare ulteriormente il rendimento. Per maggiori dettagli, consulta gli annunci banner comprimibili.
Banner adattivi in linea
I banner adattivi in linea sono più grandi e più alti rispetto ai banner adattivi ancorati. Sono di altezza variabile e possono occupare l'intero schermo del dispositivo. I banner adattivi in linea sono consigliati rispetto agli annunci banner adattivi ancorati per le app che posizionano gli annunci banner in contenuti scorrevoli. Per ulteriori dettagli, consulta la sezione relativa ai banner adattabili in linea.