Rendering degli annunci su iPhone X

Questa guida illustra le best practice per la codifica delle app in modo che gli annunci vengano visualizzati correttamente su iPhone X.

Prerequisiti

  • Completa la procedura di primo utilizzo .

Gli annunci banner devono essere posizionati nell'"Area di sicurezza" per evitare di essere oscurati da angoli arrotondati, sensore e indicatore Home. In questa pagina troverai esempi su come aggiungere vincoli per posizionare un banner nella parte superiore o inferiore dell'area di sicurezza. I vincoli dello storyboard e quelli programmatici vengono illustrati in un ambiente che supporta iOS 9 e versioni successive e Xcode 9 e versioni successive. Vengono inoltre indicate le soluzioni alternative per le versioni precedenti di iOS e Xcode.

Storyboard/Interface Builder

Se la tua app utilizza Interface Builder, assicurati innanzitutto di aver attivato le guide di layout dell'area di sicurezza. Per farlo, devi utilizzare Xcode 9 e versioni successive e scegliere come target iOS 9 e versioni successive.

Apri il file di Interface Builder e fai clic sulla scena del controller della visualizzazione. A destra vedrai le opzioni Documento di Interface Builder. Seleziona Usa guide di layout dell'area di sicurezza e assicurati di creare la build per iOS 9.0 e versioni successive come minimo.

Ti consigliamo di vincolare il banner alla dimensione richiesta utilizzando i vincoli di larghezza e altezza.

Ora puoi allineare il banner alla parte superiore dell'area di sicurezza vincolando la proprietà Top di GAMBannerView alla parte superiore dell'area di sicurezza:

Allo stesso modo, puoi allineare il banner alla parte inferiore dell'area di sicurezza vincolando la proprietà Bottom di GAMBannerView alla parte inferiore dell'area di sicurezza:

I vincoli ora dovrebbero essere simili a quelli dello screenshot riportato di seguito (le dimensioni e il posizionamento possono variare):

ViewController

Ecco un semplice snippet di codice del controller della visualizzazione che esegue le operazioni minime necessarie per mostrare un banner in un GAMBannerView come configurato nello storyboard sopra:

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(AdManagerRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

Allineare i banner al bordo dell'area di sicurezza

Se vuoi un banner a larghezza intera, allineato a sinistra o a destra, vincola il bordo sinistro/destro del banner al bordo sinistro/destro dell'area di sicurezza e non al bordo sinistro/destro della supervista.

Se hai attivato l'opzione Usa guide di layout dell'area di sicurezza, Interface Builder utilizzerà per impostazione predefinita i bordi dell'area di sicurezza quando aggiungi vincoli alla visualizzazione.

Supportare iOS 8 e versioni precedenti

Se vuoi supportare iOS 8 o versioni precedenti utilizzando Interface Builder, devi deselezionare Usa guide di layout dell'area di sicurezza per i file di Interface Builder e gli storyboard.

Ora puoi aggiungere vincoli alla parte inferiore della guida di layout superiore (anziché alla parte superiore dell'area di sicurezza):

Aggiungi anche vincoli alla parte superiore della guida di layout inferiore (anziché alla parte inferiore dell'area di sicurezza):

Per i banner a larghezza intera (interessati dall'area di sicurezza solo in orizzontale), queste guide di layout non esistono. L'opzione sicura in Interface Builder consiste nel rendere i vincoli dei bordi sinistro e destro relativi ai margini:

In questo modo, il bordo del banner verrà spostato leggermente dal bordo della supervista/dell'area di sicurezza, assicurandoti che il banner non venga oscurato in orientamento orizzontale su iPhone X. Puoi ottenere il risultato desiderato anche in modo programmatico.

Pubblicità programmatica

Se la tua app crea annunci banner in modo programmatico, puoi definire i vincoli e posizionare l'annuncio banner nel codice. Questo esempio (per iOS versione 7.0 e successive) mostra come vincolare un banner in modo che sia centrato orizzontalmente nella parte inferiore dell'area di sicurezza:

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(AdManagerRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToVIew:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

- (void)positionBannerViewAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

@end

Le tecniche sopra descritte possono essere facilmente utilizzate per vincolare la parte superiore dell'area di sicurezza modificando gli attributi e gli ancoraggi utilizzati.

Annunci nativi

Se la tua app fissa gli annunci nativi nella parte superiore o inferiore dello schermo, si applicano gli stessi principi per gli annunci nativi come per gli annunci banner. La differenza principale è che, anziché aggiungere vincoli a un GAMBannerView, dovrai aggiungere vincoli a GADNativeAppInstallAdView e GADNativeContentAdView (o alla visualizzazione contenente l'annuncio) per rispettare le guide di layout dell'area di sicurezza. Per le visualizzazioni native, ti consigliamo di fornire vincoli di dimensione più espliciti.

Annunci interstitial e con premio

I formati di annunci a schermo intero, inclusi gli annunci interstitial e con premio, vengono sottoposti a rendering da Google Mobile Ads SDK. Verrà rilasciato un aggiornamento dell'Google Mobile Ads SDK SDK per garantire che gli elementi pubblicitari, come il pulsante di chiusura, vengano sottoposti a rendering nella posizione corretta. Aggiorneremo le note di rilascio e questa pagina della documentazione quando la modifica sarà disponibile.