Questa pagina è stata tradotta dall'API Cloud Translation.

Annunci banner

Gli annunci banner sono annunci rettangolari che occupano una parte del layout dell'app. Rimangono sullo schermo durante l'interazione degli utenti con l'app, ancorati nella parte superiore o inferiore dello schermo o in linea con i contenuti mentre l'utente scorre. Banner gli annunci possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Consulta la Panoramica degli annunci banner per ulteriori informazioni.

Questa guida spiega come iniziare a utilizzare le tecnologie di ancoraggio annunci banner adattivi, che massimizza il rendimento ottimizzando le dimensioni dell'annuncio per ogni dispositivo utilizzando la larghezza di un annuncio da te specificata.

Banner adattivo ancorato

Gli annunci banner adattivi ancorati sono annunci con proporzioni fisse anziché i normali annunci con dimensioni fisse. Le proporzioni sono simili a quelle dello standard di settore 320 x 50. Una volta specificata la larghezza completa disponibile, viene restituito un annuncio con l'altezza ottimale per quella larghezza. L'altezza ottimale non cambia tra le richieste dello stesso dispositivo e le viste circostanti non devono muoversi quando l'annuncio si aggiorna.

Prerequisiti

Completa la Guida introduttiva.

Effettua sempre test con annunci di prova

Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione attivi. In caso contrario, l'account verrà sospeso.

Il modo più semplice per caricare annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova dedicato per iOS. banner:

/21775744923/example/adaptive-banner

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

Per ulteriori informazioni sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Test Google Ads.

Crea una GAMBannerView

Gli annunci banner vengono visualizzati in GAMBannerView oggetti, quindi il primo passo per integrare gli annunci banner è includere un GAMBannerView nella gerarchia delle visualizzazioni. Questa operazione viene in genere eseguita in modo programmatico tramite Interface Builder.

In modo programmatico

Un GAMBannerView può anche essere istanziato direttamente. L'esempio seguente crea un GAMBannerView:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

Per utilizzare un GAMBannerView, crea un UIViewRepresentable:

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

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

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }BannerContentView.swift

Per gestire l'inizializzazione e il comportamento del GAMBannerView, crea un Coordinator:

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }BannerContentView.swift

Per ottenere la larghezza della visualizzazione, utilizza GeometryReader. Questo corso calcolano le dimensioni dell'annuncio appropriate per l'orientamento corrente del dispositivo. La frame è impostata sull'altezza calcolata in base alle dimensioni dell'annuncio.

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }BannerContentView.swift

Objective-C

Tieni presente che in questo caso non assegniamo vincoli di larghezza o altezza, poiché la dimensione annuncio fornita fornirà al banner una dimensione intrinseca dei contenuti per vista.

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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

Interface Builder

Puoi aggiungere un GAMBannerView a uno storyboard o a un file xib. Quando si utilizza questo assicurati di aggiungere vincoli di posizione solo sul banner. Ad esempio: quando visualizzi un banner adattivo nella parte inferiore dello schermo, imposta la parte inferiore della visualizzazione banner uguale alla parte superiore della Guida al layout inferiore e imposta la centerX pari a centerX della visualizzazione sovrapposta.

Le dimensioni dell'annuncio del banner sono ancora impostate in modo programmatico:

Swift

bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Carica un annuncio

Una volta che GAMBannerView è attivo e le sue proprietà configurato, è il momento di caricare un annuncio. Per farlo, chiama loadRequest: su un GAMRequest :

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/21775744923/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())BannerContentView.swift

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

Gli oggetti GAMRequest rappresentano una singola richiesta di annuncio e contengono proprietà relative a elementi come le informazioni di targeting.

Se il caricamento dell'annuncio non va a buon fine, non è necessario richiederne esplicitamente un altro, se hai configurato l'aggiornamento dell'unità pubblicitaria. Lo SDK Google Mobile Ads rispetta la frequenza di aggiornamento specificata nell'interfaccia utente di Ad Manager. Se non hai abilitato l'aggiornamento, dovrai inviare una nuova richiesta.

Eventi annuncio

