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

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: bottomLayoutGuide,
                          attribute: .top,
                          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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              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;
}

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.

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

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

Tutorial video di Mobile Ads Training

Casi di successo