Annunci banner

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 contiene GADBannerView.
• adUnitID: questo è l'ID dell'unità pubblicitaria da cui GADBannerView 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;
}

Nota: gli ID delle unità pubblicitarie vengono creati nell'interfaccia utente di AdMob e rappresentano un punto dell'app in cui vengono visualizzati gli annunci. Ad esempio, se mostri annunci banner in due controller per visualizzazioni, puoi creare un'unità pubblicitaria per ciascuno di essi.

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.

Nota: se il tuo annuncio non viene caricato, non è necessario richiederne un altro in modo esplicito purché tu abbia configurato l'aggiornamento dell'unità pubblicitaria; l'SDK Google Mobile Ads rispetta la frequenza di aggiornamento specificata nell'AdMob UI. Se non hai abilitato l'aggiornamento, dovrai inviare una nuova richiesta.

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.

Swift Objective-C

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 Funzionalità avanzate: Swift | Objective-C

• Esempio di UITableView banner su GitHub: Swift | Objective-C

Tutorial video di Mobile Ads Training

• Implementazione banner
• Best practice per i banner

Casi di successo

• Caso d'uso di esempio