Konfigurowanie banerów reklamowych

Wybierz platformę: Android iOS Unity Flutter Android (starsza wersja)

Banery reklamowe to prostokątne reklamy, które zajmują część układu aplikacji. Zakotwiczone banery adaptacyjne zawsze wyświetlają się na ekranie, są zakotwiczone u góry lub na dole ekranu i mają maksymalną wysokość 20% rozmiaru ekranu, ale nie więcej niż 150 pikseli. Aby zoptymalizować rozmiar reklamy na każdym urządzeniu, używaj banerów adaptacyjnych.

Z tego przewodnika dowiesz się, jak wczytać zakotwiczony baner adaptacyjny w aplikacji na iOS.

Wymagania wstępne

Zanim przejdziesz dalej, skonfiguruj Google Mobile Ads SDK.

Zawsze testuj za pomocą reklam testowych

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

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora testowej jednostki reklamowej w przypadku banerów na iOS:

ca-app-pub-3940256099942544/2435281174

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 tylko, aby przed opublikowaniem aplikacji zastąpić go identyfikatorem swojej jednostki reklamowej.

Więcej informacji o działaniu Google Mobile Ads SDK reklam testowych znajdziesz w artykule Reklamy testowe.

Tworzenie obiektu GADBannerView

Banery reklamowe są wyświetlane w GADBannerView obiektach, więc pierwszym krokiem w integracji banerów reklamowych jest umieszczenie elementu GADBannerView w hierarchii widoków. Zwykle odbywa się to programowo lub za pomocą narzędzia Interface Builder.

programowo,

GADBannerView można też utworzyć bezpośrednio. W tym przykładzie tworzymy GADBannerView:

Swift

// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])

SwiftUI

Aby użyć BannerView, utwórz UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

Dodaj UIViewRepresentable do hierarchii widoków, określając wartości height i width:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Interface Builder

Możesz dodać GADBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodawać ograniczenia pozycji tylko w przypadku banera. Na przykład podczas wyświetlania adaptacyjnego banera u dołu ekranu ustaw dolną krawędź widoku banera na równą górnej krawędzi przewodnika po układzie dolnym, a ograniczenie centerX na równe centerX widoku nadrzędnego.

Ustawianie rozmiaru reklamy

Duże banery adaptacyjne to większy format przeznaczony do układów, których nie trzeba przewijać. W porównaniu ze standardowymi zakotwiczonymi banerami adaptacyjnymi te banery mają większą maksymalną wysokość (do 20% wysokości ekranu, od 50 do 150 punktów). Ta większa przestrzeń jest zoptymalizowana pod kątem treści wideo.

Ten przykład pokazuje, jak uzyskać rozmiar dużego zakotwiczonego banera adaptacyjnego:

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

Wczytywanie reklamy

Gdy GADBannerView jest już na miejscu i ma skonfigurowane właściwości, takie jak adUnitID, czas wczytać reklamę. W tym celu wywołaj loadRequest: na obiekcie GADRequest:

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

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

GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości dotyczące m.in. informacji o kierowaniu.

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Google Mobile Ads SDK respektuje każdą częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli odświeżanie nie zostało włączone, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.

Obsługa zmian orientacji

Gdy orientacja ekranu aplikacji się zmieni, np. z portrait na poziomą, dostępna szerokość banera często też się zmienia. Aby wyświetlać reklamy o odpowiednim rozmiarze w nowym układzie, wyślij żądanie dotyczące nowego banera. Jeśli szerokość banera jest stała lub ograniczenia układu umożliwiają zmianę rozmiaru, pomiń ten krok.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

Zdarzenia reklamowe

Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, np. zamknięcia reklamy lub opuszczenia aplikacji przez użytkownika.

Rejestrowanie się na wydarzenia z banerem

Aby zarejestrować zdarzenia związane z banerami reklamowymi, ustaw właściwość delegate w GADBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zwykle klasa, która implementuje reklamy banerowe, pełni też funkcję klasy delegata. W takim przypadku właściwość delegate można ustawić na self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

Implementowanie zdarzeń banera

Każda z metod w GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, które chcesz. W tym przykładzie zaimplementowano każdą metodę i zarejestrowano komunikat w konsoli:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

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 metod delegata banera w aplikacji w wersji demonstracyjnej interfejsu iOS API znajdziesz w sekcji Ad Delegate.

Swift Objective-C

Przypadki użycia

Oto kilka przykładowych przypadków użycia tych metod zdarzeń związanych z reklamami.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

Możesz 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: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

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

Animowanie banera reklamowego

Możesz też użyć zdarzenia bannerViewDidReceiveAd:, aby animować baner reklamowy po jego zwróceniu, jak pokazano w tym przykładzie:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  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 działania aplikacji

Protokół GADBannerViewDelegate ma 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 przez reklamy, zarejestruj się w tych GADBannerViewDelegatemetodach.

Aby wykrywać wszystkie typy prezentacji nakładkowych lub wywołań zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w UIViewController lub UIApplication. W tabeli poniżej znajdziesz odpowiedniki metod iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:

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

Dodatkowe materiały

Przykłady w GitHubie

Dalsze kroki

Banery zwijane

Banery zwijane to reklamy banerowe, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zwinięcie reklamy do mniejszego rozmiaru. Możesz go użyć, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w sekcji banery zwijane.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne są większe i wyższe od zakotwiczonych banerów adaptacyjnych. Mają zmienną wysokość i mogą zajmować całą wysokość ekranu urządzenia. W przypadku aplikacji, w których banery reklamowe są umieszczane w treściach, które można przewijać, zalecane są śródtekstowe banery adaptacyjne zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule Banery adaptacyjne w tekście.

Przeglądaj inne tematy