Annunci banner

Gli annunci banner occupano uno spazio nel layout dell'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à sui dispositivi mobili, questo è un ottimo punto di partenza. Case study.

Questa guida mostra come integrare gli annunci banner diAdMob in un'app per iOS. Oltre agli snippet di codice e alle istruzioni, include informazioni su come ridimensionare correttamente i 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 l'ID unità pubblicitaria di prova dedicata per i banner iOS: ca-app-pub-3940256099942544/2934735716

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

Per ulteriori informazioni su come funzionano gli annunci di prova dell'SDK Mobile Ads, consulta la pagina 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 elemento GADBannerView nella gerarchia delle visualizzazioni. In genere, questa operazione viene eseguita con Interface Builder o in modo programmatico.

Interface Builder

È 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 desideri 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 di GADBannerView direttamente. Ecco un esempio di come creare un elemento GADBannerView, allineato al centro inferiore dell'area di sicurezza dello schermo, con dimensioni del 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 diamo vincoli di larghezza o altezza, in quanto le dimensioni dell'annuncio fornite daranno al banner una dimensione dei contenuti intrinseca 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 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 l'elemento GADBannerView deve caricare gli annunci.

Di seguito è riportato 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 pubblicati gli annunci. Se, ad esempio, mostri annunci banner in due controller di visualizzazione, puoi creare un'unità pubblicitaria per ciascuno.

Carica un annuncio

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

Se il caricamento dell'annuncio non riesce, non è necessario richiederne esplicitamente un altro se hai configurato l'aggiornamento dell'unità pubblicitaria; l'SDK Google Mobile Ads rispetta l'eventuale frequenza di aggiornamento specificata nell'interfaccia utente AdMob . Se non hai attivato l'aggiornamento, dovrai inviare una nuova richiesta.

Suggerimento: puoi utilizzare le chiamate di carico degli annunci per creare una cache di annunci precaricati prima di intenerli 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 ascoltare gli eventi del ciclo di vita, ad esempio quando un annuncio viene chiuso o l'utente esce dall'app.

Registrazione per eventi banner

Per registrarti per gli eventi di 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 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

Ciascuno dei metodi in GADBannerViewDelegate è contrassegnato come facoltativo, quindi devi implementare solo i metodi che preferisci. Questo esempio implementa ciascun 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 delegato annunci per un'implementazione dei metodi di delega del banner nell'app demo dell'API per iOS.

Swift Obiettivo-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 l'annuncio

Potresti voler aggiungere un elemento GADBannerView alla gerarchia delle visualizzazioni solo dopo la 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 anche utilizzare l'evento bannerViewDidReceiveAd: per animare un annuncio banner dopo che viene restituito, come illustrato 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;
  }];
}

Messa in pausa e ripristino dell'app

Il protocollo GADBannerViewDelegate offre metodi per notificare gli eventi, ad esempio quando un clic determina la visualizzazione o la chiusura di un overlay. Se vuoi sapere se questi eventi sono dovuti ad annunci, registrati a questi metodi GADBannerViewDelegate.

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

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

Dimensioni dei banner

La tabella riportata di seguito elenca le dimensioni standard dei banner.

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 IAB a dimensione intera	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 per il 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 delle funzionalità avanzate: Swift | Objective-C

• Esempio di UIUI TableView 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.