Renderização de anúncios no iPhone X

Este guia explica as práticas recomendadas para programar seus apps e renderizar anúncios corretamente no iPhone X.

Pré-requisitos

Os anúncios de banner precisam ser colocados na Safe Area para evitar que os cantos arredondados, a área dos sensores e a barra da tela inicial atrapalhem sua exibição. Nesta página, você encontra exemplos de como adicionar restrições para posicionar um banner na parte de cima ou de baixo da Safe Area. As restrições programáticas e de storyboard são demonstradas em um ambiente compatível com iOS 9 e Xcode 9 ou versões mais recentes. Soluções alternativas para versões anteriores do iOS e do Xcode também são abordadas.

Storyboard/Interface Builder

Se o app usa o Interface Builder, primeiro verifique se você ativou os guias de layout da Safe Area. Para fazer isso, execute o Xcode 9 ou mais recente e segmente o iOS 9 ou mais recente.

Abra o arquivo do Interface Builder e clique na cena do controlador de visualizações. As opções do Interface Builder Document vão aparecer à direita. Marque Use Safe Area Layout Guide e verifique se você está criando no mínimo para iOS 9.0 ou mais recente.

Recomendamos que você restrinja o banner ao tamanho necessário usando restrições de largura e altura.

Agora você pode alinhar o banner à parte de cima da Safe Area restringindo a propriedade "Top" do GAMBannerView à parte superior dessa área:

Da mesma forma, é possível alinhar o banner à parte de baixo da Safe Area restringindo a propriedade "Bottom" à parte inferior:

Suas restrições agora devem estar semelhantes à captura de tela abaixo (o tamanho/posicionamento pode variar):

ViewController

Confira um snippet de código simples do controlador de visualização que faz o mínimo necessário para mostrar um banner em um GAMBannerView, conforme configurado no storyboard acima:

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];
}

Alinhamento de banners à borda da Safe Area

Se você quiser um banner de largura total, alinhado à esquerda ou à direita, restrinja a borda esquerda/direita do banner à borda esquerda/direita da Safe Area, e não às bordas da superview.

Se a opção Use Safe Area Layout Guides estiver ativada, o Interface Builder usará por padrão as bordas da Safe Area ao adicionar restrições à visualização.

Compatibilidade com o iOS 8 e versões anteriores

Se você quiser oferecer compatibilidade com o iOS 8 ou versões anteriores usando o Interface Builder, desmarque Use Safe Area Layout Guides nos seus arquivos e storyboards dessa plataforma.

Depois, adicione restrições à parte de baixo do guia de layout superior (em vez da parte de cima da Safe Area):

Adicione também restrições à parte de cima do guia de layout inferior (em vez da parte de baixo da Safe Area):

Para banners de largura total (afetados pela Safe Area apenas na orientação paisagem), esses guias de layout não existem. A opção segura no Interface Builder é tornar as restrições de borda esquerda e direita relativas às margens:

Isso vai compensar um pouco a borda do banner em relação à borda da superview/Safe Area, garantindo que ele não fique oculto na orientação paisagem do iPhone X. Você também pode alcançar o resultado desejado de forma programática.

Programática

Se o app criar anúncios de banner de forma programática, você pode definir restrições e posicionar o anúncio no código. Este exemplo (para iOS versão 7.0 e mais recente) mostra como restringir um banner para que ele fique centralizado horizontalmente na parte de baixo da Safe Area:

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

As técnicas acima podem ser facilmente usadas para restringir a parte de cima da Safe Area modificando os atributos e âncoras usados.

Anúncios nativos

Se o app fixar anúncios nativos na parte de cima ou de baixo da tela, os mesmos princípios deles se aplicam aos anúncios de banner. A principal diferença é que, em vez de adicionar restrições a um GAMBannerView, você precisa adicionar ao GADNativeAppInstallAdView e ao GADNativeContentAdView (ou à visualização que contém o anúncio) para respeitar as diretrizes de layout da Safe Area. Para visualizações nativas, recomendamos fornecer restrições de tamanho mais explícitas.

Anúncios intersticiais e premiados

Os formatos de anúncio em tela cheia, incluindo intersticiais e premiados, são renderizados pelo SDK dos anúncios para dispositivos móveis do Google. Vamos atualizar esse SDK para garantir que elementos de anúncio, como o botão de fechar, sejam renderizados no lugar certo. Também vamos atualizar as notas da versão e esta página de documentação quando essa mudança estiver disponível.