Configurare gli annunci banner

Gli annunci banner sono annunci rettangolari che occupano una parte del layout di un'app. I banner adattivi ancorati sono sempre visualizzati sullo schermo, sono ancorati in alto o in basso e hanno un'altezza massima pari al 20% delle dimensioni dello schermo, con un'altezza massima di 150 px. Per ottimizzare le dimensioni dell'annuncio per ogni dispositivo, utilizza i banner adattivi.

Questa guida illustra come caricare un annuncio banner adattivo ancorato in un'app per iOS.

Prerequisiti

Prima di continuare, configura Google Mobile Ads SDK.

Esegui sempre test con annunci di prova

Quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione live. In caso contrario, il tuo account potrebbe essere sospeso.

Il modo più semplice per caricare gli annunci di prova è utilizzare l'ID unità pubblicitaria di prova dedicato per i banner iOS:

ca-app-pub-3940256099942544/2435281174

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

Per saperne di più sul funzionamento degli annunci di prova Google Mobile Ads SDK, consulta Annunci di prova.

Crea un GADBannerView

Gli annunci banner vengono visualizzati negli GADBannerView oggetti, quindi il primo passo per integrare gli annunci banner è includere un GADBannerView nella gerarchia di oggetti View. In genere, questa operazione viene eseguita a livello di programmazione o tramite Interface Builder.

A livello di programmazione

È possibile creare un'istanza di GADBannerView anche direttamente. L'esempio seguente crea un GADBannerView:

Swift

// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])

SwiftUI

Per utilizzare un BannerView, crea un UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

Aggiungi UIViewRepresentable alla gerarchia di oggetti View, specificando i valori height e width:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Interface Builder

Puoi aggiungere un GADBannerView a uno storyboard o a un file xib. Quando utilizzi questo metodo, assicurati di aggiungere solo vincoli di posizione al banner. Ad esempio, quando visualizzi un banner adattivo nella parte inferiore dello schermo, imposta la parte inferiore della visualizzazione del banner in modo che sia uguale alla parte superiore della guida al layout inferiore e imposta il centerX vincolo in modo che sia uguale al centerX della supervista.

Imposta le dimensioni dell'annuncio

L'esempio seguente ottiene le dimensioni di un banner adattivo ancorato di grandi dimensioni:

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

Carica un annuncio

Una volta che GADBannerView è in posizione e le sue proprietà, come adUnitID, sono configurate, è il momento di caricare un annuncio. Questa operazione viene eseguita chiamando loadRequest: su un GADRequest oggetto:

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GADRequest request]];

Gli oggetti GADRequest rappresentano una singola richiesta di annuncio e contengono proprietà per elementi come le informazioni di targeting.

Aggiorna un annuncio

Se hai configurato l'unità pubblicitaria per l'aggiornamento, non devi richiedere un altro annuncio se il caricamento dell'annuncio non riesce. Google Mobile Ads SDK rispetta qualsiasi frequenza di aggiornamento specificata nell'interfaccia utente di AdMob. Se non hai attivato l'aggiornamento, invia una nuova richiesta. Per maggiori dettagli sull'aggiornamento delle unità pubblicitarie, ad esempio su ll'impostazione di una frequenza di aggiornamento, consulta Utilizzare l'aggiornamento automatico per gli annunci banner.

Gestisci le modifiche dell'orientamento

Quando l'orientamento dello schermo dell'app cambia, ad esempio dalla modalità portrait a quella orizzontale, spesso cambia anche la larghezza disponibile per il banner. Per assicurarti di visualizzare un annuncio di dimensioni appropriate per il nuovo layout, richiedi un nuovo banner. Se la larghezza del banner è statica o se i vincoli di layout possono gestire il ridimensionamento, salta questo passaggio.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

Eventi annuncio

Utilizzando GADBannerViewDelegate, puoi ascoltare gli eventi del ciclo di vita, ad esempio quando un annuncio viene chiuso o l'utente esce dall'app.

Registrati per gli eventi banner

Per registrarti agli eventi degli 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 delegata, nel qual caso la proprietà delegate può essere impostata su self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

Implementa gli eventi banner

Ciascuno dei metodi in GADBannerViewDelegate è contrassegnato come facoltativo, quindi devi implementare solo i metodi che ti interessano. Questo esempio implementa ogni metodo e registra un messaggio nella console:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

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");
}

Per un'implementazione dei metodi delegati dei banner nell'app demo dell'API iOS, consulta l'esempio di delegato dell'annuncio.

Swift Objective-C

Casi d'uso

Ecco alcuni esempi di casi d'uso per questi metodi di eventi annuncio.

Aggiungi un banner alla gerarchia di oggetti View una volta ricevuto un annuncio

Potresti voler ritardare l'aggiunta di un GADBannerView alla gerarchia di oggetti View fino a quando non viene ricevuto un annuncio. Puoi farlo ascoltando l'evento bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Anima un annuncio banner

Puoi anche utilizzare l'evento bannerViewDidReceiveAd: per animare un annuncio banner una volta restituito, come mostrato nell'esempio seguente:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  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;
  }];
}

Metti in pausa e riprendi l'app

Il protocollo GADBannerViewDelegate include metodi per inviarti notifiche relative agli eventi, ad esempio quando un clic causa la presentazione o la chiusura di un overlay. Se vuoi verificare se questi eventi sono dovuti agli annunci, registrati per questi metodi GADBannerViewDelegate.

Per intercettare tutti i tipi di presentazioni di overlay o invocazioni di browser esterni, non solo quelli provenienti 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 che vengono richiamati contemporaneamente ai metodi GADBannerViewDelegate:

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

Risorse aggiuntive

Esempi su GitHub

Passaggi successivi

Banner comprimibili

Gli annunci banner comprimibili sono annunci banner che inizialmente vengono presentati come un overlay più grande, con un pulsante per comprimere l'annuncio a dimensioni più piccole. Valuta la possibilità di utilizzarli per ottimizzare ulteriormente il rendimento. Per maggiori dettagli, consulta Annunci banner comprimibili.

Banner adattivi in linea

I banner adattivi in linea sono banner più grandi e più alti rispetto ai banner adattivi ancorati. Hanno un'altezza variabile e possono essere alti quanto lo schermo del dispositivo. I banner adattivi in linea sono consigliati rispetto agli annunci banner adattivi ancorati per le app che inseriscono annunci banner in contenuti scorrevoli. Per maggiori dettagli, consulta Banner adattivi in linea.

Esplora altri argomenti