Banery reklamowe

Banery reklamowe zajmują miejsce w układzie aplikacji, u góry lub u dołu ekranu urządzenia. Pozostają na ekranie, gdy użytkownicy korzystają z aplikacji, i mogą odświeżać się automatycznie po pewnym czasie. Jeśli dopiero zaczynasz korzystać z reklam mobilnych, będzie to doskonały punkt wyjścia. Studium przypadku.

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

Wymagania wstępne

• Wykonaj czynności opisane w przewodniku dla początkujących.

Zawsze testuj za pomocą reklam testowych

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

Najprostszym sposobem wczytania reklam testowych jest użycie dedykowanego testowego identyfikatora jednostki reklamowej na potrzeby banerów na iOS: ca-app-pub-3940256099942544/2934735716

Został on specjalnie skonfigurowany tak, aby zwracał reklamy testowe w przypadku każdego żądania. Możesz go używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, by przed opublikowaniem aplikacji zastąpić go identyfikatorem jednostki reklamowej.

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

Utwórz GADBannerView

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

Kreator interfejsów

Element GADBannerView można dodać do scenorysu lub pliku xib tak jak w każdym typowym widoku. Jeśli korzystasz z tej metody, pamiętaj o dodaniu ograniczeń szerokości i wysokości, by pasowały do rozmiaru reklamy, którą chcesz wyświetlać. Na przykład przy wyświetlaniu banera (320 x 50) zastosuj ograniczenie szerokości 320 punktów i wysokość 50 punktów.

Automatycznie

Wystąpienie GADBannerView można też utworzyć bezpośrednio. Oto przykład tworzenia banera GADBannerView wyrównanego do środka bezpiecznego obszaru ekranu o rozmiarze 320 x 50:

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: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

@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.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 nada banerowi wrodzoną wielkość treści, która odpowiada rozmiarowi widoku.

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

Konfiguruj GADBannerView właściwości

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

• rootViewController Ten kontroler widoku służy do wyświetlania nakładki po kliknięciu reklamy. Zazwyczaj powinien być ustawiony na kontroler widoku, który zawiera GADBannerView.
• adUnitID – identyfikator jednostki reklamowej, z której GADBannerView ma wczytywać reklamy.

Oto przykład kodu, który pokazuje, jak ustawić 2 wymagane właściwości w metodzie viewDidLoad interfejsu UIViewController:

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

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

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

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

Wczytywanie reklamy

Po skonfigurowaniu GADBannerView i skonfigurowaniu jego właściwości przychodzi czas na wczytanie reklamy. W tym celu należy wywołać loadRequest: w obiekcie GADRequest:

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

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

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

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  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 wyraźnie prosić o jej odświeżenie, pod warunkiem że masz skonfigurowane odświeżanie jednostki reklamowej. Pakiet SDK do reklam mobilnych Google uwzględnia częstotliwość odświeżania podaną w interfejsieAdMob . Jeśli nie masz włączonego odświeżania, musisz wysłać nową prośbę.

Zdarzenia reklamowe

Za pomocą usługi GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, np. gdy reklama zostanie zamknięta lub użytkownik wyjdzie z aplikacji.

Rejestracja zdarzeń 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 przedstawiciela. W takim przypadku właściwość delegate może mieć wartość self.

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

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

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

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

Wdrażanie zdarzeń związanych z banerami

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

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")
}

- (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");
}

W przykładzie narzędzia do przekazywania reklam znajdziesz przykład implementacji metod przekazywania banera w aplikacji demonstracyjnej iOS API.

Swift Objective-C

Przypadki użycia

Oto kilka przykładowych przypadków użycia tych metod związanych ze zdarzeniami reklamowymi.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

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

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

- (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ć baner reklamowy po jego zwróceniu, jak pokazano w tym przykładzie:

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

- (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 były spowodowane reklamami, zarejestruj się, by korzystać z tych metod GADBannerViewDelegate.

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

Rozmiary banerów

W tabeli poniżej znajdziesz standardowe rozmiary banerów.

Niestandardowe rozmiary reklam

Aby zdefiniować niestandardowy rozmiar banera, ustaw odpowiedni rozmiar za pomocą parametru GADAdSizeFromCGSize, jak pokazano tutaj:

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

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

Dodatkowe zasoby

Przykłady na GitHubie

• Przykład banera reklamowego: Swift | Objective-C

• Prezentacja funkcji zaawansowanych: Swift | Objective-C

• Przykład obiektu Banner UITableView na GitHubie: Swift | Objective-C

Samouczki wideo w garażu reklam mobilnych

• Implementacja banerów
• Sprawdzone metody dotyczące banerów

Historie sukcesu

• Przykładowy przypadek użycia

Dalsze kroki

Dowiedz się więcej o prywatności użytkownika.