Renderowanie reklam na iPhonie X

Z tego przewodnika dowiesz się, jak kodować aplikacje, aby reklamy były prawidłowo renderowane na iPhonie X.

Wymagania wstępne

Banery reklamowe muszą być umieszczone w „bezpiecznym obszarze”, aby nie zasłaniały ich zaokrąglone rogi, obudowa czujnika i wskaźnik powrotu do ekranu początkowego. Na tej stronie znajdziesz przykłady umieszczania banerów na górze i na dole bezpiecznego obszaru. Ograniczenia dotyczące storyboardu i programowania są demonstrowane w środowisku, które obsługuje iOS 9 lub nowszy oraz Xcode 9 lub nowszy. Podano też sposoby obejścia ograniczeń w starszych wersjach iOS i Xcode.

Scenorys/Interface Builder

Jeśli Twoja aplikacja korzysta z Interface Builder, najpierw upewnij się, że masz włączone przewodniki układu dotyczące bezpiecznej strefy. Aby to zrobić, musisz używać Xcode 9 lub nowszej wersji i kierować się na iOS 9 lub nowszą wersję.

Otwórz plik Interface Builder i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje dokumentu w Builderze interfejsu. Zaznacz opcję Użyj bezpiecznych wskazówek dotyczących rozmieszczenia i upewnij się, że kompilujesz aplikację na iOS 9.0 lub nowszą wersję.

Zalecamy ograniczenie rozmiaru banera do wymaganego za pomocą ograniczeń szerokości i wysokości.

Teraz możesz wyrównać baner do górnej krawędzi bezpiecznego obszaru, ograniczając właściwość Top w komponencie GAMBannerView do górnej krawędzi bezpiecznego obszaru:

W podobny sposób możesz wyrównać baner do dolnej krawędzi bezpiecznego obszaru, ograniczając właściwość Dolny element widoku GAMBannerView do dolnej krawędzi bezpiecznego obszaru:

Ograniczenia powinny wyglądać podobnie jak na zrzucie ekranu poniżej (rozmiar i pozycja mogą się różnić):

ViewController

Oto prosty fragment kodu kontrolera widoku, który zapewnia minimalne wymagane funkcje do wyświetlania banera w komponencie GAMBannerView skonfigurowanym zgodnie z poniższym scenariuszem:

Swift

class ViewController: UIViewController {

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

  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(GAMRequest())
  }

}

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

Dopasowywanie banerów do krawędzi bezpiecznej strefy

Jeśli chcesz umieścić baner o pełnej szerokości z wyrównaniem do lewej lub prawej strony, ogranicz lewą lub prawą krawędź banera do lewej lub prawej krawędzi bezpiecznej strefy, a nie do lewej lub prawej krawędzi superwidoku.

Jeśli masz włączoną opcję Użyj szablonów układu bezpiecznej strefy, kreator interfejsu domyślnie będzie używać krawędzi bezpiecznej strefy podczas dodawania ograniczeń do widoku.

Obsługa systemu iOS 8 i starszych

Jeśli chcesz obsługiwać iOS 8 lub starsze wersje za pomocą Interface Builder, odznacz opcję Użyj linii pomocniczych obszaru bezpiecznego w plikach i storyboardach Interface Builder.

Teraz możesz dodawać ograniczenia do dolnej części górnego przewodnika układu (zamiast do górnej części bezpiecznego obszaru):

Dodaj też ograniczenia do górnej części dolnego przewodnika układu (zamiast dolnej części bezpiecznego obszaru):

W przypadku banerów o pełnej szerokości (na które wpływa tylko bezpieczny obszar w orientacji poziomej) te wskazówki dotyczące układu nie są dostępne. Bezpieczną opcją w Interface Builder jest ustawienie ograniczeń lewego i prawego brzegu względem marginesów:

Dzięki temu krawędź banera będzie nieco odsunięta od krawędzi widoku superview lub bezpiecznego obszaru, co zapewni, że baner nie będzie zasłonięty w orientacji poziomej na iPhonie X. Zamierzonego wyniku możesz też osiągnąć automatycznie.

Automatyczna

Jeśli Twoja aplikacja tworzy reklamy w banerach programowo, możesz zdefiniować ograniczenia i umieścić baner w kodzie. Ten przykład (dla iOS w wersji 7.0 lub nowszej) pokazuje, jak ograniczyć baner do wyśrodkowania go poziomo u dołu bezpiecznego obszaru:

Swift

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
    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(GAMRequest())
  }

  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

Opisane wyżej techniki można łatwo zastosować do ograniczenia do górnej krawędzi bezpiecznej strefy, modyfikując używane atrybuty i kotwy.

Reklamy natywne

Jeśli Twoja aplikacja przypina reklamy natywne u góry lub u dołu ekranu, do reklam natywnych mają zastosowanie te same zasady co do banerów reklamowych. Główna różnica polega na tym, że zamiast dodawać ograniczenia do GAMBannerView, musisz je dodać do GADNativeAppInstallAdView i GADNativeContentAdView (lub widoku zawierającego reklamę), aby zachować bezpieczną przestrzeń. W przypadku widoków natywnych zalecamy podanie bardziej szczegółowych ograniczeń rozmiaru.

Reklamy pełnoekranowe i reklamy z nagrodą

Formaty reklam pełnoekranowych, w tym reklamy pośrednie i reklamy z nagrodą, są renderowane przez pakiet SDK do reklam mobilnych Google. Wprowadzimy aktualizację pakietu SDK do reklam mobilnych Google, aby elementy reklam, np. przycisk Zamknij, były renderowane we właściwym miejscu. Gdy ta zmiana będzie dostępna, zaktualizujemy informacje o wersji i stronę dokumentacji.