Rendu des annonces iPhone X

Ce guide présente les bonnes pratiques à suivre pour coder vos applications afin qu'elles affichent correctement les annonces sur l'iPhone X.

Prérequis

  • Suivez les instructions de la section Commencer.

Les bannières doivent être placées dans la zone de sécurité pour éviter qu'elles soient masquées par les angles arrondis, le boîtier du capteur et l'indicateur d'accueil. Sur cette page, vous trouverez des exemples montrant comment ajouter des contraintes pour positionner une bannière en haut ou en bas de la zone de sécurité. Les contraintes de storyboard et de programmation sont présentées dans un environnement compatible avec iOS 9+ et Xcode 9+. Des solutions de contournement pour les versions antérieures d'iOS et de Xcode sont également indiquées.

Storyboard/Interface Builder

Si votre application utilise Interface Builder, assurez-vous d'abord d'avoir activé les guides de mise en page de la zone sécurisée. Pour ce faire, vous devez exécuter Xcode 9 ou version ultérieure et cibler iOS 9 ou version ultérieure.

Ouvrez votre fichier Interface Builder et cliquez sur la scène de votre contrôleur de vue. Les options Interface Builder Document s'affichent à droite. Consultez Utiliser les guides de mise en page de la zone sécurisée et assurez-vous de développer votre application pour iOS 9.0 et versions ultérieures au minimum.

Nous vous recommandons de limiter la taille de la bannière à la taille requise à l'aide de contraintes de largeur et de hauteur.

Vous pouvez désormais aligner la bannière en haut de la zone de sécurité en contraignant la propriété "Top" de GAMBannerView au haut de la zone de sécurité :

De même, vous pouvez aligner la bannière en bas de la zone de sécurité en contraignant la propriété Bottom de GAMBannerView au bas de la zone de sécurité :

Vos contraintes doivent maintenant ressembler à la capture d'écran ci-dessous (la taille et le positionnement peuvent varier) :

ViewController

Voici un extrait de code de contrôleur de vue simple qui effectue le minimum nécessaire pour afficher une bannière dans un GAMBannerView tel que configuré dans le storyboard ci-dessus :

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

Aligner les bannières sur le bord de la zone sécurisée

Si vous souhaitez afficher une bannière pleine largeur, alignée à gauche ou à droite, contraint le bord gauche/droit de la bannière au bord gauche/droit de la zone de sécurité et non au bord gauche/droit de la vue parente.

Si l'option Utiliser les guides de mise en page de la zone sécurisée est activée, le générateur d'interface utilisera par défaut les bords de la zone sécurisée lors de l'ajout de contraintes à la vue.

Compatibilité avec iOS 8 et versions antérieures

Si vous souhaitez prendre en charge iOS 8 ou une version antérieure à l'aide d'Interface Builder, vous devez décocher l'option Use Safe Area Layout Guides (Utiliser les guides de mise en page de la zone sécurisée) pour vos fichiers Interface Builder et vos storyboards.

Vous pouvez désormais ajouter des contraintes en bas du guide de mise en page supérieur (au lieu du haut de la zone de sécurité) :

Ajoutez également des contraintes en haut du guide de mise en page inférieur (au lieu du bas de la zone de sécurité) :

Ces repères de mise en page n'existent pas pour les bannières pleine largeur (qui ne sont affectées par la zone de sécurité qu'en mode paysage). L'option sécurisée dans Interface Builder consiste à rendre vos contraintes de bord gauche et droit relatives aux marges :

Cela décalera légèrement le bord de la bannière par rapport au bord de la supervue/zone de sécurité, ce qui garantira que votre bannière ne sera pas masquée en mode paysage sur l'iPhone X. Vous pouvez également obtenir le résultat souhaité de manière programmatique.

Programmatique

Si votre application crée des bannières publicitaires de manière programmatique, vous pouvez définir des contraintes et positionner la bannière publicitaire dans le code. Cet exemple (pour iOS 7.0 et versions ultérieures) montre comment contraindre une bannière à être centrée horizontalement en bas de la zone de sécurité :

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

Les techniques ci-dessus peuvent facilement être utilisées pour contraindre le haut de la zone de sécurité en modifiant les attributs et les ancres utilisés.

Annonces natives

Si votre application épingle des annonces natives en haut ou en bas de l'écran, les mêmes principes s'appliquent aux annonces natives qu'aux bannières publicitaires. La principale différence est qu'au lieu d'ajouter des contraintes à un GAMBannerView, vous devrez ajouter des contraintes à votre GADNativeAppInstallAdView et GADNativeContentAdView (ou à la vue contenant l'annonce) afin de respecter les guides de mise en page de la zone de sécurité. Pour les vues natives, nous vous recommandons de fournir des contraintes de taille plus explicites.

Annonces interstitielles et avec récompense

Les formats d'annonces plein écran, y compris les annonces interstitielles et avec récompense, sont affichés par le SDK Google Mobile Ads. Le SDK Google Mobile Ads sera mis à jour pour s'assurer que les éléments d'annonce, comme le bouton de fermeture, s'affichent au bon endroit. Nous mettrons à jour les notes de version et cette page de documentation lorsque cette modification sera disponible.