Renderização de anúncios no iPhone X

Este guia demonstra 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 "área segura" para evitar que os cantos arredondados, a cobertura do sensor e o indicador de início atrapalhem a exibição. Nesta página, você encontra exemplos de como adicionar restrições para posicionar um banner na parte superior ou inferior da área segura. As restrições de storyboard e programáticas 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 observadas.

Storyboard/Interface Builder

Se o app usa o Interface Builder, primeiro verifique se você ativou os guias de layout da área segura. Para fazer isso, você precisa executar o Xcode 9 ou mais recente e direcionar o iOS 9 ou mais recente.

Abra o arquivo do Interface Builder e clique na cena do controlador de visualização. As opções do Interface Builder Document vão aparecer à direita. Marque Usar guias de layout de área segura e verifique se você está criando para iOS 9.0 e versões mais recentes, no mínimo.

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 área segura restringindo a propriedade "Top" do GAMBannerView à parte de cima da área segura:

Da mesma forma, é possível alinhar o banner à parte de baixo da área segura restringindo a propriedade "Bottom" do GAMBannerView à parte de baixo da área segura:

Suas restrições agora devem ser semelhantes à captura de tela abaixo (o dimensionamento/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];
}

Alinhar banners à borda da área segura

Se você quiser um banner de largura total, alinhado à esquerda ou à direita, restrinja a borda esquerda/direita do banner à borda esquerda/direita da área segura, e não à borda esquerda/direita da supervisualização.

Se a opção Usar guias de layout de área segura estiver ativada, o criador de interfaces usará por padrão as bordas da área segura ao adicionar restrições à visualização.

Compatibilidade com o iOS 8 e versões anteriores

Se você quiser oferecer suporte ao iOS 8 ou versões anteriores usando o Interface Builder, desmarque Usar guias de layout de área segura para seus arquivos e storyboards do Interface Builder.

Agora você pode adicionar restrições à parte de baixo do guia de layout superior (em vez da parte de cima da área segura):

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

Para banners de largura total (afetados apenas pela área segura 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 supervisualização/área segura, garantindo que o banner 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 maneira programática, você poderá definir restrições e posicionar o anúncio de banner 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 área segura:

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 área segura 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 se aplicam a eles e aos anúncios de banner. A principal diferença é que, em vez de adicionar restrições a um GAMBannerView, você precisa adicionar restrições ao GADNativeAppInstallAdView e ao GADNativeContentAdView (ou à visualização que contém o anúncio) para respeitar os guias de layout da área segura. 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 anúncios intersticiais e premiados, são renderizados pelo SDK dos anúncios para dispositivos móveis do Google. Vamos atualizar o SDK dos anúncios para dispositivos móveis do Google para garantir que os elementos de anúncio, como o botão de fechar, sejam renderizados no lugar certo. Vamos atualizar as notas de lançamento e esta página de documentação quando essa mudança estiver disponível.