Utilizzando GADBannerViewDelegate, puoi ascoltare 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 di annunci banner, imposta la proprietà delegate su GAMBannerView a un oggetto che implementa protocollo GADBannerViewDelegate. In genere, la classe che implementa i banner degli annunci funge anche da classe delegata, nel qual caso la proprietà delegate può essere impostato su self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    bannerView.delegate = self
  }
}

SwiftUI

banner.delegate = selfBannerContentView.swift

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  // ...
  self.bannerView.delegate = self;
}

Implementare gli eventi banner

Ciascun metodo in GADBannerViewDelegate è contrassegnato come facoltativo, quindi di implementare solo i metodi che desideri. 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");
}

Consulta l'esempio di amministratore annunci per un'implementazione dei metodi del delegato del banner nell'app Demo API per iOS.

Swift Objective-C

Casi d'uso

Di seguito sono riportati alcuni casi d'uso di esempio per questi metodi degli eventi annuncio.

Aggiungere un banner alla gerarchia di visualizzazione una volta ricevuto l'annuncio

Ti consigliamo di ritardare l'aggiunta di un GAMBannerView alla gerarchia delle visualizzazioni fino a quando non viene ricevuto un annuncio. Puoi farlo ascoltando per l'evento bannerViewDidReceiveAd::

Swift

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

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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 sola 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:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Mettere in pausa e riattivare l'app

Il protocollo GADBannerViewDelegate prevede metodi per inviarti notifiche sugli eventi, ad esempio ad esempio quando un clic attiva la presentazione o la chiusura di un overlay. Se vuoi monitorare se questi eventi sono dovuti ad annunci, registrati per questi GADBannerViewDelegate metodi.

Per rilevare tutti i tipi di presentazioni di overlay o chiamate esterne al browser, non solo a quelli provenienti dai clic sugli annunci, è meglio che la tua app ascolti metodi equivalenti su UIViewController o UIApplication. Ecco una tabella che mostra i metodi iOS equivalenti che vengono richiamati contemporaneamente GADBannerViewDelegate metodi:

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

Conteggio manuale delle impressioni

Puoi inviare manualmente ping delle impressioni ad Ad Manager se disponi di server le condizioni in cui deve essere registrata un'impressione. Questa operazione può essere eseguita Attiva un GAMBannerView per le impressioni manuali prima di caricare un annuncio:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Quando stabilisci che un annuncio è stato restituito correttamente e appare sullo schermo, puoi attivare manualmente un'impressione:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Eventi app

Gli eventi app ti consentono di creare annunci che possono inviare messaggi al codice dell'app. La l'app può quindi eseguire azioni basate su questi messaggi.

Puoi ascoltare gli eventi delle app specifici di Ad Manager utilizzando GADAppEventDelegate. Questi eventi possono verificarsi in qualsiasi momento durante il ciclo di vita dell'annuncio, anche prima Viene chiamato l'elemento bannerViewDidReceiveAd: dell'oggetto GADBannerViewDelegate.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

I metodi degli eventi app possono essere implementati in un controller di visualizzazione:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Ricordati di impostare il delegato utilizzando la proprietà appEventDelegate prima di effettuare la richiesta di un annuncio.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Ecco un esempio che mostra come modificare il colore di sfondo dell'app specificandolo tramite un evento app:

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Questa è la creatività corrispondente che invia messaggi di evento app a colori appEventDelegate:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Guarda l'esempio di eventi app di Ad Manager per un'implementazione di eventi app nella app demo API per iOS.

Swift Objective-C

Risorse aggiuntive

Esempi su GitHub

Esempio di annunci banner adattivi ancorati: Swift | SwiftUI | Objective-C

Demo sulle funzionalità avanzate: Swift | Objective-C

Passaggi successivi

Banner comprimibili

Gli annunci banner comprimibili sono annunci banner inizialmente presentati come annunci più grandi con un pulsante che consente di comprimere l'annuncio riducendolo a una dimensione inferiore. Valuta l'uso per ottimizzare ulteriormente il rendimento. Per ulteriori dettagli, consulta gli annunci banner comprimibili.

Banner adattivi in linea

I banner adattivi in linea sono banner più grandi e più alti rispetto agli adattivi ancorati banner. Sono di 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 app che inseriscono annunci banner in contenuti scorrevoli. Vedi Adattivi in linea banner per saperne di più i dettagli.

Esplora altri argomenti

Privacy degli utenti