Banery reklamowe

Banery reklamowe to prostokątne reklamy, które zajmują część układu aplikacji. Pozostają na ekranie, gdy użytkownicy wchodzą w interakcję z aplikacją – są zakotwiczone u góry lub u dołu ekranu albo w tekście podczas przewijania. Banery reklamowe mogą być automatycznie odświeżane po upływie określonego czasu. Aby dowiedzieć się więcej, zapoznaj się z artykułem Omówienie banerów reklamowych.

Z tego przewodnika dowiesz się, jak zacząć korzystać z zakotwiczonych banerów adaptacyjnych, które pozwolą Ci zmaksymalizować skuteczność dzięki optymalizacji rozmiaru reklamy dla każdego urządzenia z wykorzystaniem określonej szerokości reklamy.

Zakotwiczony baner adaptacyjny

Zakotwiczone banery adaptacyjne to reklamy o stałym współczynniku proporcji, a nie reklamy o stałym rozmiarze. Format obrazu jest podobny do standardu branżowego 320 x 50. Gdy podasz pełną dostępną szerokość, wyświetli Ci się reklama o optymalnej wysokości dla tej szerokości. Optymalna wysokość nie zmienia się w zależności od żądania wysyłanego z tego samego urządzenia, a okoliczne widoki nie muszą się zmieniać przy odświeżaniu reklamy.

Wymagania wstępne

Zawsze korzystaj z reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najprostszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego identyfikatora testowej jednostki reklamowej na banery na iOS: ca-app-pub-3940256099942544/2435281174

Został on specjalnie skonfigurowany tak, aby zwracał reklamy testowe w odpowiedzi na każde żądanie. Możesz go używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, by przed opublikowaniem aplikacji zastąpić go własnym identyfikatorem jednostki reklamowej.

Więcej informacji o działaniu reklam testowych z pakietu SDK do reklam mobilnych znajdziesz w artykule Reklamy testowe.

Utwórz GADBannerView

Banery reklamowe są wyświetlane w obiektach GADBannerView, więc pierwszym krokiem w kierunku integracji banerów reklamowych jest dodanie GADBannerView do hierarchii widoków. Zwykle odbywa się to automatycznie lub za pomocą kreatora interfejsów.

Automatycznie

Instancja GADBannerView można też utworzyć bezpośrednio. Oto przykład tworzenia elementu GADBannerView wyrównanego do dolnej środkowej części bezpiecznego obszaru na ekranie:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GADBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  
@end

Pamiętaj, że w tym przypadku nie stosujemy ograniczeń szerokości ani wysokości, ponieważ podany rozmiar reklamy nadaje banerowi wewnętrzny rozmiar treści odpowiadający rozmiarowi widoku.

Kreator interfejsów

Element GADBannerView można dodać do pliku scenorysu lub xib. Korzystając z tej metody, pamiętaj, by dodać ograniczenia pozycji tylko do banera. Gdy na przykład wyświetlasz baner adaptacyjny u dołu ekranu, dolną część widoku banera ustaw tak samo jak górną część dolnego przewodnika po układzie, a środkową część banera (X) ustaw na poziomie środkowym (X).

Rozmiar reklamy banera jest nadal ustawiany automatycznie:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

Wczytaj reklamę

Po skonfigurowaniu elementu GADBannerView i skonfigurowaniu jego właściwości przychodzi czas na wczytanie reklamy. Aby to zrobić, wywołujesz loadRequest: w obiekcie GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(GADRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości takie jak informacje o kierowaniu.

Jeśli reklama się nie wczytuje, nie musisz wysyłać wyraźnie prośby o kolejną, o ile jednostka reklamowa jest skonfigurowana tak, aby się odświeżała. Pakiet SDK do reklam mobilnych Google respektuje częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, musisz wysłać nową prośbę.

Zdarzenia reklamowe

Korzystając z GADBannerViewDelegate, możesz wykrywać zdarzenia cyklu życia, np. gdy reklama zostanie zamknięta lub użytkownik wyjdzie z aplikacji.

Rejestracja w wydarzeniach związanych z banerami

Aby zarejestrować zdarzenia banerów reklamowych, ustaw właściwość delegate w GADBannerView na obiekt implementujący protokół GADBannerViewDelegate. Ogólnie klasa implementująca banery reklamowe działa też jako klasa przedstawicieli. W takim przypadku właściwość delegate można ustawić na self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

Implementacja zdarzeń banerów

Każda metoda w obiekcie GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz tylko zaimplementować te metody, które chcesz. Ten przykład implementuje każdą metodę i rejestruje komunikat w konsoli:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

-   (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

-   (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

-   (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

-   (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

-   (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

Zapoznaj się z przykładem wdrożenia metod przekazywania dostępu do banerów w aplikacji demonstracyjnej iOS API.

Swift Objective-C

Przykłady zastosowań

Oto kilka przykładów użycia tych metod dotyczących zdarzeń reklamowych.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

Warto opóźnić dodanie elementu GADBannerView do hierarchii widoków do momentu otrzymania reklamy. Możesz to zrobić, nasłuchując zdarzenia bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Animowanie banera reklamowego

Za pomocą zdarzenia bannerViewDidReceiveAd: możesz też animować zwrócony baner reklamowy, jak w tym przykładzie:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Wstrzymywanie i wznawianie aplikacji

Protokół GADBannerViewDelegate udostępnia metody powiadamiania o zdarzeniach, np. gdy kliknięcie powoduje wyświetlenie lub zamknięcie nakładki. Jeśli chcesz śledzić, czy te zdarzenia są związane z reklamami, zarejestruj się, by korzystać z tych metod GADBannerViewDelegate.

Aby wychwytywać wszystkie typy nakładek i wywołań przeglądarki zewnętrznej, a nie tylko te pochodzące z kliknięć reklam, lepiej jest nasłuchiwać metod równoważnych w UIViewController lub UIApplication. W tej tabeli znajdziesz odpowiadające im metody iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:

Metoda GADBannerViewDelegate Metoda na iOS
bannerViewWillPresentScreen: Interfejs viewWillDisappear: kontrolera UIViewController
bannerViewWillDismissScreen: Interfejs viewWillAppear: kontrolera UIViewController
bannerViewDidDismissScreen: Interfejs viewDidAppear: kontrolera UIViewController

Dodatkowe materiały

Przykłady w GitHubie

Dalsze kroki

Banery zwijane

Zwijane banery reklamowe to banery reklamowe, które są początkowo wyświetlane jako większa nakładka z przyciskiem umożliwiającym zwijanie reklamy do mniejszego rozmiaru. Możesz użyć ich do dalszej optymalizacji skuteczności. Więcej informacji znajdziesz w artykule o zwijanych banerach reklamowych.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne są większe i wyższe w porównaniu do zakotwiczonych banerów adaptacyjnych. Mają zmienną wysokość, a ich wysokość może sięgać ekranu urządzenia. W przypadku aplikacji, które umieszczają banery reklamowe w przewijanych treściach, zalecamy stosowanie wbudowanych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w sekcji Wbudowane banery adaptacyjne.

Przeglądaj inne tematy