Banery reklamowe

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Banery reklamowe zajmują miejsce w układu aplikacji – u góry lub u dołu ekranu urządzenia. Pozostają na ekranie, gdy użytkownicy korzystają z aplikacji, i po pewnym czasie mogą się automatycznie odświeżać. Jeśli dopiero zaczynasz korzystać z reklam mobilnych, warto zacząć od tego. Studium przypadku.

Z tego przewodnika dowiesz się, jak zintegrować banery reklamowe z aplikacjiAdMob z aplikacjami na iOS. Oprócz instrukcji i fragmentów kodu znajdziesz w nim też informacje o prawidłowym rozmiarze baneru oraz linki do dodatkowych materiałów.

Wymagania wstępne

Zawsze testuj z reklamami testowymi

Tworząc i testując aplikacje, upewnij się, że używasz reklam testowych zamiast produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora jednostki reklamowej na banery iOS: ca-app-pub-3940256099942544/2934735716

Został on specjalnie skonfigurowany pod kątem zwracania reklam testowych dla każdego żądania. Możesz używać go we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby przed opublikowaniem aplikacji zastąpić go własnym identyfikatorem jednostki reklamowej.

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

Utwórz: GADBannerView

Banery reklamowe wyświetlają się w obiektach GADBannerView, więc pierwszym etapem integracji z banerami reklamowymi jest umieszczenie w hierarchii widoku ciągu GADBannerView. Zwykle odbywa się to za pomocą Kreatora interfejsu lub oprogramowania.

Kreator interfejsów

Element GADBannerView można dodać do scenorysu lub pliku xib tak jak w typowym widoku. Korzystając z tej metody, pamiętaj o dodaniu ograniczeń dotyczących szerokości i wysokości odpowiadające rozmiarowi reklamy, który chcesz wyświetlać. Na przykład podczas wyświetlania banera (320 x 50) użyj ograniczenia szerokości do 320 punktów i ograniczenia wysokości do 50 punktów.

Programowo

Instancja GADBannerView może też zostać utworzona bezpośrednio. Oto przykład tworzenia elementu GADBannerView wyśrodkowanego w dolnej środkowej części bezpiecznego ekranu o rozmiarze banera 320 x 50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

W takich przypadkach nie stosujemy ograniczeń dotyczących szerokości i wysokości, ponieważ podany rozmiar reklamy powoduje rozmiar banera wewnątrz reklamy.

Jeśli nie chcesz używać rozmiaru standardowego zdefiniowanego przez stały, możesz ustawić rozmiar niestandardowy za pomocą atrybutu GADAdSizeFromCGSize. Więcej informacji znajdziesz w sekcji dotyczącej rozmiaru baneru.

Skonfiguruj GADBannerView usługi

Aby wczytywać i wyświetlać reklamy, GADBannerView wymaga kilku właściwości.

  • rootViewController – ten kontroler widoku służy do prezentacji nakładki po kliknięciu reklamy. Zazwyczaj powinien to być kontroler widoku, który zawiera element GADBannerView.
  • adUnitID – to identyfikator jednostki reklamowej, z której GADBannerView ma wczytywać reklamy.

Oto przykład kodu pokazujący, jak ustawić 2 wymagane właściwości w metodzie viewDidLoadViewUIController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Wczytywanie reklamy

Gdy zasada GADBannerView jest już skonfigurowana i jej właściwości są skonfigurowane, czas wczytać reklamę. W tym celu wywołują obiekt loadRequest: w obiekcie GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest obiekty odpowiadają pojedynczemu żądaniu reklamy i zawierają właściwości takie jak informacje o kierowaniu.

Zdarzenia reklamowe

Używanie tagu GADBannerViewDelegate umożliwia nasłuchiwanie zdarzeń cyklu życia, takich jak zamknięcie reklamy lub zamknięcie aplikacji przez użytkownika.

Rejestrowanie się na wydarzenia z banerami

Aby rejestrować zdarzenia baneru reklamowego, ustaw właściwość delegate w obiekcie GADBannerView na obiekt implementujący protokół GADBannerViewDelegate. Klasa, która implementuje banery reklamowe, działa też jako klasa z przekazanym dostępem. W tym przypadku właściwość delegate może być ustawiona 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;
}

Implementowanie zdarzeń baneru

Każda z metod w metodzie GADBannerViewDelegate jest oznaczona jako opcjonalna, dlatego musisz zastosować tylko te z nich, które chcesz zastosować. 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");
}

Przykład implementacji przekazywania dostępu do banerów w aplikacji demonstracyjnej interfejsu iOS API znajdziesz w delegacji reklam.

Swift Objective-C

Przypadki użycia

Oto kilka przykładów użycia tych metod.

Dodawanie banera do hierarchii widoku po otrzymaniu reklamy

Możesz opóźnić dodanie GADBannerView do hierarchii widoku do momentu otrzymania reklamy. Aby to zrobić, nasłuchuj 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ć banery reklamowe, które się wyświetlają, jak widać 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 umożliwia metody powiadamiania o zdarzeniach, np. gdy kliknięcie spowoduje wyświetlenie lub odrzucenie nakładki. Aby śledzić, czy te zdarzenia były spowodowane reklamami, zarejestruj się na potrzeby tych metod GADBannerViewDelegate.

Aby wychwycić wszystkie typy nakładek reklamowych lub wywołań zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, Twoja aplikacja lepiej wykrywa odpowiednie metody na stronach UIViewController i UIApplication. Poniżej znajduje się tabela z odpowiednikami metod iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:

Metoda GADBannerViewView Metoda na iOS
bannerViewWillPresentScreen: UIViewController i viewWillDisappear:
bannerViewWillDismissScreen: UIViewController i viewWillAppear:
bannerViewDidDismissScreen: UIViewController i viewDidAppear:

Tabela poniżej zawiera standardowe rozmiary banerów.

Rozmiar w punktach (szer.xwys.) Opis Dostępność Stała AdSize
320 x 50 Baner Telefony i tablety GADAdSizeBanner
320 x 100 Duży baner Telefony i tablety GADAdSizeLargeBanner
300 x 250 Średni prostokąt IAB Telefony i tablety GADAdSizeMediumRectangle
468 x 60 Pełnowymiarowy baner IAB Tablety GADAdSizeFullBanner
728 x 90 Tabela IAB Tablety GADAdSizeLeaderboard
Podana szerokość x Wysokość adaptacyjna Baner adaptacyjny Telefony i tablety

Niestandardowe rozmiary reklam

Aby zdefiniować niestandardowy rozmiar banera, ustaw odpowiedni rozmiar w funkcji GADAdSizeFromCGSize, jak pokazano tutaj:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Dodatkowe materiały

Przykłady w GitHubie

Samouczki wideo o reklamach garażowych

Historie sukcesu