Annunci banner

Gli annunci banner occupano uno spazio nel layout di un'app, nella parte superiore o inferiore dello schermo del dispositivo. Rimangono sullo schermo durante l'interazione degli utenti con l'app e possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Se non hai mai utilizzato la pubblicità per il mobile, questo strumento rappresenta un ottimo punto di partenza. Case study.

Questa guida spiega come integrare gli annunci banner diAdMob in un'app per iOS. Oltre agli snippet di codice e alle istruzioni, include informazioni sulla corretta dimensione dei banner e link a risorse aggiuntive.

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 di produzione pubblicati. In caso contrario, l'account potrebbe essere sospeso.

Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di test dedicato per i banner iOS: ca-app-pub-3940256099942544/2934735716

È stato appositamente configurato per restituire annunci di prova per ogni richiesta e puoi usarlo nelle tue app durante la programmazione, i test e il debug. Assicurati di sostituirlo con il tuo ID unità pubblicitaria personale prima di pubblicare l'app.

Per ulteriori informazioni su come funzionano gli annunci di prova dell'SDK Mobile Ads, consulta la sezione Annunci di prova.

Crea un GADBannerView

Gli annunci banner vengono visualizzati negli oggetti GADBannerView, quindi il primo passaggio per integrare gli annunci banner consiste nell'includere un GADBannerView nella gerarchia delle visualizzazioni. In genere questa operazione viene eseguita con Interface Builder o in modo programmatico.

Strumento di creazione di interfacce

È 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 da 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 un'istanza direttamente di GADBannerView. Ecco un esempio di come creare un elemento GADBannerView, allineato al centro inferiore dell'area di sicurezza dello schermo, con una dimensione di banner di 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 assegnati vincoli di larghezza o altezza, in quanto le dimensioni dell'annuncio fornite conferiscono al banner una dimensione intrinseca dei contenuti adatta alle dimensioni della 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 relativa alle dimensioni dei banner.

Configura le GADBannerView proprietà

Per caricare e visualizzare gli annunci, GADBannerView richiede alcune proprietà.

• rootViewController: questo controller di visualizzazione viene utilizzato per presentare un overlay quando viene fatto clic sull'annuncio. Normalmente dovrebbe essere impostato sul controller di visualizzazione che contiene GADBannerView.
• adUnitID - Si tratta dell'ID 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 unità pubblicitaria vengono creati nell'interfaccia utente di AdMob e rappresentano un punto della tua app in cui vengono pubblicati gli annunci. Ad esempio, se mostri annunci banner in due controller di visualizzazione, puoi creare un'unità pubblicitaria per ciascuno.

Carica un annuncio

Dopo aver inserito GADBannerView e aver configurato le 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 rappresentano una singola richiesta di annuncio e contengono proprietà per elementi come le informazioni di targeting.

Se l'annuncio non viene caricato, non è necessario richiederne un altro in modo esplicito, a condizione che tu abbia configurato l'aggiornamento dell'unità pubblicitaria. L'SDK Google Mobile Ads rispetta la frequenza di aggiornamento specificata nell'interfaccia utenteAdMob . Se non hai abilitato l'aggiornamento, dovrai emettere una nuova richiesta.

Suggerimento: puoi utilizzare le chiamate del carico degli annunci per creare una cache di annunci precaricati prima di mostrarli, in modo che gli annunci possano essere mostrati con latenza zero quando necessario. Poiché gli annunci scadono dopo un'ora, devi svuotare la cache e ricaricare ogni ora con nuovi annunci.

Eventi annuncio

Tramite GADBannerViewDelegate, puoi rimanere in ascolto degli eventi del ciclo di vita, ad esempio quando un annuncio viene chiuso o l'utente esce dall'app.

Registrazione per eventi banner

Per registrarti agli eventi relativi agli 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 agisce anche come classe delegata, 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

Ciascuno dei metodi in GADBannerViewDelegate è contrassegnato come facoltativo, quindi devi implementare solo 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 del delegato banner nell'app demo dell'API per iOS.

Swift Objective-C

Casi d'uso

Di seguito sono riportati alcuni esempi di casi d'uso di questi metodi relativi agli eventi annuncio.

Aggiunta di un banner alla gerarchia delle visualizzazioni una volta ricevuto un annuncio

Potresti voler ritardare l'aggiunta di un elemento GADBannerView alla gerarchia delle visualizzazioni fino alla ricezione di un annuncio. Puoi farlo ascoltando 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 utilizzare l'evento bannerViewDidReceiveAd: anche per animare un annuncio banner una volta 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 offre metodi per notificare eventi, ad esempio quando un clic causa la visualizzazione o la chiusura di un overlay. Se vuoi sapere se questi eventi sono dovuti ad annunci, registrati a questi GADBannerViewDelegate metodi.

Per rilevare tutti i tipi di presentazioni in overlay o chiamate da browser esterni, non solo quelle derivanti dai clic sugli annunci, è preferibile che la tua app esamini i metodi equivalenti su UIViewController o UIApplication. Ecco una tabella che mostra i metodi iOS equivalenti che vengono richiamati contemporaneamente ai metodi GADBannerViewDelegate:

Metodo GADBannerViewDelega	Metodo iOS
bannerViewWillPresentScreen:	viewWillDisappear: di UIViewController
bannerViewWillDismissScreen:	viewWillAppear: di UIViewController
bannerViewDidDismissScreen:	viewDidAppear: di UIViewController

Dimensioni dei banner

Nella tabella seguente sono elencate le dimensioni dei banner standard.

Dimensione in punti (LxA)	Descrizione	Disponibilità	costante AdSize
320x50	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 dimensione intera IAB	Tablet	GADAdSizeFullBanner
728 x 90	Classifica IAB	Tablet	GADAdSizeLeaderboard
Larghezza fornita x Altezza adattiva	Banner adattivo	Telefoni e tablet	N/A

Dimensioni degli annunci personalizzate

Per definire una dimensione personalizzata del banner, imposta le dimensioni desiderate 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 sulle funzionalità avanzate: Swift | Objective-C

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

Tutorial video di Mobile Ads Garage

• Implementazione dei banner
• Best practice per i banner

Casi di successo

• Esempio di caso d'uso

Passaggi successivi

Scopri di più sulla privacy degli utenti.