Gli annunci banner occupano uno spazio all'interno del layout di un'app, nella parte superiore o inferiore dello schermo del dispositivo. Rimangono sullo schermo mentre gli utenti interagiscono con l'app e possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Se non hai mai utilizzato la pubblicità per il mobile, sei un buon punto di partenza. Case study.
Questa guida mostra come integrare gli annunci banner daAdMob in un'app per iOS. Oltre agli snippet di codice e alle istruzioni, include informazioni sul ridimensionamento dei banner e sui link a risorse aggiuntive.
Prerequisiti
- Completa la Guida introduttiva.
Eseguire sempre i test con gli annunci di prova
Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci attivi di produzione. In caso contrario, l'account potrebbe essere sospeso.
Il modo più semplice per caricare gli annunci di prova è utilizzare l'ID della nostra unità pubblicitaria di prova dedicata per i banner iOS:
ca-app-pub-3940256099942544/2934735716
È stato configurato appositamente per restituire annunci di test per ogni richiesta e puoi utilizzarlo liberamente nelle tue app durante la programmazione, i test e il debug. Devi solo assicurarti di sostituirlo con il tuo ID unità pubblicitaria prima di pubblicare l'app.
Per maggiori informazioni su come funzionano gli annunci di prova dell'SDK Mobile Ads, consulta Testa annunci.
Crea un GADBannerView
Poiché gli annunci banner vengono visualizzati negli oggetti GADBannerView
, il primo passaggio per integrare gli annunci banner consiste nell'includere una GADBannerView
nella gerarchia delle visualizzazioni. In genere questa operazione viene eseguita con il generatore di interfacce o in modo programmatico.
Builder interfaccia
È possibile aggiungere un elemento GADBannerView
a uno storyboard o a un file xib come qualsiasi visualizzazione tipica. Quando utilizzi questo metodo, assicurati di aggiungere vincoli di larghezza e altezza in modo che corrispondano alle dimensioni dell'annuncio che vuoi visualizzare. Ad esempio, quando visualizzi un banner (320 x 50), utilizza un vincolo di larghezza di 320 punti e un vincolo di altezza di 50 punti.
In modo programmatico
È anche possibile creare direttamente un'istanza di GADBannerView
.
Ecco un esempio di come creare un elemento GADBannerView
, allineato in basso al centro dell'area sicura dello schermo, con dimensioni del banner 320 x 50:
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
Tieni presente che in questo caso non vengono concessi vincoli di larghezza o di altezza, in quanto la dimensione dell'annuncio specificata fornirà al banner una dimensione intrinseca dei contenuti per ridimensionare la visualizzazione.
Se non vuoi utilizzare una dimensione standard definita da una costante, puoi impostare una dimensione personalizzata utilizzando GADAdSizeFromCGSize
.
Per ulteriori informazioni, consulta la sezione sulle dimensioni dei banner.
Configura GADBannerView le proprietà
Per caricare e visualizzare gli annunci, GADBannerView
richiede l'impostazione di alcune proprietà.
rootViewController
: questo controller di visualizzazione viene utilizzato per presentare un overlay quando viene fatto clic sull'annuncio. In genere deve essere impostato sul controller vista che contieneGADBannerView
.adUnitID
: questo è l'ID dell'unità pubblicitaria da cuiGADBannerView
deve caricare gli annunci.
Ecco un esempio di codice che mostra come impostare le due proprietà obbligatorie nel metodo viewDidLoad
di un UIViewController:
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; }
Caricare un annuncio
Dopo aver configurato GADBannerView
e configurato le relative
proprietà, è il momento di caricare un annuncio. Per farlo, chiama loadRequest:
su un oggetto
GADRequest
:
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 gli oggetti rappresentano una singola richiesta di annuncio e contengono proprietà per, ad esempio, informazioni di targeting.
Eventi annuncio
Utilizzando GADBannerViewDelegate
, puoi ascoltare gli eventi del ciclo di vita, ad esempio quando un annuncio è chiuso o l'utente esce dall'app.
Registrazione agli eventi banner
Per registrarti agli eventi con 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 } }
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 banner
Tutti i metodi in GADBannerViewDelegate
sono contrassegnati come facoltativi, pertanto devi solo implementare i metodi che preferisci. 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"); }
Vedi l'esempio di delegato dell'annuncio per un'implementazione dei metodi di delega banner nell'app demo dell'API iOS.
Casi d'uso
Di seguito sono riportati alcuni esempi di casi d'uso di questi metodi di evento degli annunci.
Aggiungere un banner alla gerarchia di visualizzazione dopo aver ricevuto un annuncio
Ti consigliamo di ritardare l'aggiunta di GADBannerView
alla gerarchia delle visualizzazioni finché non ricevi un annuncio. Per farlo, puoi ascoltare l'evento 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]; }
Animazione di 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 la notifica degli eventi, ad esempio quando un clic fa sì che un overlay venga presentato o ignorato.
Se vuoi monitorare se questi eventi sono dovuti ad annunci,
registrati per questi metodi GADBannerViewDelegate
.
Per rilevare tutti i tipi di presentazioni overlay o chiamate esterne del browser,
non solo quelle generate dai clic sugli annunci, è preferibile che la tua app ascolti i metodi equivalenti su UIViewController
o UIApplication
. Di seguito è riportata una tabella che mostra i metodi iOS equivalenti richiamati in contemporanea ai metodi GADBannerViewDelegate
:
Metodo GADBannerViewDelegate | Metodo iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: di UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: di UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: di UIViewController |
Dimensioni dei banner
Nella tabella seguente sono elencate le dimensioni standard dei banner.
Dimensioni in punti (LxA) | Descrizione | Disponibilità | costante di dimensioni degli annunci |
---|---|---|---|
320 x 50 | Banner | Telefoni e tablet | GADAdSizeBanner |
320 x 100 | Banner grande | Telefoni e tablet | GADAdSizeLargeBanner |
300 x 250 | Rettangolo medio IAB | Telefoni e tablet | GADAdSizeMediumRectangle |
468 x 60 | Banner a grandezza originale di IAB | Tablet | GADAdSizeFullBanner |
728 x 90 | Classifica IAB | Tablet | GADAdSizeLeaderboard |
Larghezza fornita x Altezza adattiva | Banner adattivo | Telefoni e tablet | N/D |
Dimensioni personalizzate degli annunci
Per definire una dimensione banner personalizzata, imposta la dimensione desiderata utilizzando
GADAdSizeFromCGSize
, come mostrato
qui:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
Risorse aggiuntive
Esempi su GitHub
Esempio di annunci banner: Swift | Objective-C
Demo delle funzionalità avanzate: Swift | Objective-C
Esempio di UIUI TableView su GitHub: Swift | Objective-C
Tutorial video di Mobile Ads Garage
Casi di successo
Passaggi successivi
Scopri di più sulla privacy degli utenti.