Renderización de anuncios en el iPhone X

En esta guía, se demuestran las prácticas recomendadas para codificar tus apps de modo que rendericen anuncios correctamente en el iPhone X.

Requisitos previos

• Completar la guía de introducción

Anuncios de banner

Los anuncios de banner deben colocarse en el "área segura" para evitar que queden ocultos por las esquinas redondeadas, la carcasa del sensor y el indicador de inicio. En esta página, encontrarás ejemplos de cómo agregar restricciones para colocar un banner en la parte superior o inferior del área segura. Las restricciones programáticas y de storyboard se demuestran en un entorno que admite iOS 9 y versiones posteriores, además de Xcode 9 y versiones posteriores. También se indican soluciones alternativas para versiones anteriores de iOS y Xcode.

Storyboard/Interface Builder

Si tu app usa Interface Builder, primero asegúrate de haber habilitado las guías de diseño del área segura. Para ello, debes ejecutar Xcode 9 o versiones posteriores, y tu app debe estar orientada a iOS 9 o versiones posteriores.

Abre el archivo de Interface Builder y haz clic en la escena del controlador de vistas. Verás las opciones de Interface Builder Document (Documento de Interface Builder) a la derecha. Marca la casilla de verificación Use Safe Area Layout Guides (Usar las guías de diseño de área segura) y asegúrate de que tu compilación sea para iOS 9.0 y versiones posteriores.

Te recomendamos que limites el banner al tamaño requerido con restricciones de ancho y altura.

Ahora puedes restringir la propiedad Top de GAMBannerView a la parte superior del área segura para alinear el banner a esa sección:

De manera similar, puedes alinear el banner a la parte inferior del área segura si restringes la propiedad Bottom de GAMBannerView a esa parte.

Tus restricciones ahora deberían verse similares a las de la siguiente captura de pantalla (el tamaño y la posición pueden variar):

ViewController

Este es un fragmento de código simple del controlador de vistas que hace lo mínimo necesario para mostrar un banner en una clase GAMBannerView tal como se configuró en el storyboard anterior:

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

Alinea los banners con los bordes del área segura

Si deseas tener un banner de ancho completo alineado a la izquierda o a la derecha, restringe el borde izquierdo o derecho del anuncio al borde izquierdo o derecho del área segura, y no al borde izquierdo o derecho de la supervista.

Si tienes habilitada la opción Use Safe Area Layout Guides (Usar las guías de diseño de área segura), Interface Builder usará de forma predeterminada los bordes del área segura cuando agregues restricciones a la vista.

Compatibilidad con iOS 8 y versiones anteriores

Si quieres admitir iOS 8 o versiones anteriores con Interface Builder, debes desmarcar la opción Use Safe Area Layout Guides (Usar las guías de diseño de área segura) para tus storyboards y archivos de Interface Builder.

Ahora puedes agregar restricciones a la parte inferior de la guía de diseño superior (en lugar de la parte superior del área segura):

También es posible agregar restricciones a la parte superior de la guía de diseño inferior (en lugar de la parte inferior del área segura):

Estas guías de diseño no existen para los banners de ancho completo (que solo se ven afectados por el área segura en orientación horizontal). La opción segura en Interface Builder hace que las restricciones de los bordes izquierdo y derecho sean relativas a los márgenes:

Esto compensa el borde del banner un poco desde el borde de la supervista o el área segura, lo que garantiza que el banner no se oculte en orientación horizontal en el iPhone X. También puedes lograr el resultado deseado de forma programática.

Programática

Si tu app crea anuncios de banner de forma programática, puedes definir restricciones y posicionar estos anuncios con el código que escribes. En este ejemplo (para iOS 7.0 y versiones posteriores), se muestra cómo restringir un banner para que se centre de forma horizontal en la parte inferior del á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

Las técnicas anteriores se pueden usar fácilmente para restringir la parte superior del área segura modificando los elementos fijos y los atributos usados.

Anuncios nativos

Si tu app fija anuncios nativos en la parte superior o inferior de la pantalla, se aplican los mismos principios para los anuncios nativos que para los anuncios de banner. La diferencia clave es que, en lugar de agregar restricciones a una clase GAMBannerView, deberás agregarlas a tus clases GADNativeAppInstallAdView y GADNativeContentAdView (o a la vista contenedora del anuncio) para respetar las guías de diseño de área segura. En el caso de las vistas nativas, recomendamos proporcionar restricciones de tamaño más explícitas.

Anuncios intersticiales y recompensados

El SDK de anuncios de Google para dispositivos móviles renderiza los formatos de anuncios de pantalla completa, incluidos los anuncios intersticiales y recompensados. Se actualizará el SDK de anuncios de Google para dispositivos móviles para garantizar que los elementos de los anuncios, como el botón de cierre, se rendericen en el lugar correcto. Actualizaremos las notas de la versión y esta página de documentación cuando esté disponible este cambio.